skills.rest
renpereiradx
renpereiradxCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyze Stitch projects and generate DESIGN.md design system documentation.

Updated Jul 9, 2025
Search Tags:#typography#documentation#design system#color palette#design tokens#stitch#ui generation
One-click install
npx skills add https://github.com/renpereiradx/erp-webapp --skill design-md-renpereiradx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/renpereiradx/erp-webapp/tree/main/.opencode/skills/design-md
Command: npx skills add https://github.com/renpereiradx/erp-webapp --skill design-md-renpereiradx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When generating new screens with Stitch, prompts often produce inconsistent results because the AI lacks a clear reference for the existing design language. This Skill analyzes an existing Stitch project's screens and synthesizes a semantic DESIGN.md file that serves as a source of truth for consistent screen generation. ## Core Features & Use Cases - Stitch Project Analysis: Retrieves screen metadata, HTML code, screenshots, and design themes via the Stitch MCP Server. - Semantic Design Translation: Converts technical values (Tailwind classes, hex codes, border-radius) into descriptive natural language that Stitch interprets effectively. - Structured DESIGN.md Output: Generates a standardized document covering visual atmosphere, color palette with roles, typography rules, component stylings, and layout principles. - Use Case: A designer has a Stitch project with a finished Home page and wants to generate ten more screens that match. This Skill extracts the design language into DESIGN.md so every new screen prompt stays visually consistent. ## Quick Start Analyze my Stitch project's Home screen and generate a DESIGN.md file capturing 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 create a DESIGN.md file from a Stitch project?▼

Use the Stitch MCP Server to retrieve your project's screen metadata, HTML code, and design theme, then analyze these assets to extract colors, typography, and component patterns. The Skill translates technical values into descriptive language and outputs a structured DESIGN.md file.

How do I keep Stitch-generated screens consistent with my existing design?▼

Generate a DESIGN.md file that documents your color palette with hex codes, typography rules, component stylings, and layout principles in descriptive natural language. Reference this file when prompting Stitch so new screens follow the same visual language.

What do I need before using this Skill with Stitch?▼

You need access to the Stitch MCP Server, a Stitch project containing at least one designed screen, and the Stitch Effective Prompting Guide. The Skill uses list_projects, list_screens, get_screen, and get_project calls to gather design data.

Why should design tokens be described in natural language instead of CSS values?▼

Stitch interprets design through visual descriptions supported by specific color values rather than raw utility classes. Describing rounded-full as pill-shaped or pairing Deep Muted Teal-Navy with its hex code produces more accurate and consistent generated screens.

What are the limitations of generating design documentation from a single screen?▼

A single screen may not expose all component states, functional colors, or responsive behaviors in the project. For complete coverage, analyze multiple screens and cross-reference the project-level designTheme metadata from get_project.

Related Skills

Explore More Design & Creative Skills→
google-labs-codegoogle-labs-code
8.2k

design-md

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

Official
Intermediate
Nexprove-TeamNexprove-Team
1

design-md

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

Official
Advanced
coco-decoco-de

flutter-a11y

Analyze Flutter widget trees for accessibility issues and WCAG compliance.

Official
Intermediate
gabelulgabelul
38

stitch-mcp-create-design-system

Create reusable Stitch design systems from extracted CSS theme tokens.

Community
Intermediate