What problem does it solve? Building UI that accurately matches a specific brand's design system requires manually extracting colors, typography, shadows, and spacing from live sites, which is slow and error-prone. This Skill reads curated DESIGN.md files containing the complete visual specifications of 58 real-world design systems and generates code that follows them exactly. ## Core Features & Use Cases - Brand-accurate UI generation: Builds pages, components, and full app shells using exact hex values, font hierarchies, shadow systems, and spacing scales from brands like Stripe, Linear, Apple, and Vercel. - Multi-framework output: Produces HTML + CSS, React + Tailwind, React + CSS Modules, Vue, Svelte, or CSS-only output matched to the project's existing stack. - Systematic verification: Applies all 9 DESIGN.md sections (colors, typography, components, layout, depth, guardrails, responsive behavior) and checks output against documented Do's and Don'ts. - Use Case: Ask for a pricing page in Stripe's style and receive complete JSX with Tailwind classes using Stripe's exact purple (#533afd), typography scale, and blue-tinted shadows. ## Quick Start Ask the assistant to build a landing page in the style of Linear using the design-md catalog in your project.
