Design Md

If you're working with Google Stitch and need to maintain design consistency across screens, this analyzes your existing Stitch projects and generates a DESIGN.md file that captures your visual language in natural, descriptive terms. It pulls screen metadata, downloads HTML/CSS assets, and translates technical Tailwind classes into designer-friendly descriptions like "Ocean-deep Cerulean (#0077B6)" instead of just hex codes. The real value is creating a semantic design system that you can reference when prompting Stitch to generate new screens that actually match your existing aesthetic. Saves you from the usual problem of new AI-generated screens that look completely different from what you already built.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 13
skills.sh installs: 65.9K
GitHub stars: 8.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add google-labs-code/stitch-skills --skill design-md --agent claude-code

Installs into .claude/skills of the current project.

Files

Stitch DESIGN.md Skill

You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named DESIGN.md.

Overview

This skill helps you create DESIGN.md files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.

Prerequisites

Access to the Stitch MCP Server
A Stitch project with at least one designed screen
Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

The Goal

The DESIGN.md file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.