skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch::extract-design-md

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

Updated Jun 27, 2026
Search Tags:#frontend#design system#css#design tokens#tailwind#extract#stitch
One-click install
npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-extract-design-md-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::extract-design-md
Source: https://github.com/khulnasoft-bot/scalify/tree/main/skills/plugins/stitch-design/skills/extract-design-md
Command: npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-extract-design-md-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Understanding a project's visual language normally requires building and rendering the app, which fails when dependencies are missing or the build is broken. This Skill reads frontend source files directly to reverse-engineer a complete design system document. ## Core Features & Use Cases - Source-Based Extraction: Analyzes stylesheets, component files, Tailwind configs, theme definitions, and design tokens across React, Vue, Svelte, Angular, and plain CSS projects. - Structured DESIGN.md Output: Produces a Stitch-compatible design system document with YAML frontmatter covering colors, typography, spacing, components, and layout principles. - Framework-Specific Guidance: Ships reference files with extraction patterns for React/Tailwind, Vue, Svelte, Angular, and plain CSS/SASS codebases. - Use Case: Point it at a frontend repo you inherited and ask for a design audit — it consolidates near-duplicate colors, names tokens descriptively, and documents the intended visual language. ## Quick Start Extract the design system from this frontend codebase and write a DESIGN.md file describing its colors, typography, and component styles.

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?▼

Scan the project root for framework signals like package.json and tailwind.config.js, then read theme files, CSS custom properties, and representative components. Consolidate colors by functional role, document the typography hierarchy, and assemble everything into a structured DESIGN.md.

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

Yes, source-based extraction reads stylesheets, Tailwind configs, theme definitions, and component files directly without any build or runtime dependencies. This works even when dependencies are missing or the build is broken.

Does design extraction work with Tailwind CSS projects?▼

Yes, a customized tailwind.config.js effectively is the design system. Extract custom colors, fontFamily, spacing, borderRadius, and screens from theme.extend first, then spot-check components for overrides and inline class patterns.

Which frontend frameworks are supported for design extraction?▼

The skill covers React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, and plain HTML/CSS/SASS/Less projects. It also handles CSS-in-JS setups like styled-components and Emotion, plus libraries like Chakra UI, MUI, Vuetify, and Angular Material.

What is the difference between extracting design from source code versus rendered HTML?▼

Source-based extraction reads theme configs, tokens, and stylesheets directly, making it faster and usable when the app cannot be built. Rendered-HTML extraction captures computed styles from a running page, which reflects what actually shipped rather than the intended system.

Why should near-duplicate colors be consolidated in a design audit?▼

Codebases often accumulate near-identical values like #333 and #2C2C2C through ad-hoc edits. Consolidating them under one descriptive name reveals the intended palette and highlights inconsistencies that should be reconciled.

Related Skills

Explore More Design & Creative Skills→
gmolikegmolike

design-briefing

Creates UI/UX design briefs before frontend story implementation across multiple repositories.

Community
Intermediate
vikingokftvikingokft

stitch::manage-design-system

Create and apply Stitch design systems from DESIGN.md via MCP tools.

Official
Advanced
chrismccoychrismccoy
2

page-cloner

Clones a live webpage into standalone HTML with preserved markup, styles, and assets.

Community
Advanced
tranhoainam298tranhoainam298
1

stitch::extract-design-md

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

Community
Advanced