skills.rest
huangzida
huangzidaCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Generate a DESIGN.md semantic design document from Stitch project data.

2|1|Updated Mar 26, 2026
Search Tags:#tokens#design-system#ui-patterns#stitch#design-synthesis#design-analysis
One-click install
npx skills add https://github.com/huangzida/skills --skill design-md-huangzida
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/huangzida/skills/tree/main/design-md
Command: npx skills add https://github.com/huangzida/skills --skill design-md-huangzida

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Synthesizes a DESIGN.md semantic design document from Stitch project data, enabling consistent, prompt-ready design documentation.

Core Features & Use Cases

  • Auto-generation: Converts HTML/CSS, color themes, typography, and design tokens into a human-readable DESIGN.md.
  • Design-token Translation: Extracts tokens and describes them in natural language for design guidance.
  • Use Case: Given a Stitch project, produce a DESIGN.md that serves as the single source of truth for prompting screen generation.

Quick Start

Generate a DESIGN.md for a Stitch project by providing the project metadata and screen assets to Stitch and requesting a semantic design document.

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 Stitch project data?▼

To generate a design system document from Stitch project data, provide the project metadata and screen assets to extract colors, typography, spacing, tokens, and layout patterns, translating them into a human-readable DESIGN.md file.

Can I extract design tokens from HTML and CSS for semantic documentation?▼

Yes, design tokens are extracted directly from HTML and CSS and translated into natural language, providing descriptive design guidance within the generated DESIGN.md semantic document.

What is the best way to document UI patterns across multiple screens for prompting?▼

The best way to document UI patterns across multiple screens for prompting is synthesizing a DESIGN.md file that serves as the single source of truth, ensuring consistent design system documentation across teams.

Does Stitch design synthesis work with projects containing only color themes and typography?▼

Stitch design synthesis works with projects containing color themes and typography, but it is fully applicable to Stitch projects with multiple screens and design tokens for comprehensive design analysis.

How do I translate design tokens into natural language for design guidance?▼

Design tokens are translated into natural language by extracting semantic values from HTML/CSS and project metadata, then describing them in a human-readable format within the DESIGN.md document.

Why do I need a semantic design document for screen generation?▼

A semantic design document is needed for screen generation because it acts as a prompt-ready single source of truth, enabling consistent application of colors, typography, and layout patterns across teams.

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
JayJihyunKimJayJihyunKim
1

stitch-design

Automates Stitch MCP-driven UI design workflows and generates screens from prompts.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
pastjeanpastjean
8

design-system-analyzer

Extract design tokens and CSS snippets from UI screenshots.

Community
Intermediate