skills.rest
gonzoblasco
gonzoblascoCOMMUNITY
Explore all skills by this author →
𝕏@gonzoblascoGitHub

design-md

Analyzes Stitch projects and generates DESIGN.md files documenting semantic design systems.

1|Updated Jul 20, 2026
Search Tags:#documentation#design system#color palette#ui design#mcp server#design.md#stitch
One-click install
npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill design-md-gonzoblasco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/gonzoblasco/ai-developer-stack/tree/main/tools-automation/design-md
Command: npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill design-md-gonzoblasco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When prompting Stitch to generate new screens, designs often drift from the existing visual language because there is no documented source of truth. This Skill analyzes an existing Stitch project and synthesizes its design system into a DESIGN.md file that keeps future generated screens visually consistent. ## Core Features & Use Cases - Project Retrieval via Stitch MCP: Discovers projects and screens through the Stitch MCP Server, fetching screenshots, HTML code, and design theme metadata. - Design Token Translation: Converts technical values like hex codes, border-radius, and shadows into descriptive natural language (e.g., "Deep Muted Teal-Navy (#294056)", "Pill-shaped"). - Structured DESIGN.md Output: Produces a Markdown document covering visual theme, color palette and roles, typography rules, component stylings, and layout principles. - Use Case: You have a Stitch project with a polished Home page and want to generate ten more screens that match. Run this Skill to produce a DESIGN.md, then reference it in every subsequent Stitch prompt for consistent results. ## Quick Start Ask the AI to analyze your Stitch project using the Stitch MCP Server and generate a DESIGN.md file capturing 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 create a DESIGN.md file from a Stitch project?▼

Use the Stitch MCP Server to retrieve your project's screen metadata, including the screenshot, HTML code, and designTheme. Then analyze the colors, typography, shapes, and shadows, translating them into descriptive natural language organized in the DESIGN.md structure.

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

A DESIGN.md file acts as the source of truth when prompting Stitch to generate new screens. It describes the visual theme, color palette with hex codes, typography rules, component stylings, and layout principles so generated screens match the existing design language.

Does this Skill require the Stitch MCP Server?▼

Yes, the Stitch MCP Server is a prerequisite. It provides the tools to list projects, list screens, fetch screen metadata, and download HTML code and screenshots needed for the design analysis.

How do I find my Stitch project ID and screen ID?▼

Call list_projects with filter "view=owned" to find your project and extract the ID from its name field. Then call list_screens with that project ID to locate the target screen and extract its screen ID.

Why should design tokens be described in natural language instead of raw CSS values?▼

Stitch interprets design through visual descriptions supported by specific color values. Pairing descriptive names like "Pill-shaped" or "Whisper-soft diffused shadows" with exact hex codes produces more consistent generated screens than raw CSS alone.

Related Skills

Explore More Design & Creative Skills→
google-labs-codegoogle-labs-code
8.2k

design-md

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

Official
Intermediate
datguynabeeldatguynabeel

design-md

Extract design tokens from Stitch projects and generate DESIGN.md files.

Community
Intermediate
Spectaculous-CodeSpectaculous-Code

docs-updater

Update API references, architecture diagrams, and README files from code modifications.

Official
Advanced
khulnasoft-botkhulnasoft-bot

design-md

Analyze Stitch project screens and generate semantic DESIGN.md design system documentation.

Community
Intermediate