skills.rest
RenyEnnos
RenyEnnosCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

1|Updated Nov 28, 2025
Search Tags:#design-system#design-tokens#Stitch#UX/UI#design-documentation#design-synthesis
One-click install
npx skills add https://github.com/RenyEnnos/life-os --skill design-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/RenyEnnos/life-os/tree/main/.agent/skills/design-md
Command: npx skills add https://github.com/RenyEnnos/life-os --skill design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of DESIGN.md design-system documentation from Stitch project assets, turning scattered data into a single source of truth.

Core Features & Use Cases

  • Retrieve Stitch project metadata, screens, and design assets
  • Extract design tokens (colors, typography, spacing, components) and translate values into natural language design language
  • Synthesize a complete DESIGN.md that serves as a promptable, semantic design system reference for new screens

Quick Start

Use the design-md skill to analyze a Stitch project and generate DESIGN.md documents for its Home screen.

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 Stitch project assets?▼

To generate design system documentation from Stitch project assets, use the tool to retrieve project metadata, extract design tokens, translate CSS/Tailwind values into natural language, and synthesize a complete DESIGN.md file.

What is a DESIGN.md file used for in UX/UI design?▼

A DESIGN.md file serves as a single source of truth and a promptable, semantic design system reference. It synthesizes extracted color, typography, spacing, and component patterns to guide new screen creation.

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

Yes, accessing the Stitch MCP Server is required. Generating the DESIGN.md requires the server to retrieve project metadata, parse HTML/CSS assets, and derive the necessary design tokens.

Can I translate Tailwind CSS values into natural language design documentation?▼

Yes, the tool translates Tailwind CSS values into natural language design language. It parses HTML and CSS assets to derive typography, spacing, and color patterns for the documentation.

How do I extract color and typography patterns from HTML and CSS for a design system?▼

You can extract color and typography patterns by parsing HTML and CSS assets from your Stitch project. The tool automates this process to identify component patterns and translate them into semantic design tokens.

Related Skills

Explore More Design & Creative Skills→
Chris-MaskeyChris-Maskey

design-md

Analyze Stitch project screens and synthesize a semantic DESIGN.md file.

Community
Advanced
eastreamseastreams
641

design-md

Generate a semantic DESIGN.md file from Stitch project design assets.

Official
Advanced
ChristineThamChristineTham

tailwind-design-system

Create Tailwind v4 design systems with CSS-first token theming.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced