skills.rest
phamhuutri108
phamhuutri108COMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
idemeumidemeum

vpn-repair

Diagnose and repair macOS VPN connectivity and routing failures.

Official
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
gouravsingh311gouravsingh311

design-md

Analyze Stitch project assets and codify design tokens into DESIGN.md files.

Community
Intermediate