skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Sep 3, 2026
Search Tags:#design system#color palette#mcp server#prompting#design.md#stitch#ui analysis
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill design-md-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/stitch-design-md
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill design-md-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When prompting Stitch to generate new screens, results often drift from the existing visual language because prompts lack precise design context. This Skill analyzes an existing Stitch project's screens and synthesizes a DESIGN.md file that acts as a source of truth for consistent, on-brand screen generation. ## Core Features & Use Cases - Stitch Project Analysis: Retrieves project metadata, screen objects, HTML code, and screenshots through the Stitch MCP Server tools. - Semantic Design Translation: Converts technical values like Tailwind classes, hex codes, and border-radius into descriptive natural language that Stitch prompting understands. - Structured DESIGN.md Output: Produces a Markdown document covering visual theme, color palette with roles, typography rules, component stylings, and layout principles. - Use Case: A designer has a Stitch project with a polished Home screen and wants to generate ten more screens in the same style. Run this Skill to produce a DESIGN.md capturing the exact palette, shapes, and atmosphere, then reference it in every subsequent Stitch prompt. ## 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 create a DESIGN.md file from a Stitch project?▼

Connect to the Stitch MCP Server, identify your project and screen IDs using list_projects and list_screens, then fetch the screen's HTML and screenshot. The Skill analyzes these assets and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.

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

A DESIGN.md file serves as a source of truth when prompting Stitch to generate new screens. It describes the design system in natural language with exact hex codes, so generated screens align with the existing visual language.

Does this Skill require the Stitch MCP Server?▼

Yes, 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 metadata, HTML code, screenshots, and design theme information.

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

Call list_projects with the filter view=owned to list your projects and extract the numeric ID from the name field. Then call list_screens with that project ID to find the target screen's numeric ID from its name field.

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

Stitch interprets design through visual descriptions supported by specific color values. Translating rounded-lg into subtly rounded corners and pairing descriptive color names with hex codes produces more accurate and consistent generated screens.

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
Nexprove-TeamNexprove-Team
1

design-md

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

Official
Advanced
datguynabeeldatguynabeel

design-md

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

Community
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate