design-md

Analyze Stitch project metadata and synthesize a semantic DESIGN.md.

1|Updated Mar 24, 2026
One-click install
npx skills add https://github.com/rovanni/IalClaw --skill design-md-rovanni
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/rovanni/IalClaw/tree/main/skills/internal/design-md
Command: npx skills add https://github.com/rovanni/IalClaw --skill design-md-rovanni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Stitch projects often lack a cohesive, machine-readable design language. This skill analyzes a Stitch project and synthesizes a semantic DESIGN.md that codifies atmosphere, color tokens, typography, and component patterns to serve as the source of truth for design prompts.

Core Features & Use Cases

  • Retrieval and analysis of Stitch project metadata (screens, colors, tokens) to inform a DESIGN.md.
  • Translation of technical design tokens into natural, designer-friendly language and a structured DESIGN.md.
  • End-to-end synthesis of a DESIGN.md that aligns new screens with existing design language and Stitch guidelines.
  • Use Case: A design team wants a ready-to-prompt DESIGN.md to anchor future screen generation.

Quick Start

Analyze a Stitch project by providing its project reference to generate a DESIGN.md that mirrors the project's design language.

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 document from a Stitch project?

To generate a design system document from a Stitch project, you analyze screen metadata and color tokens to synthesize a semantic DESIGN.md. This document serves as the design language source of truth, codifying atmosphere, typography, and component patterns.

What is a semantic DESIGN.md and how does it codify design tokens?

A semantic DESIGN.md translates technical color and typography tokens into natural, designer-friendly language to codify atmosphere, components, and layout. It serves as a structured source of truth to anchor future design prompts and align new screens.

Does generating a DESIGN.md require Stitch MCP data and HTML metadata?

Yes, generating a DESIGN.md requires access to Stitch MCP data, HTML/CSS metadata, and a project design theme. These inputs are necessary to map design tokens accurately and produce the final semantic design language source of truth.

How do I translate Stitch color tokens into a design language source of truth?

You translate Stitch color tokens into a design language source of truth by retrieving project metadata and mapping tokens within a structured DESIGN.md. This synthesis process aligns technical color values with semantic atmosphere and component patterns.

Can I use a generated DESIGN.md to align new screens with existing Stitch guidelines?

Yes, you can use a generated DESIGN.md to align new screens with existing Stitch guidelines and design language. It acts as a ready-to-prompt anchor ensuring future screen generation matches codified atmosphere, color, and typography rules.

What are the limitations of synthesizing design docs from Stitch projects?

The limitation of synthesizing design docs from Stitch projects is that the output relies entirely on available Stitch MCP data, HTML/CSS metadata, and existing color tokens. Without these specific project inputs, the semantic DESIGN.md cannot accurately map the design language.