design-md

The design-md skill serves as the primary tool for Design Systems Leads and developers working within the Stitch ecosystem to standardize UI generation. It operates by performing a deep audit of existing technical assets in a Stitch project, translating raw implementation details into a human-readable 'source of truth' stored in a DESIGN.md file. This file functions as the semantic foundation for prompting AI agents, ensuring that every new screen generated aligns perfectly with the established visual language of the application.

• Automated extraction of design tokens, including color palettes (with hex codes and functional roles), typography rules, and spacing strategies.

• Translation of technical CSS and Tailwind class values into intuitive, descriptive design terminology such as 'pill-shaped' or 'whisper-soft diffused shadows'.

• Synthesis of component behavior, including button styles, container elevation, and input field interactions.

• Integration with the Stitch MCP server to enable seamless retrieval of project metadata, screen layouts, HTML/CSS source code, and visual screenshots.

• Alignment with the Stitch Effective Prompting Guide to ensure all output is optimized for high-fidelity UI generation workflows.

• Intended for developers and designers who need to maintain consistency across complex, multi-screen Stitch applications.

• Use this skill when you need to onboard a new AI agent to an existing design aesthetic or when scaling a design system to accommodate new feature requests.

• The skill requires access to a Stitch MCP server and an active Stitch project containing at least one designed screen to function as a reference model.

• The output is a structured Markdown document that maps Project IDs to a semantic framework, covering visual themes, atmosphere, color roles, geometry, depth, and layout principles.

• Users should execute the skill within their project root to maintain alignment between generated DESIGN.md files and the project source code structure.