design-md_skill

Overview

This skill analyzes Stitch projects and synthesizes a semantic design system into a clear DESIGN.md file that becomes the source of truth for generating new screens. It converts technical assets (HTML, screenshots, Tailwind/CSS values, and project metadata) into descriptive, actionable design guidance. The output emphasizes exact color values, semantic roles, and evocative language so Stitch can reproduce consistent UI language.

How this skill works

The skill retrieves project and screen metadata from the Stitch MCP Server, downloads HTML and screenshots, and parses CSS/Tailwind tokens to extract colors, geometry, typography, and layout patterns. It translates precise technical values (hex codes, radii, shadow values, font stacks) into natural-language rules and component descriptions, then assembles them into a structured DESIGN.md following the prescribed sections. The result documents both what the system is and why choices exist, enabling reliable screen generation and design alignment.

When to use it

• When you need a single source of truth to prompt Stitch for new screens
• Before generating new screens so outputs match existing design language
• When onboarding new designers or engineers to an existing Stitch project
• When translating raw HTML/CSS screenshots into semantic design tokens
• When documenting a project’s visual system for cross-team consistency

Best practices

• Start with the project-level atmosphere before extracting tokens to preserve intent
• Name colors by purpose as well as appearance and include exact hex codes
• Translate technical CSS classes into plain-language geometry (e.g., “pill-shaped”)
• Document shadow/elevation qualitatively and include example CSS values for precision
• Keep terminology consistent across color, shape, and component descriptions

Example use cases

• Generate DESIGN.md for a storefront so new product pages match established branding
• Document a mobile-first app’s visual system to ensure consistent component generation
• Convert a Tailwind-based landing page into semantic tokens for automated screen synthesis
• Create a design source file for cross-functional teams to reference during development