skills.rest
lildibbb
lildibbbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Extracts design tokens and metadata from a Stitch project into a DESIGN.md document.

Updated Feb 24, 2026
Search Tags:#design system#DESIGN.md#stitch#automated design#stitch project analysis
One-click install
npx skills add https://github.com/lildibbb/tele-crm-frontend --skill design-md-lildibbb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/lildibbb/tele-crm-frontend/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/lildibbb/tele-crm-frontend --skill design-md-lildibbb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of synthesizing semantic design systems into DESIGN.md files, significantly reducing the time and complexity involved in documenting Stitch project designs.

Core Features & Use Cases

  • Automated Design Analysis: Extracts and synthesizes design elements from Stitch project assets.
  • DESIGN.md Generation: Outputs comprehensive documentation files with structured design guidelines.
  • Use Case: For a furniture collection app, this Skill would automatically generate a DESIGN.md file documenting the app's design system based on project screens, HTML, and CSS code.

Quick Start

Run the 'analyze_design' command on your Stitch project's project ID to automatically generate a DESIGN.md file.

Frequently Asked Questions about design-md

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

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

You can automate design system documentation by running the analyze_design command with your Stitch project ID. The Skill extracts design tokens and metadata via the Stitch MCP Server to generate a structured DESIGN.md file documenting the app's design system.

What is a DESIGN.md file and how is it generated from Stitch?▼

A DESIGN.md file is a markdown document containing synthesized semantic design system guidelines. It is generated from a Stitch project by extracting design tokens, HTML, and CSS code, which are then processed into structured documentation detailing the app's design elements.

Do I need the Stitch MCP Server to extract design tokens?▼

Yes, the Stitch MCP Server is required to retrieve Stitch projects, extract HTML and design metadata, and fetch web assets. The Skill operates using this server to gather the project data needed to synthesize the DESIGN.md file.

Can I generate design documentation for an existing furniture collection app?▼

Yes, you can generate design documentation for an existing furniture collection app. By providing the app's Stitch project ID, the Skill automatically analyzes project screens, HTML, and CSS to output a DESIGN.md file documenting the app's design system.

What design elements are extracted during automated design analysis?▼

During automated design analysis, design tokens, HTML, CSS code, and design metadata are extracted from the Stitch project assets. These elements are synthesized to create comprehensive documentation of the app's design system in a DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
chrishuffman5chrishuffman5

design-md

Generate DESIGN.md files from Stitch projects via the Stitch MCP Server.

Community
Advanced
erikstmartinerikstmartin
16

tailwind-design-system

Implement a Tailwind v4 design system with semantic tokens and CVA components.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
gabelulgabelul
38

stitch-mcp-get-project

Retrieve structured metadata and design system tokens from Stitch projects.

Community
Intermediate