design-mirror

Topics in the source

• Design Mirror
• What This Skill Does
• Setup
• Step-by-Step Process
• Step 1: Capture the Inspiration Site
• Step 2: Analyze the Design System
• Step 3: Build the Design Token Map
• Step 4: Understand the User's Codebase

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. 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. Requires: BRIGHTDATAAPIKEY — from brightdata.com/cp → Account Settings BRIGHTDATAUNLOCKERZONE — create an Unlocker zone at bright

This is an excerpt. Refer to the complete source and its current requirements.