skills.rest
rafifos
rafifosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

Analyze Stitch projects to generate a semantic DESIGN.md design system document.

6|Updated Mar 24, 2019
Search Tags:#documentation#design-system#analyze#stitch#design-language#design-md
One-click install
npx skills add https://github.com/rafifos/dotfiles --skill design-md-rafifos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/rafifos/dotfiles/tree/main/dot_agents/skills/design-md
Command: npx skills add https://github.com/rafifos/dotfiles --skill design-md-rafifos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams formalize and reuse a design-language specification by generating DESIGN.md files that serve as the canonical source of truth for prompting Stitch to create consistent screens.

Core Features & Use Cases

  • Analyze Stitch projects to extract design tokens (colors, typography, spacing) and translate them into descriptive language suitable for DESIGN.md.
  • Synthesize a complete DESIGN.md document that can be reused across projects to align new screens with the existing design language.
  • Reuse across multiple projects and screens to produce consistent documentation and design guidance from project assets.

Quick Start

Analyze a Stitch project, extract design tokens and assets, and generate DESIGN.md following the Design System structure.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I generate a design system specification from Stitch projects?▼

You generate a design system specification by analyzing Stitch projects to extract color tokens, typography, spacing, and component patterns, then synthesizing these assets into a standards-compliant DESIGN.md document codifying the formal design language.

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

A DESIGN.md file is used in UI generation as the canonical source of truth for prompting Stitch to create consistent screens, ensuring new UI aligns with the existing design language, tokens, and component patterns.

Can I reuse a generated DESIGN.md across multiple Stitch projects?▼

Yes, you can reuse a generated DESIGN.md across multiple Stitch projects and screens to produce consistent documentation and design guidance from project assets, aligning new UI generation with the established formal design language.

Do I need Stitch MCP data to extract design tokens and create documentation?▼

Yes, you need access to Stitch MCP data and the ability to fetch HTML/CSS assets to identify color tokens, typography, spacing, and component patterns required to produce a standards-compliant DESIGN.md file.

Why does my Stitch UI generation lack consistent design tokens?▼

Your Stitch UI generation lacks consistent design tokens because it lacks a formal design language specification. Generating a DESIGN.md codifies your semantic design tokens to prompt Stitch for consistent screen outputs across projects.

Related Skills

Explore More Design & Creative Skills→
Nexprove-TeamNexprove-Team
1

design-md

Generate a DESIGN.md synthesizing semantic design tokens from Stitch projects.

Official
Advanced
cassioalexandrecassioalexandre
2

stitch-design

Convert vague UI intent into Stitch screens and design systems.

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

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

Community
Advanced
chrishuffman5chrishuffman5

stitch-design

Create high-fidelity UI/UX designs using Stitch MCP workflows.

Community
Advanced