StealIt
Google Labs OfficialClaude skill for design

Stitch Extract Design MD

stitch::extract-design-md

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 the user wants 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 they just say "what does this app look like?" or "pull out the design from this code."

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Stitch Extract Design MD

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1Why This Exists
  2. 2When to Use
  3. 3Prerequisites
  4. 4Workflow
  5. 5Quality Checklist
  6. 6Tips for Better Extraction

Section headings from the skill's SKILL.md file.

What's inside · 7 files

  • SKILL.md
  • examples/DESIGN.md
  • references/angular.md
  • references/plain-css.md
  • references/react-tailwind.md
  • references/svelte.md
  • references/vue.md

More from Google Labs

See all →

Design MD

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Design & UIGoogle Labs8.7k

Enhance Prompt

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better…

AI & AgentsGoogle Labs8.7k

React Vite Dashboard

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

FrontendGoogle Labs8.7k

Remotion

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Video & MotionGoogle Labs8.7k

More Claude skills for design

See all →

Frontend DesignTop pick

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…

Design & UIAnthropic187k

UI UX Pro MaxTop pick

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…

Design & UINextLevelBuilder145k

Taste SkillTop pick

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…

Design & UILeon110k

Impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…

Design & UIPaul Bakaus103k