Individual skill
design-mirror
Replicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look like', 'match the design of', 'copy the style from', 'I want my app to look like X', 'mirror this design', 'inspired by [url]', or any time the user points at a website and says they want their frontend to match it.
cli-tool/components/skills/web-data/design-mirror/SKILL.md
Source commit ad81bf053f80b626801decf425f501ba49983d98
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 33,182
- Repository last updated
- Nov 7, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- anthropic Repository topic
- anthropic-claude Repository topic
- claude Repository topic
- claude-code Repository topic
- agent-skills Repository topic
- ai-agents Repository topic
- claude-code-plugins Repository topic
- cli Repository topic
- mcp Repository topic
- registry Repository topic
- design Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 8,278 bytesSKILL.mdcore · 8,278 bytesSKILL.mdcore · 8,278 bytesSKILL.mdcore · 8,278 bytesreferences/apply-guide.mddoc · 6,526 bytesreferences/capture-guide.mddoc · 3,020 bytesreferences/css-extraction.mddoc · 4,682 bytesscripts/scrape_html.shruns · 999 bytesscripts/screenshot.shruns · 1,030 bytes
Read excerpt
# Design Mirror
Capture the visual design language of any website and apply it to your existing codebase — colors, typography, spacing, layout rhythm, component shapes, and overall aesthetic — all extracted live via Bright Data's Web Unlocker.
## What This Skill Does
1. **Capture** — Screenshot + HTML scrape the inspiration site via Bright Data
2. **Extract** — Identify the full design system: colors, fonts, spacing scale, border radii, shadows, component patterns
3. **Analyze** — Study the screenshot visually and the CSS structurally to understand the design language
4. **Apply** — Translate that design system into the user's existing codebase (their framework, their components)
You are not copying content or functionality. You're understanding the *design language* — the palette, the type scale, the card shapes, the hover states, the overall aesthetic feel.
> **Important:** This skill is for design inspiration and learning — extracting publicly visible design tokens (colors, fonts, spacing) to inform your own UI work. Always use it respectfully and in accordance with the terms of service of the sites you reference.