design-md

Analyze Stitch project assets to generate a semantic DESIGN.md reference.

Updated Apr 5, 2026

Search Tags:#tokens #design-system #design-docs #color-palette #stitch #design-analysis #design-md

Ready to run

npx skills add https://github.com/phamhuutri108/script-lining --skill design-md-phamhuutri108

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/phamhuutri108/script-lining/tree/main/stitch-skills-main/design-md
Command: npx skills add https://github.com/phamhuutri108/script-lining --skill design-md-phamhuutri108

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to convert Stitch project assets into a single, machine-friendly DESIGN.md that serves as the design language source of truth. This gap slows consistent screen generation and makes it hard to communicate tokens, typography, and component patterns across teams.

Core Features & Use Cases

Retrieve and analyze Stitch project assets (screens, HTML/CSS, and design metadata) to extract design tokens.
Translate token values into natural, descriptive design language that is easy for designers and engineers to apply.
Synthesize a DESIGN.md file that acts as the single source of truth to prompt Stitch for new screens.
Leverage MCP server metadata and on-demand assets to ensure fidelity with the project design system.

Quick Start

Provide a Stitch project and run the DESIGN.md skill to generate a semantic DESIGN.md that codifies your design language.

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 reference from a Stitch project?▼

To generate a design system reference from a Stitch project, use the design-md skill to analyze your screens, HTML/CSS, and metadata, automatically extracting design tokens into a structured DESIGN.md file.

What is a semantic DESIGN.md file used for in design systems?▼

A semantic DESIGN.md file translates design tokens, color themes, typography, and spacing into natural design language, serving as a single source of truth to consistently prompt Stitch for new screen generation.

Do I need the Stitch MCP Server to extract color palettes and typography tokens?▼

Yes, extracting color palettes and typography tokens requires Stitch MCP Server access and web_fetch to retrieve project assets, ensuring the generated design documentation maintains high fidelity with the original design system.

What's the best way to codify design tokens for engineering and design teams?▼

The best way to codify design tokens is to synthesize them into a machine-friendly DESIGN.md file, translating raw token values into descriptive design language that both designers and engineers can easily apply across workflows.

Can I analyze component patterns and spacing across multiple Stitch screens?▼

Yes, you can analyze component patterns and spacing across applicable Stitch screens and outputs, leveraging MCP server metadata to ensure comprehensive coverage and accurate extraction of your project's design system.