skills.rest
zajca
zajcaCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Extract design tokens from Stitch projects and generate DESIGN.md files.

2|1|Updated Mar 12, 2026
Search Tags:#documentation#markdown#design system#design tokens#stitch#ui generation
One-click install
npx skills add https://github.com/zajca/zfaktury --skill design-md-zajca
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/zajca/zfaktury/tree/main/skills/design-md
Command: npx skills add https://github.com/zajca/zfaktury --skill design-md-zajca

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of DESIGN.md files, translating complex technical design assets from Stitch projects into human-readable documentation that guides AI in generating consistent UIs.

Core Features & Use Cases

  • Design Token Extraction: Identifies and extracts colors, typography, spacing, and component styles.
  • Semantic Translation: Converts technical CSS/Tailwind values into descriptive design language.
  • DESIGN.md Generation: Synthesizes extracted information into a structured Markdown file.
  • Use Case: Documenting the design system for a new mobile app's onboarding screens to ensure all future screens maintain visual consistency.

Quick Start

Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I generate design system documentation from a Stitch project?▼

To generate design system documentation from a Stitch project, the Skill analyzes your project screens and HTML code to extract design tokens like colors, typography, and spacing, compiling them into a structured DESIGN.md file.

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

A DESIGN.md file is used to guide AI in generating consistent UIs by translating complex technical CSS and Tailwind values from your Stitch project into human-readable, descriptive design language.

How do I convert technical Tailwind values into semantic design tokens?▼

You can convert technical Tailwind values into semantic design tokens by having the Skill analyze your project's HTML code and translate those technical CSS values into natural design language for your documentation.

Can I document design tokens for mobile app onboarding screens to ensure visual consistency?▼

Yes, you can document design tokens for mobile app onboarding screens to ensure visual consistency by analyzing the Stitch project screens and synthesizing the extracted styles into a comprehensive DESIGN.md file.

Does the generated design documentation include component styles and spacing?▼

Yes, the generated design documentation includes component styles and spacing, as the Skill identifies and extracts colors, typography, spacing, and component styles directly from your Stitch project's screens and code.

Related Skills

Explore More Design & Creative Skills→
braswelljrbraswelljr
8

design-md

Generate DESIGN.md documentation from Stitch project design assets.

Community
Intermediate
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
terzigoluterzigolu
37

warp-ui-guidelines

Guide UI teams to follow Warp design guidelines for visual consistency.

Community
Intermediate
vathymutvathymut

test-driven-development

Guide developers through test-driven development with failing tests before implementation.

Community
Intermediate