domains / families / design / extract-design-md

extract-design-md

separate

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

When to use

• User has a frontend codebase and wants to extract or document its design system
• User wants to migrate a project's visual identity into Stitch
• User asks to "audit the styling" or "understand the design language" of a repo
• User wants to create a DESIGN.md from existing source code
• The app can't be built/rendered but the source is available
• User wants to unify or reconcile inconsistent styles across a codebase

When not to use

• extracting design from rendered HTML

Skill page

Source