design-md

Generate a DESIGN.md file documenting a Stitch project's visual language and component conventions.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/Nguyenvanle/ag-wander-ai --skill design-md-nguyenvanle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Nguyenvanle/ag-wander-ai/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/Nguyenvanle/ag-wander-ai --skill design-md-nguyenvanle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Stitch project assets into formal, machine-actionable design documentation to ensure consistency across screens.

Core Features & Use Cases

  • Retrieve project color palettes, typography, and component patterns and synthesize a DESIGN.md file that serves as the single source of truth.
  • Produce designer-friendly narrative guidelines that accompany tokens, enabling new screen generation that aligns with the original design language.
  • Use cases include documenting color roles, typography hierarchy, spacing, and UI patterns for reuse in future Stitch prompts.

Quick Start

Analyze a Stitch project and generate a DESIGN.md that documents its color, typography, and component rules.

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 documentation file from Stitch project assets?▼

To generate design documentation, you synthesize Stitch project screen assets, color palettes, and typography data into a formal DESIGN.md file. This creates a single source of truth codifying your visual language and component conventions.

What is a DESIGN.md file used for in a design system?▼

A DESIGN.md file serves as a machine-actionable specification that documents color roles, typography hierarchy, and UI patterns. It provides designer-friendly narrative guidelines ensuring consistency when generating future screens in Stitch.

Can I document color hex codes and typography hierarchy for Stitch UI patterns?▼

Yes, you can document color hex codes and typography hierarchy by applying the skill to available screen assets and color themes. It enforces a structured format with accurate tokens and natural-language explanations.

Do I need existing screen assets to create design tokens for a Stitch project?▼

Yes, you need available Stitch project screen assets, color themes, and typography data. The skill analyzes these existing UI patterns to synthesize a repeatable, designer-friendly specification for future screen generation.

What's the best way to maintain design consistency across multiple Stitch screens?▼

The best way to maintain design consistency is codifying your project's visual language into a DESIGN.md guide. This enforces a structured format with accurate design tokens, leveraging Stitch best practices for future prompts.

Why does my Stitch project need a narrative design specification instead of just tokens?▼

A narrative specification is needed because it accompanies tokens with natural-language explanations of component conventions. This designer-friendly context ensures new screen generation aligns with the original design language.