skills.rest
rattamnoon
rattamnoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Extract design tokens from a Stitch project and generate a DESIGN.md.

Updated Apr 18, 2026
Search Tags:#design-system#design-tokens#stitch#design-synthesis#screen-design#token-extraction#semantic-design
One-click install
npx skills add https://github.com/rattamnoon/our-third-story --skill design-md-rattamnoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/rattamnoon/our-third-story/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/rattamnoon/our-third-story --skill design-md-rattamnoon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Stitch project design data is scattered across screens and assets, making it hard to maintain a consistent design language. This skill outputs a DESIGN.md that semantically captures tokens, colors, typography, and component conventions to guide future screen generation.

Core Features & Use Cases

  • Retrieve project metadata and screen assets from Stitch MCP Server to inform a cohesive DESIGN.md.
  • Synthesize a semantic design system that documents colors, typography, spacing, and components for reuse.
  • Serve as a design-language source of truth to prompt Stitch-generated screens that align with an existing UI vocabulary.

Quick Start

Provide a Stitch project URL and trigger the design-md skill to generate DESIGN.md.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from a Stitch project?▼

To extract design tokens from a Stitch project, retrieve project and screen metadata via the Stitch MCP Server and parse design references to synthesize color, typography, and spacing tokens into a structured file.

What is a semantic DESIGN.md for screen generation?▼

A semantic DESIGN.md is a structured document encoding a design system, capturing color tokens, typography guidelines, spacing rules, and component patterns to serve as a source of truth for generating UI screens.

How do I maintain a consistent design language across multiple Stitch screens?▼

Maintain a consistent design language across Stitch screens by generating a DESIGN.md that captures your design vocabulary, then using this document to prompt Stitch for future screen generation.

Can I generate a design system document from existing UI assets?▼

Yes, you can generate a design system document by retrieving existing project metadata and screen assets from the Stitch MCP Server, parsing design references, and synthesizing them into a complete DESIGN.md.

Does generating a DESIGN.md require manual token extraction from Stitch screens?▼

No, generating a DESIGN.md does not require manual token extraction; the process automatically retrieves Stitch project assets, parses design references, and synthesizes semantic tokens and component conventions.

How do I use a DESIGN.md to prompt Stitch for new screen designs?▼

Use the generated DESIGN.md as a semantic prompt input for Stitch to ensure newly generated screens align with your existing color tokens, typography guidelines, spacing rules, and component patterns.

Related Skills

Explore More Design & Creative Skills→
npc-chrisnpc-chris
1

design-md

Analyze Stitch project screens and metadata to generate a semantic DESIGN.md file.

Community
Advanced
RoyincogRoyincog

design-md

Analyze Stitch projects and generate a semantic DESIGN.md design-system document.

Community
Advanced
jh941213jh941213
125

stitch-design-md

Analyzes a Stitch project and generates a semantic DESIGN.md with color palettes, typography, and components.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced