skills.rest
vhoangbk
vhoangbkCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyze Stitch projects and generate DESIGN.md files with semantic design tokens.

Updated Feb 28, 2026
Search Tags:#code analysis#documentation#design system#tailwind css#markdown generation#stitch mcp
One-click install
npx skills add https://github.com/vhoangbk/local-video-convert --skill design-md-vhoangbk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/vhoangbk/local-video-convert/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/vhoangbk/local-video-convert --skill design-md-vhoangbk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive DESIGN.md files, translating complex technical design specifications into human-readable documentation for AI design systems.

Core Features & Use Cases

  • Automated Design Analysis: Analyzes project screens, HTML, and design metadata to extract key design tokens (colors, typography, spacing, components).
  • Semantic Translation: Converts technical CSS/Tailwind values into descriptive, natural design language.
  • DESIGN.md Generation: Synthesizes extracted information into a structured Markdown file following a semantic design system format.
  • Use Case: A developer can use this skill to quickly generate a DESIGN.md for a new feature, ensuring it aligns with the existing design language without manual documentation effort.

Quick Start

Use the design-md skill to analyze the current 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 Tailwind CSS code?▼

You can generate design system docs from code by analyzing project screens and HTML to extract design tokens like colors and typography, translating technical Tailwind CSS values into descriptive natural language within a structured Markdown file.

What is a semantic design system and how does it translate to Markdown?▼

A semantic design system translates technical CSS and Tailwind values into descriptive natural design language, structuring extracted tokens like colors, typography, and component patterns into human-readable Markdown documentation.

Can I automatically extract design tokens from HTML code?▼

Yes, you can automatically extract design tokens from HTML code by retrieving project screens and design metadata, synthesizing colors, typography, and component patterns into a structured Markdown file.

Does this design documentation tool work with Stitch projects?▼

Yes, this design documentation tool works with Stitch projects by retrieving project screens, HTML code, and design metadata to analyze the existing design system and output a comprehensive Markdown file.

How do I document UI components and design patterns for AI systems?▼

Document UI components and design patterns for AI systems by analyzing project HTML and metadata to extract component structures, converting technical specifications into a semantic Markdown format.

What's the best way to maintain design system docs without manual effort?▼

The best way to maintain design system docs without manual effort is to automate the analysis of project code and metadata, translating technical CSS values into a descriptive Markdown file that aligns with your design language.

Related Skills

Explore More Design & Creative Skills→
braswelljrbraswelljr
8

design-md

Generate DESIGN.md documentation from Stitch project design assets.

Community
Intermediate
tizeetizee
2

design-taste-frontend

Enforce design and architecture rules for React and Next.js frontend interfaces.

Community
Advanced
sathidpong01sathidpong01
1

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 using CSS-first configuration and design tokens.

Community
Advanced
reomgitreomgit

design-html

Convert design mockups into HTML/CSS code using Pretext patterns.

Community
Advanced