🎯

design-md

🎯Skill

from google-labs-code/stitch-skills

What it does

A skill from Google Labs that analyzes Stitch projects and generates DESIGN.md files documenting design systems in semantic, natural language. Extracts color palettes, typography, geometry, and visual patterns from existing screens.

Overview

Design MD is a skill from Google Labs' Stitch Skills repository that analyzes Stitch projects and generates comprehensive DESIGN.md files. These files document design systems in natural, semantic language optimized for Stitch screen generation. The skill acts as an expert Design Systems Lead, extracting design tokens, color palettes, typography, geometry, and elevation details from existing Stitch screens.

The skill works by connecting to the Stitch MCP Server to retrieve project metadata, screen data, HTML source code, and screenshots. It then synthesizes this information into a structured DESIGN.md file that serves as the source of truth for generating new screens that visually align with the existing design language.

Key Features

Automated design system extraction: Analyzes Stitch projects to extract colors, typography, geometry, elevation, and visual atmosphere from existing screens
Stitch MCP Server integration: Uses Stitch MCP tools for project lookup, screen retrieval, metadata fetching, and asset downloading
Semantic design language: Documents design systems using descriptive, natural language rather than raw technical values
Color palette mapping: Maps colors with descriptive names, hex codes, and functional roles for precise reproduction
Geometry and shape translation: Converts technical CSS values (border-radius, etc.) into physical descriptions like "pill-shaped" or "subtly rounded corners"
Structured output format: Generates a standardized DESIGN.md with sections for visual theme, color palette, typography, geometry, depth, component patterns, and layout

Who is this for?

This skill is for designers and developers who use Google's Stitch platform to generate UI screens and need to document their design systems in a way that ensures consistency across new screen generation.

📦

Same repository

google-labs-code/stitch-skills(6 items)

design-md

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

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

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

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

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/design-md/SKILL.md

SKILL.md

14,197Installs

1,078

Last UpdatedJan 23, 2026

View on GitHub Back to Skills

More from this repository5

🎯

react:components🎯Skill

A skill from Google Labs that converts Stitch-generated screens into React component systems with automated validation and design token consistency, compatible with Claude Code, Gemini CLI, and other coding agents.

🎯

stitch-loop🎯Skill

A skill for Google Labs Stitch that enables autonomous, iterative website building through a baton-passing loop with Stitch MCP page generation and optional Chrome DevTools verification.

🎯

enhance-prompt🎯Skill

Optimizes and refines AI prompts by analyzing structure, clarity, context, and potential response quality to improve interaction effectiveness.

🎯

shadcn-ui🎯Skill

Provides expert guidance for discovering, installing, and customizing shadcn/ui components with full code ownership and zero runtime overhead.

🎯

remotion🎯Skill

Generate walkthrough videos from Stitch app designs using Remotion with smooth transitions, zoom effects, and text overlays