design-md

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stitch DESIGN.md Skill

Stitch DESIGN.md 技能

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

你是一位资深设计系统负责人。你的目标是分析提供的技术资产，并将“语义化设计系统”整合到名为

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.

本技能可帮助你创建

DESIGN.md

文件，该文件将作为提示Stitch生成与现有设计语言完全一致的新界面的“事实来源”。Stitch通过带有特定颜色值的“视觉描述”来解读设计。

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/

可访问Stitch MCP Server
拥有至少一个已设计界面的Stitch项目
可访问Stitch有效提示指南：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.

DESIGN.md

文件将作为提示Stitch生成与现有设计语言完全一致的新界面的“事实来源”。Stitch通过带有特定颜色值的“视觉描述”来解读设计。

Retrieval and Networking

检索与网络操作

To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:

Namespace discovery: Run
```
list_tools
```
to find the Stitch MCP prefix. Use this prefix (e.g.,
```
mcp_stitch:
```
) for all subsequent calls.
Project lookup (if Project ID is not provided):
- Call
```
[prefix]:list_projects
```
  with
```
filter: "view=owned"
```
  to retrieve all user projects
- Identify the target project by title or URL pattern
- Extract the Project ID from the
```
name
```
  field (e.g.,
```
projects/13534454087919359824
```
  )
Screen lookup (if Screen ID is not provided):
- Call
```
[prefix]:list_screens
```
  with the
```
projectId
```
  (just the numeric ID, not the full path)
- Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
- Extract the Screen ID from the screen's
```
name
```
  field
Metadata fetch:
- Call
```
[prefix]:get_screen
```
  with both
```
projectId
```
  and
```
screenId
```
  (both as numeric IDs only)
- This returns the complete screen object including:
  - ```
  screenshot.downloadUrl
```
  - Visual reference of the design
- ```
htmlCode.downloadUrl
```
    - Full HTML/CSS source code
  - ```
  width
```
  ,
```
  height
```
  ,
```
  deviceType
```
  - Screen dimensions and target platform
- Project metadata including
```
  designTheme
```
  with color and style information
Asset download:
- Use
```
web_fetch
```
  or
```
read_url_content
```
  to download the HTML code from
```
htmlCode.downloadUrl
```
- Optionally download the screenshot from
```
screenshot.downloadUrl
```
  for visual reference
- Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
Project metadata extraction:
- Call
```
[prefix]:get_project
```
  with the project
```
name
```
  (full path:
```
projects/{id}
```
  ) to get:
  - ```
  designTheme
```
  object with color mode, fonts, roundness, custom colors
- Project-level design guidelines and descriptions
- Device type preferences and layout principles

要分析Stitch项目，你必须使用Stitch MCP Server工具检索界面元数据和设计资产：

命名空间发现：运行
```
list_tools
```
以找到Stitch MCP前缀。将此前缀（例如
```
mcp_stitch:
```
）用于后续所有调用。
项目查找（若未提供项目ID）：
- 调用
```
[prefix]:list_projects
```
  并传入
```
filter: "view=owned"
```
  以检索所有用户项目
- 通过标题或URL模式识别目标项目
- 从
```
name
```
  字段中提取项目ID（例如
```
projects/13534454087919359824
```
  ）
界面查找（若未提供界面ID）：
- 调用
```
[prefix]:list_screens
```
  并传入
```
projectId
```
  （仅需数字ID，无需完整路径）
- 查看界面标题以识别目标界面（例如“首页”、“着陆页”）
- 从界面的
```
name
```
  字段中提取界面ID
元数据获取：
- 调用
```
[prefix]:get_screen
```
  并传入
```
projectId
```
  和
```
screenId
```
  （均仅需数字ID）
- 这将返回完整的界面对象，包括：
  - ```
  screenshot.downloadUrl
```
  - 设计的视觉参考链接
- ```
htmlCode.downloadUrl
```
    - 完整的HTML/CSS源代码链接
  - ```
  width
```
  ,
```
  height
```
  ,
```
  deviceType
```
  - 界面尺寸和目标平台
- 包含
```
  designTheme
```
  （带有颜色和样式信息）的项目元数据
资产下载：
- 使用
```
web_fetch
```
  或
```
read_url_content
```
  从
```
htmlCode.downloadUrl
```
  下载HTML代码
- 可选择从
```
screenshot.downloadUrl
```
  下载截图作为视觉参考
- 解析HTML以提取Tailwind类、自定义CSS和组件模式
项目元数据提取：
- 调用
```
[prefix]:get_project
```
  并传入项目
```
name
```
  （完整路径：
```
projects/{id}
```
  ）以获取：
  - ```
  designTheme
```
  对象，包含颜色模式、字体、圆角、自定义颜色
- 项目级设计指南和描述
- 设备类型偏好和布局原则

Analysis & Synthesis Instructions

分析与整合说明

1. Extract Project Identity (JSON)

1. 提取项目标识（JSON）

Locate the Project Title
Locate the specific Project ID (e.g., from the
```
name
```
field in the JSON)

找到项目标题
找到具体的项目ID（例如从JSON的
```
name
```
字段中获取）

2. Define the Atmosphere (Image/HTML)

2. 定义整体氛围（图片/HTML）

Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").

评估截图和HTML结构，捕捉整体“风格基调”。使用有感染力的形容词描述氛围（例如“轻盈的”、“紧凑的”、“极简主义的”、“实用主义的”）。

3. Map the Color Palette (Tailwind Config/JSON)

3. 映射调色板（Tailwind配置/JSON）

Identify the key colors in the system. For each color, provide:

A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
The specific hex code in parentheses for precision (e.g., "#294056")
Its specific functional role (e.g., "Used for primary actions")

识别系统中的关键颜色。针对每种颜色，提供：

一个能传达其特质的描述性自然语言名称（例如“深邃柔和的蓝绿色-藏青色”）
精确的十六进制代码（例如
```
#294056
```
）
其具体的功能角色（例如“用于主要操作按钮”）

4. Translate Geometry & Shape (CSS/Tailwind)

4. 转化几何与形状（CSS/Tailwind）

Convert technical

border-radius

and layout values into physical descriptions:

Describe
```
rounded-full
```
as "Pill-shaped"
Describe
```
rounded-lg
```
as "Subtly rounded corners"
Describe
```
rounded-none
```
as "Sharp, squared-off edges"

将技术层面的

border-radius

和布局值转化为直观描述：

将
```
rounded-full
```
描述为“胶囊形状”
将
```
rounded-lg
```
描述为“轻微圆角”
将
```
rounded-none
```
描述为“锐利的直角边缘”

5. Describe Depth & Elevation

5. 描述层次感与立体感

Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").

说明UI如何处理图层。描述阴影的存在和特性（例如“扁平化”、“极淡的弥散阴影”或“厚重的高对比度投影”）。

Output Guidelines

输出指南

Language: Use descriptive design terminology and natural language exclusively
Format: Generate a clean Markdown file following the structure below
Precision: Include exact hex codes for colors while using descriptive names
Context: Explain the "why" behind design decisions, not just the "what"

语言：仅使用描述性设计术语和自然语言
格式：按照以下结构生成清晰的Markdown文件
精度：在使用描述性名称的同时，包含精确的十六进制颜色代码
上下文：解释设计决策背后的“原因”，而不仅仅是“内容”

Output Format (DESIGN.md Structure)

输出格式（DESIGN.md结构）

markdown

undefined

markdown

undefined

Design System: [Project Title]

设计系统：[项目标题]

Project ID: [Insert Project ID Here]

项目ID： [在此插入项目ID]

1. Visual Theme & Atmosphere

1. 视觉主题与整体氛围

(Description of the mood, density, and aesthetic philosophy.)

（对风格基调、紧凑度和美学理念的描述。）

2. Color Palette & Roles

2. 调色板与角色

(List colors by Descriptive Name + Hex Code + Functional Role.)

（按描述性名称 + 十六进制代码 + 功能角色列出颜色。）

3. Typography Rules

3. 排版规则

(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

（对字体族、标题与正文的字重使用、字符间距特性的描述。）

4. Component Stylings

4. 组件样式

Buttons: (Shape description, color assignment, behavior).
Cards/Containers: (Corner roundness description, background color, shadow depth).
Inputs/Forms: (Stroke style, background).

按钮：（形状描述、颜色分配、交互行为）
卡片/容器：（圆角描述、背景颜色、阴影层次）
输入框/表单：（边框样式、背景）

5. Layout Principles

5. 布局原则

(Description of whitespace strategy, margins, and grid alignment.)

undefined

（对留白策略、边距和网格对齐方式的描述。）

undefined

Usage Example

使用示例

To use this skill for the Furniture Collection project:

Retrieve project information:

Use the Stitch MCP Server to get the Furniture Collection project

Get the Home page screen details:

Retrieve the Home page screen's code, image, and screen object information

Reference best practices:

Review the Stitch Effective Prompting Guide at:
https://stitch.withgoogle.com/docs/learn/prompting/

Analyze and synthesize:
- Extract all relevant design tokens from the screen
- Translate technical values into descriptive language
- Organize information according to the DESIGN.md structure
Generate the file:
- Create
```
DESIGN.md
```
  in the project directory
- Follow the prescribed format exactly
- Ensure all color codes are accurate
- Use evocative, designer-friendly language

要将本技能用于家具收藏项目：

检索项目信息：

使用Stitch MCP Server获取家具收藏项目

获取首页界面详情：

检索首页界面的代码、图片和界面对象信息

参考最佳实践：

查看Stitch有效提示指南：
https://stitch.withgoogle.com/docs/learn/prompting/

分析与整合：
- 从界面中提取所有相关的设计标记
- 将技术值转化为描述性语言
- 按照DESIGN.md结构组织信息
生成文件：
- 在项目目录中创建
```
DESIGN.md
```
- 严格遵循指定格式
- 确保所有颜色代码准确无误
- 使用富有感染力的、设计师友好的语言

Best Practices

最佳实践

Be Descriptive: Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
Be Functional: Always explain what each design element is used for
Be Consistent: Use the same terminology throughout the document
Be Visual: Help readers visualize the design through your descriptions
Be Precise: Include exact values (hex codes, pixel values) in parentheses after natural language descriptions

注重描述性：避免使用“蓝色”或“圆角”等通用术语。使用“深海般的蔚蓝色（#0077B6）”或“柔和的弧形边缘”
注重功能性：始终说明每个设计元素的用途
保持一致性：在整个文档中使用相同的术语
注重视觉化：通过你的描述帮助读者直观想象设计
注重精确性：在自然语言描述后，用括号包含精确值（十六进制代码、像素值）

Tips for Success

成功技巧

Start with the big picture: Understand the overall aesthetic before diving into details
Look for patterns: Identify consistent spacing, sizing, and styling patterns
Think semantically: Name colors by their purpose, not just their appearance
Consider hierarchy: Document how visual weight and importance are communicated
Reference the guide: Use language and patterns from the Stitch Effective Prompting Guide

从大局入手：在深入细节之前，先理解整体美学风格
寻找模式：识别一致的间距、尺寸和样式模式
语义化思考：根据用途而非外观为颜色命名
考虑层级结构：记录视觉权重和重要性如何传达
参考指南：使用Stitch有效提示指南中的语言和模式

Common Pitfalls to Avoid

需避免的常见误区

❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
❌ Omitting color codes or using only descriptive names
❌ Forgetting to explain functional roles of design elements
❌ Being too vague in atmosphere descriptions
❌ Ignoring subtle design details like shadows or spacing patterns

❌ 直接使用技术术语而不转化（例如使用“rounded-xl”而非“大幅圆角”）
❌ 省略颜色代码或仅使用描述性名称
❌ 忘记解释设计元素的功能角色
❌ 对氛围描述过于模糊
❌ 忽略阴影或间距模式等细微设计细节