design-md

To generate a design system document from a Stitch project, apply this Skill to extract project metadata, screens, and CSS. It synthesizes a comprehensive DESIGN.md capturing your visual language, color palette, typography, and component patterns as reusable design tokens.

Extracting design tokens from Stitch HTML and CSS involves analyzing project metadata to translate technical values into descriptive language. This process captures precise hex codes, semantic color names, spacing, and component patterns into a structured design document.

The structure of a DESIGN.md file for documenting visual language includes specific sections for Atmosphere, Color Palette, Typography, Components, and Layout. This format ensures technical design values are translated into descriptive, designer-friendly guidelines for future screen development.

Yes, you can document semantic color names and precise hex codes from existing Stitch screens. The Skill analyzes your project's HTML and CSS to ensure the output strictly follows the DESIGN.md structure with accurate semantic naming for your color palette.

Yes, this design documentation tool works without external dependencies. It operates independently to retrieve Stitch project metadata, screens, HTML/CSS, and design tokens, directly producing a DESIGN.md file that documents your project's visual language.

The best way to translate technical CSS values into designer-friendly design tokens is to synthesize them into a semantic DESIGN.md. This process converts raw colors, typography, and spacing into a structured document with descriptive language for reusable component patterns.