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

Ready to run

npx skills add https://github.com/rattamnoon/our-third-story --skill design-md-rattamnoon

💬 Prompt for ChatGPT / Claude Chat▼

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.