design-md

✓Verified·Scanned 2/12/2026

This skill analyzes Stitch projects and synthesizes a DESIGN.md documenting visual themes, tokens, and component rules. It instructs fetching project data via [prefix]:list_projects/[prefix]:get_screen and downloading htmlCode.downloadUrl/screenshot.downloadUrl with web_fetch.

by google-labs-code·ve8df144·19.3 KB·4,691 installs
Scanned from main at e8df144 · Transparency log ↗
$ vett add google-labs-code/stitch-skills/design-md

Stitch Design System Documentation Skill

Install

npx skills add google-labs-code/stitch-skills --skill design-md --global

Example Prompt

Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.

Skill Structure

This repository follows the Agent Skills open standard. Each skill is self-contained with its own logic, workflow, and reference materials.

design-md/
├── SKILL.md           — Core instructions & workflow
├── examples/          — Sample DESIGN.md outputs
└── README.md          — This file

How it Works

When activated, the agent follows a structured design analysis pipeline:

  1. Retrieval: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
  2. Extraction: Identifies design tokens including colors, typography, spacing, and component patterns.
  3. Translation: Converts technical CSS/Tailwind values into descriptive, natural design language.
  4. Synthesis: Generates a comprehensive DESIGN.md following the semantic design system format.
  5. Alignment: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.