What problem does it solve? Recreating the visual language of well-known websites requires manually reverse-engineering colors, typography, spacing, and component styles, which is slow and error-prone. This Skill provides ready-made design system specifications so generated HTML/CSS matches a chosen brand's look without manual inspection. ## Core Features & Use Cases - 54 Design System Templates: Each template captures a site's color palette, typography hierarchy, component styles, spacing scale, shadows, and responsive behavior with exact CSS values. - CDN Font Substitutions: Every template includes Google Fonts links and CSS font stacks that replace proprietary fonts while preserving the design's character. - Agent Prompt Guides: Templates include copy-ready component prompts and iteration checklists for generating accurate HTML. - Use Case: When asked to build a landing page that looks like Stripe, load the stripe.md template and apply its purple gradient palette, weight-300 typography, and component specs directly into the generated HTML. ## Quick Start Ask the agent to build a landing page styled like Linear using the popular-web-designs skill, then verify the rendered result visually.
