skills.rest
braswelljr
braswelljrCOMMUNITY
Explore all skills by this author →
Website𝕏@braswell_jnrGitHub

design-md

Generate DESIGN.md documentation from Stitch project design assets.

8|Updated Aug 25, 2020
Search Tags:#frontend#design system#design tokens#ui design#design documentation#stitch
One-click install
npx skills add https://github.com/braswelljr/braswelljr --skill design-md-braswelljr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/braswelljr/braswelljr/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/braswelljr/braswelljr --skill design-md-braswelljr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious, inconsistent manual work of documenting Stitch project design systems, providing a reliable, repeatable process to create accurate design language references for AI-powered screen generation.

Core Features & Use Cases

  • Automated Design Token Extraction: Retrieves Stitch project metadata, screenshots, and HTML source code via the Stitch MCP Server to pull colors, typography, spacing, and component patterns.
  • Semantic Translation: Converts technical CSS and Tailwind values into natural, designer-friendly language for clear, actionable design documentation.
  • Use Case: For a furniture e-commerce Stitch project, use this Skill to analyze the home screen and generate a comprehensive DESIGN.md that serves as the source of truth for prompting new screens that match the existing design system.

Quick Start

Use the design-md skill to analyze your Stitch project's primary screen and generate a complete DESIGN.md file documenting its full semantic 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, use a tool that retrieves project metadata, screen assets, and HTML source code via the Stitch MCP Server to synthesize a structured DESIGN.md file.

Can I extract design tokens from Stitch HTML and Tailwind CSS?▼

Yes, you can extract design tokens from Stitch HTML and Tailwind CSS by retrieving the source code through the Stitch MCP Server and translating the technical values into semantic design terminology.

How do I document UI design patterns for AI-powered screen generation?▼

Documenting UI design patterns for AI screen generation involves analyzing existing project screenshots and code to create a DESIGN.md file, serving as a consistent design language reference for new screens.

Does this design documentation process require manual CSS analysis?▼

No, this design documentation process eliminates manual CSS analysis by automatically retrieving project assets via the Stitch MCP Server and converting technical styling values into natural, designer-friendly language.

What is the best way to maintain consistent design language across new Stitch screens?▼

The best way to maintain a consistent design language across new Stitch screens is to generate a comprehensive semantic DESIGN.md file that acts as a single source of truth for prompting and matching existing project aesthetics.

Related Skills

Explore More Design & Creative Skills→
ceslepceslep

design-md

Convert Stitch project design assets into a structured DESIGN.md file.

Community
Advanced
JayJihyunKimJayJihyunKim
1

design-md

Synthesize a semantic DESIGN.md from Stitch project data.

Community
Advanced
v1nizxv1nizx

design-md

Convert CSS and Tailwind values into design tokens in a Markdown file.

Community
Intermediate
huangzidahuangzida
2

design-md

Generate a DESIGN.md semantic design document from Stitch project data.

Community
Advanced