Engineering
design-md avatar

design-md

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files to serve as a source of truth for AI-driven UI generation.

Introduction

The design-md skill acts as an expert Design Systems Lead for users working within the Stitch ecosystem. Its primary purpose is to inspect existing Stitch projects—including screens, HTML structures, and design themes—and distill them into a structured, semantic DESIGN.md documentation file. By capturing the 'source of truth' for a project's design language, this skill enables agents to generate new screens that maintain high levels of aesthetic and functional consistency with established design tokens. This process is essential for teams looking to scale UI development without drifting from their core design identity.

  • Automatically retrieves screen metadata, project themes, and layout principles via the Stitch MCP Server.

  • Translates technical implementation details like Tailwind CSS classes, hex color codes, and border radii into descriptive, human-readable design terminology.

  • Structures documentation to cover essential areas: Visual Atmosphere, Color Palette with Functional Roles, Typography Rules, Component Stylings (Buttons, Cards, Forms), and Layout Principles.

  • Enhances prompting efficiency by providing a standardized reference document that AI models can use to better understand and replicate the specific 'vibe' of a design system.

  • Facilitates deep analysis of elevation, depth, and whitespace strategies to ensure comprehensive system documentation.

  • Before execution, ensure access to the Stitch MCP Server and that the target Stitch project contains at least one representative screen.

  • The generated DESIGN.md file is designed to be stored in the root of the project to act as an immediate reference for agents using the Stitch-design or enhance-prompt skills.

  • When analyzing, the skill prioritizes the extraction of natural language adjectives for atmospheric descriptions, which are critical for Stitch's interpretation of design language.

  • Useful for project hand-offs, onboarding new developers, and maintaining style consistency during rapid, agent-led prototyping.

  • Constraints: The quality of the DESIGN.md output is directly correlated to the technical maturity and existing design metadata within the Stitch project assets.

Repository Stats

Stars
5,027
Forks
605
Open Issues
27
Language
TypeScript
Default Branch
main
Sync Status
Idle
Last Synced
Apr 29, 2026, 05:45 AM
View on GitHub