skills.rest
revyid
revyidCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Extract design tokens from Stitch project assets into a DESIGN.md file.

Updated Apr 25, 2026
Search Tags:#design system#visual analysis#stitch#markup generation#style documentation
One-click install
npx skills add https://github.com/revyid/pmrsmansa --skill design-md-revyid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/revyid/pmrsmansa/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/revyid/pmrsmansa --skill design-md-revyid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps designers and developers quickly synthesize a clear, detailed design system documentation from Stitch project assets, ensuring consistency and effective communication across teams.

Core Features & Use Cases

  • Design Analysis: Extracts visual, color, typography, and layout details from Stitch project screens and HTML assets.
  • Documentation Generation: Organizes the extracted design elements into a structured DESIGN.md file.
  • Use Case: A designer wants to document the visual language of a Stitch project so that frontend developers or other designers can reference and replicate the style accurately.

Quick Start

Retrieve a project from Stitch MCP, select a screen, and run this Skill to generate a detailed design system markdown document capturing colors, typography, components, 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 generate design system documentation from Stitch project assets?▼

Generating design system documentation from Stitch assets involves extracting color, typography, and layout design tokens from project screenshots and HTML code to produce a structured markdown file.

What is the best way to document visual consistency for frontend developers?▼

Documenting visual consistency requires synthesizing extracted design tokens into designer-friendly guidelines, ensuring frontend developers can accurately reference and replicate the visual language across digital products.

Can I extract typography and color tokens directly from Stitch screenshots?▼

Yes, extracting typography and color tokens from Stitch screenshots involves analyzing project screens and HTML assets to identify visual design metadata and synthesize it into structured documentation.

Do I need HTML code to analyze design tokens in a Stitch project?▼

Analyzing design tokens in a Stitch project benefits from having both HTML code and screenshots, as the Skill requires analyzing project screenshots, HTML code, and design metadata to produce comprehensive guidelines.

What limitations exist when creating style documentation from Stitch screens?▼

Limitations when creating style documentation from Stitch screens include relying on the availability of project screenshots, HTML code, and design metadata, as the Skill requires all three to accurately extract and synthesize design tokens.

Related Skills

Explore More Design & Creative Skills→
lucasromanhlucasromanh

design-md

Extract design tokens from Stitch projects and generate a DESIGN.md file.

Community
Advanced
Adelie-SquadAdelie-Squad
17

UI Designer Agent

Create UI systems with design tokens, component libraries, and handoff notes.

Official
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
hoainam183hoainam183

stitch-design-taste

Generate a DESIGN.md file defining visual atmosphere, color, typography, layout, and motion for Google Stitch.

Community
Advanced