design-md

Extract screen design data from Stitch MCP projects into a semantic DESIGN.md.

Updated Mar 29, 2025
One-click install
npx skills add https://github.com/ketzal88/gym-counter --skill design-md-ketzal88
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/ketzal88/gym-counter/tree/main/.claude/skills/design-md
Command: npx skills add https://github.com/ketzal88/gym-counter --skill design-md-ketzal88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files to provide a single source of truth for design prompts and workflows.

Core Features & Use Cases

  • Auto-extract screen metadata, color tokens, typography, and layout constraints from Stitch projects and convert them into a cohesive DESIGN.md.
  • Generate design-system documentation that can be reused to craft new screens consistent with existing design language.
  • Use cases include preparing design handoffs, feeding AI design workers, and maintaining a centralized reference for design tokens across projects.

Quick Start

Generate DESIGN.md for Stitch project 5165520689568295033 by analyzing its screens and assets to establish the design system as the single source of truth.

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 Stitch MCP project data?

A semantic design system acts as a centralized source of truth that defines atmosphere, color tokens, typography, and component stylings. It supports prompt-driven screen generation and maintains cross-project design consistency by standardizing design tokens.

What is the best way to document design tokens for AI screen generation?

The best way to document design tokens for AI screen generation is synthesizing them into a DESIGN.md file. This standardized document captures semantic tokens, layout principles, and component stylings to feed AI design workers and ensure consistent handoffs.

Can I extract color tokens and typography from existing Stitch projects?

Yes, you can extract color tokens, typography, and layout constraints from existing Stitch projects. The extracted screen metadata is then converted into a cohesive DESIGN.md to establish a reusable design system reference for future screens.

Does the design-md Skill work without external dependencies?

Yes, the design-md Skill works without external dependencies. It directly interfaces with Stitch MCP projects to analyze screens and assets, requiring only a valid project ID to establish the design system as the single source of truth.

When do I need to create a semantic design system document?

You need to create a semantic design system document when preparing design handoffs, feeding AI design workers, or maintaining a centralized reference for design tokens. It ensures new screens remain consistent with the existing visual design language.