design-md
๐ฏSkillfrom google-labs-code/stitch-skills
|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(8 items)
Installation
npx vibeindex add google-labs-code/stitch-skills --skill design-mdnpx skills add google-labs-code/stitch-skills --skill design-md~/.claude/skills/design-md/SKILL.mdSKILL.md
More from this repository7
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.
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.
Optimizes and refines AI prompts by analyzing structure, clarity, context, and potential response quality to improve interaction effectiveness.
Provides expert guidance for discovering, installing, and customizing shadcn/ui components with full code ownership and zero runtime overhead.
Generate walkthrough videos from Stitch app designs using Remotion with smooth transitions, zoom effects, and text overlays
A Google Labs skill that serves as the unified entry point for Stitch design work, handling UI/UX prompt enhancement, design system synthesis, and high-fidelity screen generation via the Stitch MCP server.
Semantic design system skill that generates DESIGN.md files for Google Stitch screen generation, encoding visual atmosphere, a banned-color list (no AI purple/neon), typographic architecture (no generic Inter/Times), asymmetric layout rules, and perpetual micro-motion โ so Stitch outputs premium, non-generic UI instead of the default AI-slop look.