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

Ready to run

npx skills add https://github.com/semaes111/3DWEB-NIVEL-DIOS --skill design-mirror

💬 Prompt for ChatGPT / Claude Chat▼

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.