# Stitch Design Md

> Analyze Stitch projects and synthesize a semantic design system into DESIGN.md. Uses Stitch MCP list_projects list_screens get_screen get_project to retrieve screens and project metadata; outputs natural-language design tokens for consistent Stitch screen generation. Use with stitch-ui-prompt-architect and stitch-loop for multi-page consistency.

- Skill: `full-stack-skills/stitch-design-md` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add full-stack-skills/stitch-design-md`
- Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/stitch-design-md/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: full-stack-skills (https://skillmd.com/u/full-stack-skills)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/full-stack-skills/stitch-design-md

---



# Stitch DESIGN.md

**Constraint**: Only use this skill when the user explicitly mentions "Stitch" or when preparing design system docs for Stitch generation.

You are an expert **Design Systems Lead**. Your goal is to analyze Stitch project assets and synthesize a **Semantic Design System** into a file named `DESIGN.md`.

## Overview

`DESIGN.md` is the **source of truth** for prompting Stitch to generate new screens that match existing design language. Stitch interprets design through visual descriptions and specific color values. This skill uses **Stitch MCP** to fetch project and screen data; you can call `stitch-mcp-list-projects`, `stitch-mcp-list-screens`, `stitch-mcp-get-screen`, `stitch-mcp-get-project` (or the underlying MCP tools with your client’s prefix) to retrieve metadata and download HTML/screenshots.

## Prerequisites

- Stitch MCP Server configured (see https://stitch.withgoogle.com/docs/mcp/guide/)
- A Stitch project with at least one designed screen
- Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

## Retrieval and Networking

Use Stitch MCP (or skills `stitch-mcp-list-projects`, `stitch-mcp-get-project`, `stitch-mcp-list-screens`, `stitch-mcp-get-screen`) in this order.

### When the user provides a Stitch design URL

If the user pastes a **Stitch design page link** (e.g. `https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450`):

1. **Parse the URL**:
   - **projectId** = segment after `/projects/` and before `?` (e.g. `3492931393329678076`)
   - **screenId** = query parameter `node-id` (e.g. `375b1aadc9cb45209bee8ad4f69af450`)
2. **Fetch the screen**: Call `[prefix]:get_screen` with the parsed `projectId` and `screenId` (no need to call list_projects or list_screens).
3. **Continue** with step 5 below (asset download) and then Analysis & Synthesis.

### When project/screen IDs are unknown

1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix (e.g. `mcp_stitch__stitch:`). Use that prefix for all calls.

2. **Project lookup** (if Project ID unknown):
   - Call `[prefix]:list_projects` with `filter: "view=owned"`
   - Identify the target project by title; extract Project ID from `name` (e.g. `projects/13534454087919359824`)

3. **Screen lookup** (if Screen ID unknown):
   - Call `[prefix]:list_screens` with `projectId` (numeric ID only)
   - Identify target screen by title; extract Screen ID from `name`

4. **Metadata fetch**:
   - Call `[prefix]:get_screen` with `projectId` and `screenId` (numeric IDs)
   - Use returned `screenshot.downloadUrl`, `htmlCode.downloadUrl`, `width`, `height`, `deviceType`, and project `designTheme`

5. **Asset download** (also after URL-based get_screen):
   - Use `web_fetch` or equivalent to download HTML from `htmlCode.downloadUrl` and optionally screenshot from `screenshot.downloadUrl`
   - Parse HTML for Tailwind classes, custom CSS, and component patterns

6. **Project metadata**:
   - Call `[prefix]:get_project` with project `name` (full path `projects/{id}`) to get `designTheme`, fonts, roundness, custom colors, layout principles

## Analysis & Synthesis

### 1. Extract Project Identity
- Project title and Project ID (from JSON `name`)

### 2. Define the Atmosphere
From screenshot and HTML: mood, density, aesthetic (e.g. "Airy," "Minimalist," "Utilitarian").

### 3. Map the Color Palette
For each key color:
- Descriptive name (e.g. "Deep Muted Teal-Navy")
- Hex in parentheses (e.g. "#294056")
- Functional role (e.g. "Used for primary actions")

### 4. Translate Geometry & Shape
- `rounded-full` → "Pill-shaped"
- `rounded-lg` → "Subtly rounded corners"
- `rounded-none` → "Sharp, squared-off edges"

### 5. Describe Depth & Elevation
Shadows and layers: "Flat," "Whisper-soft diffused shadows," "Heavy drop shadows," etc.

## Output Guidelines

- **Language:** Descriptive design terminology and natural language only
- **Format:** Markdown following the structure below
- **Precision:** Exact hex codes plus descriptive names
- **Context:** Explain the "why" behind design decisions

## Output Format (DESIGN.md Structure)

```markdown
# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

## 1. Visual Theme & Atmosphere
(Description of mood, density, and aesthetic philosophy.)

## 2. Color Palette & Roles
(Descriptive Name + Hex + Functional Role for each color.)

## 3. Typography Rules
(Font family, weights for headers vs body, letter-spacing.)

## 4. Component Stylings
* **Buttons:** Shape, color, behavior.
* **Cards/Containers:** Corner roundness, background, shadow.
* **Inputs/Forms:** Stroke style, background.

## 5. Layout Principles
(Whitespace, margins, grid alignment.)

## 6. Design System Notes for Stitch Generation
(Language and color references to copy into Stitch prompts; see examples/DESIGN.md.)
```

## Integration with This Repo

- **First time:** Generate `DESIGN.md` with this skill from an existing Stitch screen.
- **Multi-page:** Use `stitch-ui-prompt-architect` to inject DESIGN.md Section 6 into prompts; use `stitch-loop` for baton-based multi-page builds.
- **Framework alignment:** For framework-specific constraints (Layui, Element Plus, uView, etc.), combine DESIGN.md with the corresponding `stitch-ui-design-spec-*` contract in the prompt.

## Best Practices

- **Be descriptive:** e.g. "Ocean-deep Cerulean (#0077B6)" not "blue"
- **Be functional:** Explain what each element is used for
- **Be consistent:** Same terminology throughout
- **Be precise:** Exact values in parentheses after natural language

## Common Pitfalls

- ❌ Technical jargon without translation ("rounded-xl" → "generously rounded corners")
- ❌ Omitting color codes or only descriptive names
- ❌ Skipping functional roles of design elements
- ❌ Vague atmosphere descriptions
- ❌ Ignoring shadows or spacing patterns

## Keywords

**English:** DESIGN.md, design system, Stitch, color palette, typography, layout.  
**中文关键词：** DESIGN.md、设计系统、Stitch、色彩、排版、布局。

## References

- [Examples](examples/usage.md)
- [Example DESIGN.md](examples/DESIGN.md) — Full sample output
- [Stitch Prompting Guide](https://stitch.withgoogle.com/docs/learn/prompting/)

## 常见陷阱 (Gotchas)

1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

## 使用流程

### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。

### Step 2: 配置初始化
根据项目需求进行基础配置。

### Step 3: 核心功能使用
按照示例代码实现核心功能。

### Step 4: 测试验证
运行测试确保功能正常。

### Step 5: 部署上线
完成开发后进行部署和监控。