skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Extract design tokens from Stitch screens into a structured DESIGN.md file.

Updated Mar 25, 2026
Search Tags:#typography#design-system#color-palette#stitch#design-md#html-parsing#visual-synthesis
One-click install
npx skills add https://github.com/involvex/skills --skill design-md-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/involvex/skills/tree/main/skills/design-md
Command: npx skills add https://github.com/involvex/skills --skill design-md-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the labor-intensive process of extracting design tokens and patterns from Stitch projects and turning them into a single, discoverable DESIGN.md that serves as the project's semantic design system and generation source of truth.

Core Features & Use Cases

  • Automated Retrieval: Uses Stitch MCP server tools to locate projects and download screen screenshots, HTML/CSS, and design metadata for analysis.
  • Token Extraction: Identifies and translates colors, typography, spacing, geometry, and component patterns from technical sources (HTML, Tailwind, CSS) into designer-friendly language with exact hex codes and physical descriptions.
  • Design Synthesis: Produces a structured DESIGN.md following a prescribed format that documents atmosphere, color roles, typography rules, component stylings, and layout principles for Stitch-driven screen generation.
  • Use Cases: Create a DESIGN.md for onboarding new designers, seed prompts for Stitch to generate new screens, or audit and standardize visual language across multiple product screens.

Quick Start

Analyze the Furniture Collection project's Home screen via Stitch, extract design tokens and patterns, and generate a comprehensive DESIGN.md documenting colors, typography, components, and layout.

Frequently Asked Questions about design-md

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

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

Generating a DESIGN.md from Stitch projects involves analyzing screen HTML/CSS and Tailwind classes to extract exact color palettes, typography, spacing, and component patterns, synthesizing them into a structured semantic design system document.

What is a semantic DESIGN.md file used for in UI generation?▼

A semantic DESIGN.md serves as a project's design system source of truth, documenting atmosphere, color roles, typography rules, and component stylings to seed prompts for consistent Stitch-driven UI screen generation.

Can I parse Tailwind classes and HTML to generate color palettes and typography rules?▼

Yes, you can parse Tailwind classes and HTML to generate color palettes and typography rules. The Skill identifies technical tokens from these sources and translates them into designer-friendly language with exact hex codes.

Does the design-md Skill require any external dependencies to analyze project screens?▼

No external dependencies are required to analyze project screens, but the Skill performs network retrieval from the Stitch MCP server to locate projects and download screen screenshots, HTML/CSS, and design metadata.

What's the best way to standardize visual language across multiple Stitch product screens?▼

The best way to standardize visual language across multiple Stitch product screens is to audit their HTML and Tailwind classes, extracting shared color, typography, and component patterns into a unified DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
ceslepceslep

design-md

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

Community
Advanced
codexyzdevcodexyzdev

design-md

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

Community
Advanced
J-StaR-Films-StudiosJ-StaR-Films-Studios
23

design-md

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

Official
Advanced
lenadlmlenadlm

popular-web-designs

Apply real-world design system templates to HTML/CSS projects.

Community
Intermediate