skills.rest
google-labs-code
google-labs-codeOFFICIAL
Explore all skills by this author →
GitHub

design-md

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

8.0k|1.1k|Updated Jan 16, 2026
Search Tags:#design-system#design-tokens#stitch#screen-generation#design-md#semantic-design
One-click install
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md-google-labs-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/google-labs-code/stitch-skills/tree/main/skills/design-md
Command: npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md-google-labs-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams generate comprehensive DESIGN.md design-system documentation from Stitch projects by analyzing screens, tokens, and color metadata, creating a single source of truth for design language.

Core Features & Use Cases

  • Retrieve screen metadata and design assets from the Stitch MCP Server and parse design tokens (colors, typography, spacing, components).
  • Translate technical CSS/Tailwind patterns into descriptive, human-friendly design language suitable for prompting Stitch.
  • Synthesize a complete DESIGN.md that documents the design system and can guide future screen generation and collaboration.
  • Align outputs with Stitch Effective Prompting Guide to ensure consistent, high-quality prompts across projects.

Quick Start

Analyze a Stitch project and generate a DESIGN.md that documents its design system.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design system documentation from Stitch screens?▼

Generate design system documentation from Stitch by analyzing screen assets and HTML/CSS patterns to extract design tokens, producing a natural-language DESIGN.md file that codifies your semantic design language.

What is a semantic design system and how does Stitch use it?▼

A semantic design system translates technical CSS and Tailwind patterns into human-friendly design guidance, serving as an authoritative source for prompting Stitch to generate visually consistent screens.

How do I extract design tokens from existing screens and CSS patterns?▼

Extract design tokens like colors, typography, and spacing by retrieving screen metadata from the Stitch MCP Server and parsing HTML and CSS patterns to synthesize a complete design system document.

Can I use a DESIGN.md file to guide future Stitch screen generation?▼

Yes, you can use a generated DESIGN.md as a single source of truth to prompt Stitch, ensuring future screen generation aligns with your established design language and consistent design tokens.

Does generating a design doc require manually mapping Tailwind classes to design tokens?▼

No, generating a design doc does not require manual mapping because the process automatically translates technical CSS and Tailwind patterns into descriptive, human-friendly design language for your documentation.

What are the limitations of using design tokens for Stitch screen generation?▼

A limitation is that the generated DESIGN.md relies entirely on the existing Stitch project assets, meaning incomplete or inconsistent screen metadata will result in an incomplete semantic design system.

Related Skills

Explore More Design & Creative Skills→
Nexprove-TeamNexprove-Team
1

design-md

Generate a DESIGN.md synthesizing semantic design tokens from Stitch projects.

Official
Advanced
cassioalexandrecassioalexandre
2

stitch-design

Convert vague UI intent into Stitch screens and design systems.

Community
Advanced
phamhuutri108phamhuutri108

design-md

Analyze Stitch project assets to generate a semantic DESIGN.md reference.

Community
Advanced
hueyexehueyexe
3

design-systems-frontend-architecture

Plans scalable frontend systems with tokens, components, and governance.

Community
Advanced