skills.rest
IsKenKenYa
IsKenKenYaCOMMUNITY
Explore all skills by this author →
GitHub

design-mirror

Extract CSS design tokens from a target URL and apply them to an existing codebase.

Updated May 11, 2026
Search Tags:#design system#web scraping#tailwind#visual inspiration#theme customization#ui styling#token extraction
One-click install
npx skills add https://github.com/IsKenKenYa/Commory --skill design-mirror-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mirror
Source: https://github.com/IsKenKenYa/Commory/tree/main/.agents/skills/design-mirror
Command: npx skills add https://github.com/IsKenKenYa/Commory --skill design-mirror-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

It helps you replicate a website’s visual design language so your own UI looks cohesive and inspired, without copying the target site’s content or functionality.

Core Features & Use Cases

  • Capture inspiration from a URL: Takes a screenshot and scrapes HTML/CSS to ground the analysis in the actual rendered design.
  • Extract design system tokens: Identifies colors, typography, spacing scale, radii, shadows, and repeated component patterns.
  • Apply the design tokens safely: Translates the extracted tokens into your existing codebase (Tailwind, CSS/CSS modules, styled-components, etc.) with a “design language, not markup” workflow.
  • Use cases: When you want your app to match a specific aesthetic (e.g., a SaaS dashboard style), refresh the look of a landing page, or align an internal UI with an external reference design.

Quick Start

Ask the skill to mirror the design of https://example.com into your current frontend, and specify the framework you’re using (Tailwind, CSS Modules, or styled-components) so it can produce a token-to-code mapping first.

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 system tokens from a website URL?▼

To extract design tokens from a website, you need to set up Bright Data Web Unlocker for screenshot and HTML scraping. This captures the rendered appearance to analyze colors, typography, spacing, and shadows before generating an ordered token map.

Can I apply extracted design tokens to an existing Tailwind codebase?▼

Yes, you can apply extracted design tokens to an existing Tailwind codebase. The skill translates the captured visual design language into your current framework using a non-destructive styling workflow, also supporting CSS modules and styled-components.

Do I need Bright Data Web Unlocker to scrape website design patterns?▼

Yes, you need Bright Data Web Unlocker configured to scrape website design patterns. It provides the required screenshot and HTML scraping capabilities to ground the visual design system analysis.

What is the best way to mirror a SaaS dashboard visual style into my UI?▼

The best way to mirror a SaaS dashboard visual style is to capture the design language from the target URL without copying its content. The skill extracts CSS-driven tokens for typography and colors, then applies non-destructive styling changes to match the aesthetic.

How do I replicate website typography and spacing without copying markup?▼

You can replicate website typography and spacing without copying markup by using a design language workflow. The skill extracts visual tokens from the target URL and maps them to your existing codebase, ensuring your UI looks inspired without replicating functionality.

Related Skills

Explore More Design & Creative Skills→
semaes111semaes111

scrape

Convert web pages to Markdown using Bright Data's Web Unlocker API.

Community
Intermediate
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
syeda-hoorain-alisyeda-hoorain-ali

hsl-to-oklch-converter

Convert HSL color values to OKLCH via automated Playwright workflows.

Community
Intermediate