stitch-design-md

Convert Stitch screen HTML and design tokens into a semantic DESIGN.md design system.

2|Updated Apr 2, 2026

Search Tags:#design-system #design-tokens #color-palette #stitch #ui-generation #semantic-design-md #typography-rules

Ready to run

npx skills add https://github.com/cassioalexandre/agf --skill stitch-design-md-cassioalexandre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stitch-design-md
Source: https://github.com/cassioalexandre/agf/tree/main/.agents/skills/stitch/stitch-design-md
Command: npx skills add https://github.com/cassioalexandre/agf --skill stitch-design-md-cassioalexandre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of inconsistent UI generation by converting existing Stitch project screens into a semantic, human-friendly DESIGN.md that can act as the prompting source of truth.

Core Features & Use Cases

Semantic design system synthesis: Extracts atmosphere, color roles (with exact hex), typography rules, geometry/shape, depth, and layout principles from Stitch screen metadata and HTML.
Token translation into designer language: Converts technical CSS/Tailwind values into natural-language guidance that Stitch can follow reliably.
Screen-alignment for future generation: Ensures new screens adhere to the same visual hierarchy, spacing strategy, and component styling patterns to maintain design consistency.

Quick Start

Ask an agent to use the Stitch MCP server to retrieve a Stitch project’s designed screen(s), analyze the HTML/design theme tokens, and generate a correctly formatted DESIGN.md for that project.

Frequently Asked Questions about stitch-design-md

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

FAQPage Schema

How do I create a design system from Stitch screen HTML?▼

To create a design system from Stitch screen HTML, this Skill fetches project screens via the Stitch MCP server, extracts design tokens and Tailwind values, and writes a semantic DESIGN.md file to serve as a prompting source for future UI generation.

What is semantic design token translation for UI generation?▼

Semantic design token translation converts technical CSS and Tailwind values into natural-language guidance. This allows design tools like Stitch to reliably follow visual rules for color, typography, and layout when generating new screens.

How do I extract exact color hex codes and typography rules from Stitch designs?▼

You can extract exact color hex codes and typography rules by analyzing the designTheme metadata and HTML from Stitch screens. This Skill translates that technical data into precise semantic rules formatted within a structured DESIGN.md file.

Do I need the Stitch MCP server to generate a design system markdown?▼

Yes, you need the Stitch MCP server to generate a design system markdown. The process requires discovering MCP tool namespaces, retrieving project and screen identifiers, and fetching the underlying HTML and design tokens to synthesize the DESIGN.md.

What's the best way to maintain visual consistency across multiple Stitch screens?▼

The best way to maintain visual consistency across Stitch screens is to use a shared DESIGN.md file. By translating existing screen metadata into semantic rules, new screens will adhere to the same visual hierarchy, spacing strategy, and component styling patterns.

Can I use existing screenshots to help generate a semantic design system?▼

Yes, you can use existing screenshots to help generate a semantic design system. The synthesis process accepts optional screenshot references alongside Stitch screen HTML and designTheme metadata to derive atmosphere, geometry, and layout principles for the DESIGN.md.