What is the purpose of the DESIGN.md file?

The DESIGN.md file acts as a semantic source of truth that describes the visual language of a project in natural language, helping AI tools like Stitch generate consistent new UI screens.

Do I need the Stitch MCP server to use this skill?

Yes, this skill requires access to the Stitch MCP server to perform project lookups, screen metadata retrieval, and asset downloads.

Is it possible to use this with existing projects?

Absolutely. It is designed to analyze existing Stitch projects to document their current state as a formal design system.

How does it describe design 'vibe' or atmosphere?

It evaluates screenshots and structural density to translate technical layouts into evocative adjectives like 'Minimalist', 'Utilitarian', or 'Airy' for better AI context.

Can this skill identify specific Tailwind CSS colors?

Yes, it parses HTML and CSS to identify Tailwind classes and maps them to descriptive names and exact hex codes for professional design documentation.

Stitch Design System Architect

Name: Stitch Design System Architect
Author: Microck

byMicrock

•

Design Tools

Analyzes Stitch projects to synthesize a semantic design system into a standardized DESIGN.md file for consistent AI UI generation.

The design-md skill serves as a bridge between technical UI assets and high-level design strategy. By leveraging the Stitch MCP server, it retrieves screen metadata, HTML, and CSS to extract design tokens, color palettes, and layout principles. It then transforms these technical details into a human-readable and AI-friendly DESIGN.md file. This document acts as the 'source of truth' for the project's visual identity, ensuring that any subsequent screens generated via Stitch or other AI tools maintain perfect atmospheric and functional consistency.

Key Features

01Translation of technical geometry and elevation into visual descriptions

02Deep analysis of Tailwind CSS and custom styling patterns

03Standardized DESIGN.md generation optimized for AI prompting

04Semantic mapping of color palettes with functional role assignments

05Automated Stitch project and screen discovery using MCP tools

062 GitHub stars

Use Cases

01Onboarding developers to a project's design language through structured documentation

02Establishing a visual source of truth for existing legacy Stitch projects

03Improving the consistency of AI-generated UI by providing context-rich prompt foundations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck design-md

For use in Claude.ai and ChatGPT

Download Skill