skills.rest
DagimAlemayehuu
DagimAlemayehuuCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Jul 19, 2026
Search Tags:#documentation#design system#design tokens#generate#mcp server#design.md#stitch
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill design-md-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/design/design-md
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill design-md-dagimalemayehuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating an existing Stitch project's visual design into reusable, prompt-friendly documentation is manual and error-prone, making it hard to generate new screens that match the established design language. ## Core Features & Use Cases - 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/Tailwind values (e.g., rounded-full, hex codes) into descriptive natural language aligned with the Stitch Effective Prompting Guide. - Structured DESIGN.md Output: Produces a standardized document covering visual theme, color palette with hex codes and roles, typography rules, component stylings, and layout principles. - Use Case: After designing a Home screen in a Stitch project, generate a DESIGN.md so every subsequent screen generation prompt stays visually consistent with the original design system. ## Quick Start Use the design-md skill to 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 tools are needed to analyze Stitch screens with this skill?▼

You need access to the Stitch MCP Server for project and screen retrieval, plus web_fetch or read_url_content to download HTML and screenshot assets. The skill discovers the MCP tool prefix via list_tools before making calls.

Can I use this skill without a Stitch project ID?▼

Yes. The skill can call list_projects with a view=owned filter to find projects by title or URL, then list_screens to locate the target screen. Providing the numeric Project ID and Screen ID directly skips these lookup steps.

Why should DESIGN.md use descriptive names instead of Tailwind classes?▼

Stitch interprets design through visual descriptions supported by specific color values, not utility class names. Writing 'subtly rounded corners' instead of 'rounded-lg' produces more accurate screen generation aligned with the Stitch Effective Prompting Guide.

What are the limitations of DESIGN.md generation from a single screen?▼

Analysis is based on the screens you retrieve, so a single screen may not capture all component states or patterns in the project. For broader coverage, fetch multiple screens and project-level designTheme metadata before synthesizing the document.

Related Skills

Explore More Design & Creative Skills→
aashahinaashahin

design-md

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

Community
Intermediate
NguyenvanleNguyenvanle

design-md

Generate a DESIGN.md file documenting a Stitch project's visual language and component conventions.

Community
Advanced
SecuVortexSecuVortex

design-md

Generate a DESIGN.md documenting semantic design tokens from Stitch project assets.

Community
Advanced
bmad-code-orgbmad-code-org
212

gds-create-game-brief

Create, update, or validate a game brief with audit trails for a GDD.

Official
Advanced