design-md

Analyze Stitch projects and generate a semantic DESIGN.md design-system document.

Updated Apr 18, 2026

Search Tags:#design-system #md-generation #stitch #design-analysis #design-md #semantic-design

Ready to run

npx skills add https://github.com/Royincog/cpedia --skill design-md-royincog

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Royincog/cpedia/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/Royincog/cpedia --skill design-md-royincog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Synthesizes Stitch project assets into a standardized DESIGN.md design-system document to serve as a reliable source of truth for prompting screen generation.

Core Features & Use Cases

Retrieval and analysis of Stitch MCP server data (screens, HTML code, and design metadata).
Extraction and translation of design tokens (colors, typography, spacing, and component patterns) into human-friendly language.
Output of a structured DESIGN.md that guides Stitch in generating consistent screens and UI systems.

Quick Start

Analyze the provided Stitch project and generate a DESIGN.md that captures the design language for new screens.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a design system document from a Stitch project?▼

Extract design tokens from Stitch MCP by retrieving screen metadata and HTML code, parsing assets to identify colors, typography, spacing, and component patterns, then translating them into a human-friendly DESIGN.md document.

What is a DESIGN.md file used for in screen generation?▼

A DESIGN.md file is used as a standardized source of truth to guide Stitch in generating consistent new screens and UI systems by capturing the extracted design language and component patterns.

Do I need Stitch MCP access to extract design tokens?▼

Yes, Stitch MCP access is required to retrieve screen metadata and parse design assets, which is necessary for extracting colors, typography, spacing, and component patterns to generate the DESIGN.md document.

How do I extract colors and typography from Stitch screens?▼

Extract colors and typography from Stitch screens by retrieving screen metadata and HTML code via Stitch MCP, parsing the assets to identify visual patterns, and translating them into human-friendly design tokens.

Can I use a generated DESIGN.md to guide new UI screen creation?▼

Yes, you can use the generated DESIGN.md to guide new UI screen creation, as it captures the semantic design language and structured component patterns to ensure consistency across generated Stitch screens.

What is the best way to document semantic design patterns for UI consistency?▼

The best way to document semantic design patterns is to synthesize Stitch project assets into a standardized DESIGN.md file, translating design tokens into human-friendly language to ensure UI consistency.