skills.rest
joySUSY
joySUSYCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Generates a DESIGN.md design system file by analyzing Stitch project screens via the Stitch MCP Server.

Updated Feb 21, 2026
Search Tags:#documentation#design system#mcp#design tokens#stitch#design-md#ui analysis
One-click install
npx skills add https://github.com/joySUSY/violet-plugin-place --skill design-md-joysusy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/joySUSY/violet-plugin-place/tree/main/plugins/documentation-guidelines/modules/design-md
Command: npx skills add https://github.com/joySUSY/violet-plugin-place --skill design-md-joysusy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Documenting an existing UI's design system manually is slow and inconsistent, making it hard to generate new screens that match the established visual language. This Skill automates the extraction of design tokens from Stitch projects and synthesizes them into a reusable DESIGN.md file. ## Core Features & Use Cases - Automated Retrieval: Fetches project metadata, screen HTML, and screenshots through the Stitch MCP Server using project and screen IDs. - Semantic Token Translation: Converts technical CSS and Tailwind values (hex codes, border-radius, shadows) into descriptive natural design language with exact values preserved. - Structured Output: Produces a DESIGN.md covering visual theme, color palette and roles, typography rules, component stylings, and layout principles. - Use Case: Analyze the Home screen of a Furniture Collection Stitch project and generate a DESIGN.md so future Stitch prompts produce screens aligned with the existing design system. ## Quick Start Ask the agent to analyze your Stitch project's Home screen and generate a comprehensive DESIGN.md 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 from a Stitch project?▼

Provide the Stitch project title or URL and target screen, then the skill uses the Stitch MCP Server to fetch screen metadata and HTML. It extracts design tokens and writes a structured DESIGN.md covering theme, colors, typography, components, and layout.

What tools are required to analyze Stitch screens?▼

The skill requires access to the Stitch MCP Server tools (list_projects, list_screens, get_screen, get_project) plus web_fetch or read_url_content to download the screen's HTML code and screenshot from their download URLs.

How does the skill find project and screen IDs?▼

It calls list_projects with a view=owned filter to locate the project by title, then list_screens with the numeric project ID to find the target screen. IDs are extracted from the name fields of the MCP responses.

Can I use DESIGN.md output for prompting new Stitch screens?▼

Yes, the DESIGN.md is designed as a source of truth for Stitch prompting. It uses descriptive design language with exact hex codes, following the Stitch Effective Prompting Guide so generated screens match the existing design language.

What happens if project metadata is missing?▼

The skill marks inferred values clearly rather than fabricating metadata, and produces a short assumptions or unknowns list when required data is missing. It does not proceed without required context IDs when the workflow depends on them.

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
datguynabeeldatguynabeel

design-md

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

Community
Intermediate
JayJihyunKimJayJihyunKim
1

design-md

Synthesize a semantic DESIGN.md from Stitch project data.

Community
Advanced
loongclaw-ailoongclaw-ai
641

design-md

Analyze Stitch project screens and assets to generate DESIGN.md documentation.

Official
Advanced