skills.rest
Royincog
RoyincogCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Royincog/cpedia --skill design-md-royincog
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Nexprove-TeamNexprove-Team
1

design-md

Generate a DESIGN.md synthesizing semantic design tokens from Stitch projects.

Official
Advanced
cassioalexandrecassioalexandre
2

stitch-design

Convert vague UI intent into Stitch screens and design systems.

Community
Advanced
Chris-MaskeyChris-Maskey

design-md

Analyze Stitch project screens and synthesize a semantic DESIGN.md file.

Community
Advanced
gabelulgabelul
38

stitch-mcp-get-project

Retrieve structured metadata and design system tokens from Stitch projects.

Community
Intermediate