Agent skill · design visual · davila7
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.
Why this skill is useful
Adds executable scripts for capturing and analyzing design elements from any website, providing a structured design token map that enhances UI development.
What it needs
Requires brightdata installed locally. Requires brightdata account access. About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
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. Setup Requires: BRIGHTDATAAPIKEY — from brightdata.com/cp → Account Settings BRIGHTDATAUNLOCKERZONE — create an Unlocker zone at brightdata.com/cp Step-by-Step Process Step 1: Capture the Inspiration Site Run both captures in parallel — screenshot (for visual analysis) and HTML scrape (for CSS extraction): Read references/capture-guide.md for how to extract CSS from the raw HTML and handle common issues. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/design-mirror