design-md

design-md - Stitch design system documentation generation skill

Skill Overview

design-md is a professional design-system analysis skill that can automatically analyze Stitch projects and generate semantic DESIGN.md documents, converting the design language into reusable design guidelines.

Applicable Scenarios

Design system documentation

When you need to convert an existing Stitch project design into structured documentation, design-md can automatically extract design elements such as colors, typography, and component styles, and generate a standardized DESIGN.md file.

Design guideline alignment

In team collaboration, design-md helps designers and developers establish a shared understanding of the design language, ensuring that newly generated screens maintain a consistent visual style with existing designs.

Design asset analysis

During project migration or design refactoring, design-md can quickly analyze all design elements of the existing design system, including color schemes, geometric shapes, shadow depths, and other details.

Core Features

Intelligent design extraction

Fetch screen metadata and design assets from the Stitch MCP server, automatically parse HTML/CSS code, extract Tailwind class names, custom CSS, and component patterns, and translate technical parameters into natural language descriptions.

Semantic color mapping

Not only extract hexadecimal color codes, but also assign descriptive names to each color (e.g., "Deep Muted Teal-Navy #294056") and explain their functional usage (e.g., "used for primary action buttons").

Geometry and depth translation

Convert technical CSS properties into designer-friendly descriptive language—for example, describe "rounded-full" as "Pill-shaped" and shadow effects as "Whisper-soft diffused shadows."

Frequently Asked Questions

What is the design-md skill and what is it used for?

design-md is a skill developed specifically for analyzing design systems in Stitch projects. Its core function is to analyze existing Stitch project screens, automatically extract and organize all design elements (including colors, typography, component styles, layout principles, etc.), and ultimately generate a structured DESIGN.md file. This file can serve as the design system's "single source of truth" to guide Stitch in generating new screens that match the existing design style.

How do I use design-md to generate a DESIGN.md file?

Using design-md requires three prerequisites: access to the Stitch MCP server, at least one Stitch project containing design screens, and following Stitch's valid prompt guide. The general steps are: first use list_tools to discover the Stitch MCP prefix, then use list_projects and list_screens to locate the target project, next call get_screen to obtain screen metadata and design assets, and finally parse the HTML/CSS and generate the DESIGN.md file according to the specified structure.

What does the generated DESIGN.md file contain?

The DESIGN.md file contains five main sections: 1) Visual theme and mood describing the overall aesthetic of the project; 2) Color palette and roles listing all key colors with descriptive names, hexadecimal codes, and functional usage; 3) Typography rules detailing font families, weight usage, and letter-spacing characteristics; 4) Component styles describing the shape, color, and behavior of components like buttons, cards, and forms; 5) Layout principles explaining whitespace strategy, margins, and grid alignment. All descriptions use natural language rather than technical jargon to make them easy for designers to understand and reference.