design-md

Generate DESIGN.md documentation from HTML/CSS design assets via Stitch MCP Server.

23|5|Updated Nov 5, 2025
One-click install
npx skills add https://github.com/J-StaR-Films-Studios/VibeCode-Protocol-Suite --skill design-md-j-star-films-studios
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/J-StaR-Films-Studios/VibeCode-Protocol-Suite/tree/main/assets/.agent/skills/stitch/design-md
Command: npx skills add https://github.com/J-StaR-Films-Studios/VibeCode-Protocol-Suite --skill design-md-j-star-films-studios

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of creating comprehensive design system documentation from technical assets, saving time and ensuring consistency.

Core Features & Use Cases

  • Design Analysis: Analyzes project screens, HTML code, and design metadata.
  • Design Synthesis: Converts technical values into descriptive design language.
  • Documentation Generation: Outputs a DESIGN.md file with structured design system information.
  • Use Case: For a furniture collection project, the Skill can analyze the project's Home screen and generate a DESIGN.md file documenting the design system.

Quick Start

Use the design-md skill to generate a DESIGN.md file for the 'Furniture Collection' project.

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 HTML and CSS?

You can generate design system documentation by parsing HTML and CSS to extract UI components, color palettes, and typography guidelines, which are then synthesized into a structured Markdown file. This process converts technical values into descriptive design language.

Can I automate Markdown documentation creation for existing UI components?

Yes, you can automate Markdown documentation creation by analyzing project screens and design metadata to synthesize existing UI components into a structured DESIGN.md file. This ensures consistency and saves time compared to manual documentation.

Do I need a specific server to parse design metadata for documentation generation?

Yes, design metadata parsing requires access to the Stitch MCP Server to extract design system information from technical assets. This server connection is necessary to analyze HTML code and project screens for documentation synthesis.

What is the best way to document color palettes and typography guidelines in Markdown?

The best way to document color palettes and typography guidelines in Markdown is to analyze technical assets and convert raw design values into descriptive design language automatically. This method outputs a structured DESIGN.md file with comprehensive design system information.

Why does automated design synthesis require parsing HTML and CSS?

Automated design synthesis requires parsing HTML and CSS to extract technical values like color codes and typography rules from project screens. These parsed values are then converted into the descriptive design language needed for comprehensive documentation.

Are there limitations when generating design system documentation from project screens?

A key limitation is that documentation generation depends on access to the Stitch MCP Server and accurate HTML/CSS parsing. Without proper technical assets or server connectivity, the design extraction and Markdown synthesis cannot be completed.