Skills
.Work. You
Rest

stitch::extract-design-md

Official

Turn frontend code into a design system doc.

Design & Creative#documentation#frontend#tokens#design-system#reverse-engineering#design-extraction
Authorvikingokft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever you want to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if you just say "what does this app look like?" or "pull out the design from this code."

Core Features & Use Cases

  • Read frontend source to generate DESIGN.md containing colors, typography, spacing, component patterns, and tokens
  • Supports React, Vue, Svelte, Angular, and plain HTML/CSS projects
  • Use cases include design-system reconstruction, visual-audit, token extraction, and pattern analysis

Quick Start

To begin, run the design-extraction workflow on your frontend repository to generate DESIGN.md.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: stitch::extract-design-md
Download link: https://github.com/vikingokft/vikingo-studio-skills/archive/main.zip#stitch-extract-design-md

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.