skills.rest
Chris-Maskey
Chris-MaskeyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

Updated Apr 17, 2026
Search Tags:#design-system#analyze#style-guide#design-tokens#stitch#design-md
One-click install
npx skills add https://github.com/Chris-Maskey/opencode-config --skill design-md-chris-maskey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Chris-Maskey/opencode-config/tree/main/skills/design-md
Command: npx skills add https://github.com/Chris-Maskey/opencode-config --skill design-md-chris-maskey

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many Stitch projects contain visual designs locked in screenshots, HTML, and metadata without a clear, human-friendly design system for guiding consistent screen generation; this skill extracts and organizes those tokens and rules into a single DESIGN.md file that serves as a source of truth.

Core Features & Use Cases

  • Retrieval of Stitch project and screen metadata using the Stitch MCP Server to obtain screenshots, HTML/CSS, and designTheme details.
  • Extraction of design tokens (colors, typography, spacing, shapes) and component patterns from HTML and project metadata.
  • Translation of technical CSS/Tailwind values into descriptive, designer-friendly language and synthesis into a structured DESIGN.md for guiding new screen generation.
  • Use Case: Convert a project's Home screen and its HTML/CSS into a DESIGN.md to prompt Stitch to generate additional screens that match the established visual language.

Quick Start

Analyze the Furniture Collection Stitch project Home screen and generate a DESIGN.md that documents its colors, typography, component rules, spacing, and layout principles.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I extract design tokens from a Stitch project to create a style guide?▼

To extract design tokens from a Stitch project, this skill fetches screenshots, HTML/CSS, and metadata via the Stitch MCP Server, then synthesizes them into a structured DESIGN.md style guide.

What is a DESIGN.md file used for in design system generation?▼

A DESIGN.md file serves as a portable source of truth for your design system, documenting colors, typography, spacing, and component rules to guide the generation of consistent new screens.

Can I generate new screens that match my existing Stitch project's visual language?▼

Yes, you can generate matching new screens by using the synthesized DESIGN.md to prompt Stitch with your established design tokens, layout principles, and component patterns.

Do I need the Stitch MCP Server to analyze my project's design metadata?▼

Yes, you need access to the Stitch MCP Server because this skill relies on it to fetch project screen metadata, design themes, and the HTML/CSS content required for design token extraction.

How do I convert Tailwind CSS values into designer-friendly design tokens?▼

This skill parses technical CSS and Tailwind values from your screenshots and HTML, translating them into descriptive, designer-friendly language within a structured DESIGN.md file.

What are the limitations of using a generated DESIGN.md for new screen generation?▼

The generated DESIGN.md relies entirely on the visual designs locked in your existing Stitch project screenshots and metadata, meaning it cannot invent new design patterns beyond your established visual language.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
lintendolintendo
152

design-md

Analyze Stitch projects to generate DESIGN.md with visual language tokens.

Community
Advanced
dylantarredylantarre
38

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

Community
Intermediate
lildibbblildibbb

design-md

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

Community
Intermediate