stitch::extract-design-md

Extract a design system document from frontend source code without building the app.

1|Updated Jun 27, 2026

Search Tags:#frontend #design system #css #design tokens #tailwind #extract #stitch

Ready to run

npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-extract-design-md-tranhoainam298

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stitch::extract-design-md
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-design/skills/extract-design-md
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-extract-design-md-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Understanding a project's visual language normally requires running the app or manually auditing scattered stylesheets. This Skill reverse-engineers a complete design system (DESIGN.md) directly from frontend source files, even when the project cannot be built or rendered. ## Core Features & Use Cases - Source-Based Extraction: Analyzes Tailwind configs, CSS custom properties, theme files, and component styles across React, Vue, Svelte, Angular, and plain CSS projects. - Structured DESIGN.md Output: Produces a Stitch-compatible document with YAML frontmatter covering colors, typography, spacing, components, and layout principles. - Framework-Specific Guidance: Ships reference guides for React/Tailwind, Vue, Svelte, Angular, and plain CSS extraction patterns. - Use Case: You inherit a React codebase with no design documentation. Run this Skill to generate a DESIGN.md capturing the color palette, type scale, and component styling so a designer or Stitch can recreate the visual identity. ## Quick Start Analyze this frontend repository and generate a DESIGN.md design system document from its source code.

Frequently Asked Questions about stitch::extract-design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract a design system from an existing codebase?▼

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.

Can I generate a DESIGN.md without running the app?▼

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.

What frameworks does design system extraction support?▼

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.

Does it work with Tailwind CSS projects?▼

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.

What format does the extracted design system use?▼

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.

When should I use source extraction instead of rendered HTML analysis?▼

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.