stitch::extract-design-md

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

Extracts a comprehensive design system document from frontend source code.

  • Reverse-engineers visual language from existing codebases without building or rendering.
  • Relies on file reading, bash, web fetch, and Stitch tools for analysis.
  • Scans component files, stylesheets, Tailwind configs, and theme definitions for tokens.
  • Produces a Stitch-compatible DESIGN.md capturing colors, typography, spacing, and patterns.

SKILL.md

.github/skills/stitch::extract-design-mdView on GitHub ↗

No skill content available yet.

More from google-labs-code/stitch-skills

SkillDescription
design-mdAnalyze Stitch projects and synthesize a semantic design system into DESIGN.md files
enhance-promptTransforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
react-vite-dashboardConvert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
remotionGenerate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
shadcn-uiExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
site-mdAnalyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
stitch-loopTeaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
stitch::code-to-design>-
stitch::extract-static-html>-
stitch::generate-design>-