skills.rest
semaes111
semaes111COMMUNITY
Explore all skills by this author →
GitHub

design-mirror

Extract visual design tokens from a reference site and apply them across a codebase.

Updated Mar 29, 2026
Search Tags:#branding#theming#ui-design#design-tokens#frontend-styling#design-mirroring
One-click install
npx skills add https://github.com/semaes111/3DWEB-NIVEL-DIOS --skill design-mirror
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mirror
Source: https://github.com/semaes111/3DWEB-NIVEL-DIOS/tree/main/skills/web-data-design-mirror
Command: npx skills add https://github.com/semaes111/3DWEB-NIVEL-DIOS --skill design-mirror

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps front-end teams quickly adopt and reproduce the visual language of any reference site, enabling faster branding alignment and design exploration within an existing codebase.

Core Features & Use Cases

  • Design language capture: extract colors, typography, spacing, radii, and shadows from a target site.
  • Token-driven application: map tokens to your framework (Tailwind, CSS variables, or CSS-in-JS) and apply them across components.
  • Use Cases: white-labeling an app, matching a competitor's UI, or rapidly prototyping a new theme based on a URL.

Quick Start

Apply the design language from the inspiration site to your UI to match its look.

Frequently Asked Questions about design-mirror

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a website to match its UI style?▼

Design tokens from a reference site are extracted by capturing its visual language, including colors, typography, spacing, radii, and shadows. This skill translates those elements into a reusable token set to drive consistent UI implementation.

Can I apply extracted design tokens to my project using Tailwind or CSS variables?▼

Yes, extracted design tokens can be applied using Tailwind, CSS variables, or CSS-in-JS. The skill generates a token map and applies it across components and layout within your project's chosen stack.

Does design token mapping support dark and light mode theming?▼

Yes, design token mapping supports dark and light mode theming. The skill includes validation and safe-guards to ensure correct styling when applying tokens across dark and light modes.

What is the best way to white-label an app by mirroring another site's branding?▼

The best way to white-label an app is to extract the target site's visual language into design tokens and apply them across your codebase. This enables rapid branding alignment and UI theming without manual styling.

How do I prototype a new theme based on an existing website URL?▼

To prototype a new theme from a URL, the skill captures the reference site's design language and generates a design-token map. It applies these tokens to your components, enabling rapid design exploration within your existing stack.

Related Skills

Explore More Design & Creative Skills→
maxrittermaxritter
1.8k

standards-css

Enforce design tokens and standardized CSS methodologies across frontend codebases.

Community
Intermediate
systempromptiosystempromptio
2

visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

Official
Advanced
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
maxnormmaxnorm
26

magento-css-specialist

Develop modular LESS and CSS styles for Magento 2 themes.

Community
Intermediate