skills.rest
mokhtarabadi
mokhtarabadiCOMMUNITY
Explore all skills by this author →
Website𝕏@mokhatarabadiGitHub

design-md

Extracts a design system document from frontend source code and stylesheets.

6|Updated May 18, 2026
Search Tags:#typography#design system#design tokens#tailwind#stitch#css extraction#frontend audit
One-click install
npx skills add https://github.com/mokhtarabadi/cognitive-lead-hq --skill design-md-mokhtarabadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/mokhtarabadi/cognitive-lead-hq/tree/main/skill-templates/design-md
Command: npx skills add https://github.com/mokhtarabadi/cognitive-lead-hq --skill design-md-mokhtarabadi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Understanding a project's visual language usually requires running the app or manually auditing scattered styles. This Skill reverse-engineers a complete design system (DESIGN.md) directly from frontend source code — no build, render, or runtime needed. ## Core Features & Use Cases - Source-Based Extraction: Analyzes React, Vue, Svelte, Angular, Tailwind configs, CSS custom properties, and theme/token files to extract colors, typography, spacing, and component styles. - Structured DESIGN.md Output: Produces a standardized document covering visual theme, color roles, typography hierarchy, component stylings, layout principles, and Stitch generation notes. - Framework-Specific Guidance: Loads dedicated reference files per framework to locate design tokens accurately. - Use Case: You inherit a legacy React codebase with no design documentation. Run this Skill to generate a DESIGN.md capturing the palette, type scale, and component patterns, then hand it to Stitch to 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 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 the Skill at the frontend source directory. It detects the framework from package.json, reads Tailwind configs, CSS custom properties, and theme files, then synthesizes colors, typography, and component styles into a DESIGN.md document.

How to generate a DESIGN.md from a Tailwind project?▼

The Skill treats tailwind.config.js as the design system source, extracting custom colors, fonts, and spacing from theme.extend, then spot-checks components for overrides before writing the DESIGN.md.

Does design extraction work without building the app?▼

Yes. The Skill reads source files only — stylesheets, component files, and theme configs — so it works even when dependencies are missing or the build is broken. No runtime or rendering is required.

Which frontend frameworks are supported for design extraction?▼

React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, and plain CSS/SASS/Less projects are supported. Framework-specific reference files guide where to locate colors, typography, and component styles in each stack.

Can the extracted design system be used with Stitch?▼

Yes. The DESIGN.md includes a Stitch generation notes section with atmosphere language, named color references, and component prompts. An optional integration phase hands the document to the manage-design-system skill for Stitch API updates.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
JStaRFilmsJStaRFilms
23

design-md

Analyze Stitch project assets to generate a DESIGN.md semantic design system.

Community
Intermediate
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
OrangeViolinOrangeViolin
22

presentation

Generate presentation scripts and single-file HTML slide decks from a topic.

Community
Advanced