design-skills

Build new UI components, pages, layouts, or full apps using real-world design systems. Use this skill whenever the user wants to create UI inspired by a specific brand or website (Apple, Stripe, Airbnb, Linear, Vercel, Tesla, Figma, Notion, Spotify, and 49 more), asks to "make it look like [brand]", wants a landing page, dashboard, or component in a particular style, or mentions DESIGN.md files. Also trigger when the user wants pixel-perfect UI matching a known brand's visual language, wants to build "in the style of" a company, or references any design system from the awesome-design-md collection — even if they don't explicitly mention design systems.

Create a new DESIGN.md file for any website, app, or custom design system. Use when the user wants to document a design system in DESIGN.md format, extract design tokens from a URL or existing CSS, create a custom design system from scratch, author a DESIGN.md for their own project, or contribute a new design to the awesome-design-md collection. Also trigger when user mentions "design system documentation", wants to formalize their app's visual language, or asks to create or generate a DESIGN.md file.

Extract code-ready design tokens from a DESIGN.md file. Converts design system documentation into CSS custom properties, Tailwind CSS config, styled-components theme objects, CSS-in-JS themes, or W3C Design Tokens JSON. Use when the user wants to turn a design system into usable code tokens, generate a Tailwind config from a brand's design, create CSS variables from a DESIGN.md, bootstrap a theme file for their framework, or extract a color palette, typography scale, or spacing system as code. Also trigger when the user wants to "use Stripe's colors in my project" or "set up a theme based on Linear".

Redesign or restyle existing UI to match a specific brand's design system. Use when the user has existing code, components, or an app and wants to transform the visual language to match Apple, Stripe, Linear, Notion, Vercel, or any of 58 curated design systems. Also trigger when the user says "retheme", "restyle", "make this look like [brand]", "apply [brand] design", wants to migrate an app's visual identity, change the look and feel, or apply a new skin to existing UI. This includes partial redesigns like "make just the header look like Linear" or "use Stripe's color palette".