What problem does it solve? Recreating the visual identity of well-known websites requires manually reverse-engineering colors, typography, spacing, and component styles. This Skill provides 54 ready-made design system templates extracted from real sites like Stripe, Linear, Vercel, Notion, and Airbnb, so generated HTML/CSS matches a target site's look without manual inspection. ## Core Features & Use Cases - 54 Design System Templates: Each template documents color palettes, typography hierarchies, component styles, layout rules, shadows, responsive breakpoints, and do's/don'ts for a specific website. - CDN Font Substitutions: Every template includes Google Fonts links and CSS font stacks that substitute proprietary fonts (e.g., DM Sans for Airbnb Cereal, Source Sans 3 for Stripe's sohne-var). - Agent Prompt Guides: Templates include ready-to-use component prompts with exact CSS values, plus implementation notes for writing files and verifying output with browser vision. - Use Case: Ask for a landing page styled like Linear, and the Skill loads the Linear template to produce HTML with its dark theme, purple accent, precise typography scale, and component specs. ## Quick Start Ask the agent to build a landing page that looks like Stripe, and it will load the corresponding template and generate matching HTML/CSS.
