stitch::extract-design-md

Point this Skill at the frontend source directory and it scans package.json, Tailwind configs, global stylesheets, and component files to identify colors, typography, spacing, and component patterns. It then writes a structured DESIGN.md to the .stitch directory.

Yes, this Skill reads source files only and never builds or renders the application. It works even when dependencies are missing or the build is broken, making it suitable for quick design audits of any repo.

It supports React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, and plain HTML/CSS/SASS projects. Framework-specific reference guides cover Tailwind configs, CSS-in-JS themes, Vuetify, Angular Material, and CSS custom properties.

Yes, the tailwind.config.js or tailwind.config.ts file is treated as the primary design system source. Custom colors, fonts, spacing, border radii, and breakpoints are extracted directly, then components are spot-checked for overrides.

The output is a DESIGN.md file with mandatory YAML frontmatter containing name and color token mappings, followed by markdown sections for theme, palette, typography, components, layout, and Stitch generation notes.

Use source extraction when the app cannot be built, dependencies are unavailable, or you want a fast audit before setup. Rendered HTML analysis suits cases where you need to capture the actual runtime appearance including dynamic styles.