design-md

Extract design tokens from Stitch projects into a DESIGN.md file.

Updated Jan 24, 2026

Search Tags:#ui-design #design-system #prompting #stitch #color-typography #token-extraction #design-md

Ready to run

npx skills add https://github.com/seflless/dot-agents --skill design-md-seflless

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/seflless/dot-agents/tree/main/skills/design-md
Command: npx skills add https://github.com/seflless/dot-agents --skill design-md-seflless

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyze Stitch projects to synthesize a semantic design system into DESIGN.md files, providing a single source of truth for prompting Stitch to generate screens that align with an existing design language.

Core Features & Use Cases

Analyze Stitch project metadata and assets to extract color tokens, typography rules, spacing, and component patterns.
Synthesize a DESIGN.md that serves as the ground truth for prompting Stitch to generate new screens consistently.
Provide design-system notes and prompts to guide Stitch in producing UI that matches the project's language.

Quick Start

Generate a DESIGN.md by analyzing the provided Stitch project and extracting color, typography, and component tokens.

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 create a design system?▼

To extract design tokens from a Stitch project, this Skill fetches project metadata and parses assets to generate a DESIGN.md containing precise hex color codes, typography rules, spacing, and component patterns.

What is a DESIGN.md file used for in Stitch UI generation?▼

A DESIGN.md file acts as the single source of truth for prompting Stitch to generate new screens. It ensures consistent UI generation by providing layout guidelines and semantic design tokens extracted from existing project assets.

Can I use design-md to analyze Stitch projects with multiple screens?▼

Yes, you can analyze Stitch projects that have at least one screen and accompanying assets. The Skill extracts color tokens, typography rules, spacing, and component patterns from these screens to build a cohesive design system.

How do I keep new Stitch screens visually consistent with my existing design language?▼

To keep new Stitch screens consistent, you generate a DESIGN.md from your current project. This document provides design-system notes and precise layout guidelines that guide Stitch to match your established visual language.

Does the design token extraction process include spacing and component patterns?▼

Yes, the design token extraction process includes spacing and component patterns. It also extracts color tokens, typography rules, and radii values from the Stitch MCP server metadata to ensure comprehensive design system documentation.

Why do I need a design system source of truth for prompting Stitch?▼

You need a design system source of truth to prevent visual drift when generating new screens. By synthesizing a DESIGN.md from extracted design tokens, you provide Stitch with exact rules to match your project's design language consistently.