skills.rest
brightdata
brightdataOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-mirror

Extract design tokens from a website and apply them to Tailwind, CSS variables, or CSS-in-JS.

245|35|Updated Jan 28, 2026
Search Tags:#design#theming#tokens#design-system#visual-language#ui-mirroring
One-click install
npx skills add https://github.com/brightdata/skills --skill design-mirror-brightdata
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mirror
Source: https://github.com/brightdata/skills/tree/main/skills/design-mirror
Command: npx skills add https://github.com/brightdata/skills --skill design-mirror-brightdata

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Replicate the visual design language of any website and apply it to your existing codebase, enabling consistent UI theming across projects.

Core Features & Use Cases

  • Capture: Screenshot + HTML/CSS extraction of the inspiration site to identify colors, typography, spacing, and component shapes.
  • Analyze: Build a design token map (colors, typography, spacing, radii, shadows) and translate patterns to your codebase conventions.
  • Apply: Re-theme your UI by integrating tokens into your framework (Tailwind, CSS variables, or CSS-in-JS) without copying content.

Quick Start

Provide the inspiration site URL and your front-end framework, and I will extract design tokens and apply them to your codebase.

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 an existing website and apply them to my UI?▼

You can extract design tokens from an existing website by capturing its HTML/CSS and live visuals to map colors, typography, spacing, radii, and shadows, then apply these tokens directly to your UI framework.

Can I use this to mirror a website's visual design language in Tailwind or CSS-in-JS?▼

Yes, you can mirror a website's visual design language in Tailwind, CSS variables, or CSS-in-JS by translating captured design tokens into your specific front-end styling conventions.

What's the best way to copy a website's color palette and typography into my codebase?▼

The best way to copy a website's color palette and typography is to extract the live CSS design data, build a token map, and integrate those variables into your front-end stack safely and reversibly.

Does this approach capture component shapes and spacing from inspiration sites?▼

Yes, this approach captures component shapes and spacing from inspiration sites by analyzing the extracted CSS and live screenshots to build a comprehensive design token map for your UI.

Will re-theming my UI with extracted design tokens overwrite my original codebase content?▼

Re-theming your UI with extracted design tokens will not overwrite your original content; it integrates the visual styling system through a safe, reversible application workflow without copying site content.

How to replicate another site's UI design system without manually copying CSS?▼

To replicate another site's UI design system without manually copying CSS, provide the inspiration URL and your framework to automatically extract design patterns and map them to your styling conventions.

Related Skills

Explore More Design & Creative Skills→
AirMileAirMile

frontend-convert

Convert screenshots or URLs into frontend code with Playwright verification.

Community
Advanced
vtexvtex
39

faststore-theming

Implement FastStore theming with design tokens and data attributes.

Official
Advanced
rakibulismrakibulism
2

design-to-code

Translate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.

Community
Advanced
The13thNodeThe13thNode
3

design-reference-scraper

Extract design system patterns from reference websites into structured design tokens.

Community
Intermediate