skills.rest
tranhoainam298
tranhoainam298COMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyzes Stitch project screens and generates a semantic DESIGN.md design system document.

1|Updated Jun 27, 2026
Search Tags:#documentation#design system#color palette#mcp#design tokens#tailwind#stitch
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill design-md-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-utilities/skills/design-md
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill design-md-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design teams using Stitch need a consistent, reusable description of their visual language so newly generated screens match existing designs, but manually documenting colors, typography, and component styles from HTML and screenshots is slow and error-prone. ## Core Features & Use Cases - Design Token Extraction: Retrieves screen HTML, screenshots, and project metadata via the Stitch MCP Server to identify colors, typography, spacing, and component patterns. - Semantic Translation: Converts technical CSS and Tailwind values (e.g., rounded-lg, hex codes) into descriptive natural-language design terminology that Stitch prompting understands. - Structured DESIGN.md Output: Produces a standardized Markdown document covering visual theme, color palette with hex codes, typography rules, component stylings, and layout principles. - Use Case: After designing a Home screen in Stitch, run this Skill to generate a DESIGN.md that serves as the source of truth for prompting Stitch to create additional screens in the same style. ## Quick Start Analyze my Stitch project's Home screen and generate a DESIGN.md file documenting its design system.

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.md file from a Stitch project?▼

Provide the Stitch project and screen, then the Skill uses the Stitch MCP Server to fetch the screen's HTML code, screenshot, and metadata. It extracts design tokens and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.

What is a DESIGN.md file used for in Stitch?▼

A DESIGN.md file acts as the source of truth for prompting Stitch to generate new screens that match an existing design language. It describes colors, typography, shapes, and spacing in natural language paired with exact hex codes.

Does this Skill require the Stitch MCP Server?▼

Yes, access to the Stitch MCP Server is a prerequisite. The Skill uses its tools such as list_projects, list_screens, get_screen, and get_project to retrieve screen code, screenshots, and design theme metadata.

Can I use this Skill without a Project ID or Screen ID?▼

Yes, if IDs are not provided, the Skill calls list_projects and list_screens through the Stitch MCP Server to locate the target project and screen by title before fetching metadata.

Why should design tokens be written in natural language instead of Tailwind classes?▼

Stitch interprets design through visual descriptions supported by specific color values, so terms like "subtly rounded corners" work better than "rounded-lg". The Skill keeps exact hex codes in parentheses for precision while using descriptive names.

Related Skills

Explore More Design & Creative Skills→
renpereiradxrenpereiradx

design-md

Analyze Stitch projects and generate DESIGN.md design system documentation.

Community
Intermediate
Nexprove-TeamNexprove-Team
1

design-md

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

Official
Advanced
xLuisAcunaxxLuisAcunax

design-md

Analyze Stitch projects to generate DESIGN.md design system files.

Community
Advanced
auxi-wardrobeauxi-wardrobe
1

ck:stitch

Generate UI designs from text prompts using Google Stitch and export as HTML, Tailwind CSS, and DESIGN.md.

Official
Intermediate