skills.rest
aBgAmeuR
aBgAmeuRCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

7|1|Updated Mar 29, 2024
Search Tags:#documentation#design system#mcp#design tokens#tailwind#generate#stitch
One-click install
npx skills add https://github.com/aBgAmeuR/harmony --skill design-md-abgameur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/aBgAmeuR/harmony/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/aBgAmeuR/harmony --skill design-md-abgameur

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design teams struggle to keep AI-generated screens visually consistent with an existing product's design language. This Skill converts a Stitch project's screens, HTML code, and theme metadata into a structured DESIGN.md file that acts as a source of truth for prompting Stitch to generate on-brand new screens. ## Core Features & Use Cases - Design Token Extraction: Retrieves screens via the Stitch MCP Server and extracts colors, typography, spacing, border-radius, and shadow patterns from HTML/Tailwind code. - Semantic Translation: Converts technical CSS values into descriptive design language (e.g., "rounded-full" becomes "pill-shaped") paired with exact hex codes. - Structured DESIGN.md Output: Generates a Markdown document covering visual theme, color palette roles, typography rules, component stylings, and layout principles. - Use Case: After designing a Home screen in Stitch, run this Skill to produce a DESIGN.md, then reference it in every subsequent prompt so new screens match the established design system. ## 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, and the Skill 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 DESIGN.md file used for in Stitch?▼

A DESIGN.md file serves as the source of truth when prompting Stitch to generate new screens. It documents the design system in descriptive language with exact hex codes so generated screens align with the existing 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 to list projects, list screens, fetch screen metadata, and download HTML code and screenshots for analysis.

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

Yes, the Skill can look them up. It calls list_projects and list_screens through the Stitch MCP Server, letting you identify the target project and screen by title before fetching metadata.

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 values like rounded-full into pill-shaped, paired with hex codes, produces prompts that generate more consistent screens.

Related Skills

Explore More Design & Creative Skills→
zester4zester4
2

design-md

Analyzes Stitch project screens and generates semantic 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
KaziNizamulKaziNizamul

design-md

Extract design tokens from Stitch screens into a semantic DESIGN.md.

Community
Advanced
Dragoon0xDragoon0x
4

sync

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

Community
Intermediate