skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

Updated Jun 22, 2026
Search Tags:#documentation#design system#mcp#design tokens#tailwind#analyze#stitch
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill design-md-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/aashahin/ai-skills/tree/main/design-md
Command: npx skills add https://github.com/aashahin/ai-skills --skill design-md-aashahin

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. Manually translating HTML, Tailwind classes, and screenshots into descriptive design documentation is slow and inconsistent. ## Core Features & Use Cases - Automated Design Retrieval: Fetches project screens, HTML code, screenshots, and designTheme metadata through the Stitch MCP Server. - Semantic Translation: Converts technical CSS and Tailwind values (hex codes, border-radius, shadows) into descriptive natural design language with exact values preserved. - Structured DESIGN.md Output: Produces a standardized document covering visual theme, color palette and roles, typography rules, component stylings, and layout principles. - Use Case: Point the agent at your Stitch project's Home screen and receive a complete DESIGN.md that serves as the source of truth for prompting Stitch to generate visually consistent new screens. ## Quick Start Ask the agent to analyze your 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 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 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 the visual theme, color palette with hex codes, typography rules, and component stylings in natural design language.

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 metadata, HTML code, and designTheme information.

Can I use this without knowing my Stitch project ID?▼

Yes, the skill can look up projects by calling list_projects and matching by title or URL pattern, then extract the Project ID from the name field. It can similarly discover screen IDs via list_screens.

Why does the output use descriptive names instead of Tailwind classes?▼

Stitch interprets design through visual descriptions rather than technical class names. The skill translates values like rounded-lg into phrases like subtly rounded corners while keeping exact hex codes for precision, aligning with the Stitch Effective Prompting Guide.

Related Skills

Explore More Design & Creative Skills→
christhz666christhz666

design-md

Analyze project screens, HTML code, and design metadata to generate a DESIGN.md file.

Community
Advanced
Nexprove-TeamNexprove-Team
1

design-md

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

Official
Advanced
gabelulgabelul
38

stitch-design-md

Generate a DESIGN.md design system document from existing Stitch project screens.

Community
Advanced
Dragoon0xDragoon0x
4

sync

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

Community
Intermediate