skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

design-md

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

1|Updated Aug 11, 2026
Search Tags:#documentation#design system#MCP#design tokens#tailwind#design.md#Stitch
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill design-md-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/design-md
Command: npx skills add https://github.com/Chia1104/agent-air --skill design-md-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers using Stitch need a consistent source of truth describing an existing project's visual language so newly generated screens match the established design system, but manually documenting colors, typography, and component styles from HTML and screenshots is slow and error-prone. ## Core Features & Use Cases - Automated Design Token Extraction: Retrieves screens, HTML code, screenshots, and designTheme metadata via the Stitch MCP Server, then identifies colors, typography, spacing, and component patterns. - Semantic Translation: Converts technical CSS and Tailwind values (e.g., rounded-full, hex codes) into descriptive natural design language aligned with the Stitch Effective Prompting Guide. - Structured DESIGN.md Output: Generates a Markdown document covering visual theme, color palette with hex codes and roles, typography rules, component stylings, and layout principles. - Use Case: Point the agent at your Furniture Collection project's Home screen and receive a complete DESIGN.md that you can reference when prompting Stitch to generate new, visually consistent screens. ## Quick Start Ask the agent to analyze your Stitch project's Home screen and generate a comprehensive 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 to the agent, which uses the Stitch MCP Server to fetch screen metadata, HTML code, and screenshots. It then extracts design tokens and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.

What is a semantic design system in DESIGN.md?▼

A semantic design system describes visual styles in natural language paired with exact values, such as "Deep Muted Teal-Navy (#294056)" instead of raw Tailwind classes. This format helps Stitch interpret design intent when generating new screens.

Does this skill require the Stitch MCP Server?▼

Yes, access to the Stitch MCP Server is a prerequisite. The skill uses its tools to list projects, list screens, fetch screen objects, and retrieve project designTheme metadata before analysis can begin.

Can I use DESIGN.md to keep new Stitch screens consistent?▼

Yes, the generated DESIGN.md acts as a source of truth for prompting Stitch. It includes descriptive color names with hex codes, component shape descriptions, and spacing language that you reference when requesting new screen generation.

What information does the skill extract from a Stitch screen?▼

It extracts the screenshot, full HTML/CSS source, screen dimensions, device type, and the project's designTheme including color mode, fonts, roundness, and custom colors. These are parsed for Tailwind classes and component patterns.

Related Skills

Explore More Design & Creative Skills→
tranhoainam298tranhoainam298
1

design-md

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

Community
Intermediate
google-labs-codegoogle-labs-code
8.0k

design-md

Analyze Stitch project assets to generate a DESIGN.md design system document.

Official
Advanced
datguynabeeldatguynabeel

design-md

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

Community
Intermediate
AradotsoAradotso
3

figma-mcp-bridge

Stream live Figma document data to AI tools via MCP.

Official
Intermediate