stitch::extract-design-md

Topics in the source

• Extract Design System from Frontend Code
• Why This Exists
• When to Use
• Prerequisites
• Workflow
• Phase 1: Project Discovery
• 1. Detect the Framework and Stack
• 2. Map the Source Tree

Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language — colors, typography, spacing, component patterns, and layout principles — directly from the source files, without needing to build or render the application. The design-md skill works from rendered HTML. But often you have a codebase and want to understand its design system before you can even run the app — maybe dependencies are missing, the build is broken, or you just want a quick audit. This skill reads the source files themselves: stylesheets, component files, theme configs, and Tailwind setups. It's faster and works anywhere. 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 Access to the frontend project's source directory No build or runtime dependencies needed — this skill reads source

This is an excerpt. Refer to the complete source and its current requirements.