skills.rest
DanielV-94
DanielV-94COMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyze a Stitch project and synthesize a semantic DESIGN.md design system document.

Updated Apr 13, 2026
Search Tags:#design#documentation#semantic#design-system#design-tokens#stitch
One-click install
npx skills add https://github.com/DanielV-94/rg-medium --skill design-md-danielv-94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/DanielV-94/rg-medium --skill design-md-danielv-94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It automates the creation of a comprehensive DESIGN.md file that captures the semantic design system of a Stitch project, eliminating manual documentation effort.

Core Features & Use Cases

  • Project Retrieval: Connects to the Stitch MCP Server to locate projects and screens.
  • Asset Extraction: Downloads HTML/CSS and screenshots, parses design tokens such as colors, typography, and component styles.
  • Design Synthesis: Translates technical values into natural‑language descriptions and assembles them into a structured DESIGN.md document.
  • Use Case: Designers can feed the generated DESIGN.md into Stitch prompts to ensure new screens respect the existing visual language.

Quick Start

Use the design‑md skill with a Stitch project ID to generate a complete DESIGN.md file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I generate design documentation from a Stitch design project?▼

You can generate design documentation automatically by providing a Stitch project ID. The Skill connects to the Stitch MCP Server, extracts design tokens like colors and typography, and assembles a structured DESIGN.md file.

What is a semantic design system document and when do I need one?▼

A semantic design system document translates technical CSS values into natural-language descriptions. You need one when extracting colors, typography, and component styles to ensure new screens respect an existing visual language.

Do I need a Stitch MCP Server to extract design tokens and colors?▼

Yes, extracting design tokens requires access to the Stitch MCP Server. The Skill uses this connection to locate projects, download HTML/CSS assets, and parse component styles for documentation.

How do I use a generated DESIGN.md file for prompt generation?▼

You can feed the generated DESIGN.md file into Stitch prompts to guide new screen generation. This ensures AI respects your existing visual language by referencing extracted semantic design tokens and typography.

Can I document component styles and typography without manual effort?▼

Yes, you can automate component style and typography documentation. The Skill parses downloaded screenshots and HTML/CSS to translate technical values into natural-language descriptions within the DESIGN.md file.

What are the limitations of automating DESIGN.md creation from Stitch?▼

The main limitation is strict dependency on the Stitch MCP Server and web_fetch capabilities. It cannot synthesize design documentation without access to valid Stitch project IDs and readable HTML/CSS assets.

Related Skills

Explore More Design & Creative Skills→
ceslepceslep

design-md

Convert Stitch project design assets into a structured DESIGN.md file.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
v1nizxv1nizx

design-md

Convert CSS and Tailwind values into design tokens in a Markdown file.

Community
Intermediate
vhoangbkvhoangbk

design-md

Analyze Stitch projects and generate DESIGN.md files with semantic design tokens.

Community
Intermediate