同步设计系统

如果每个屏幕都从零开始生成，你的颜色、字体和间距会在屏幕之间逐渐走样。DESIGN.md 为你的 Stitch 项目提供了一份视觉记忆。

一旦把 DESIGN.md 文件绑定到 Stitch 画布项目，你生成（stitch generate screen）或编辑（stitch edit screen）的每个屏幕都会自动遵循这些令牌和布局规则。

用 /stitch 技能生成并同步

创建并同步 DESIGN.md 最快的方式，是使用内置的 /stitch 技能（stitch agent-skills add）。你不需要手写令牌定义。

如果你在现有代码库中工作，让你的编码智能体提取当前样式并绑定到 Stitch 项目：

如果要从零开始一个新概念，描述你想要的氛围，让 /stitch 技能撰写规格并替你上传：

在幕后，该技能会在需要时把你的目录关联到 Stitch 项目，撰写 ./DESIGN.md（或 .stitch/DESIGN.md），校验结构，然后上传到 Stitch 画布。

什么样的 DESIGN.md 才算出色

无论 DESIGN.md 是由智能体撰写还是你亲手编写，都要聚焦四个最能有效引导视觉生成的关键点：

• 材质与表面隐喻 — 描述表面应有的触感（例如温暖的纸张、拉丝铝或高对比的墨色），并明确指出要舍弃什么（例如多余的状态圆点、悬浮胶囊徽章或嵌套卡片边框）。
• 带精确十六进制色值的配色方案 — 用真实的十六进制值定义背景表面、结构边框、主要强调色和文字墨色，这样 Stitch 就不必猜测。
• 字体层级 — 选定主 UI 字体、用于表格数字的等宽字体，以及从展示标题到说明文字的清晰字号阶梯。
• 空间布局与网格 — 设定目标视口宽度、4px/8px 间距节奏和内边距规则，让屏幕保持通透、对齐。

如果 Stitch 画布上已经有一个屏幕恰好呈现了你想要的效果，你也可以导出它的 HTML（stitch get screen <screen-id> --code），再让智能体把其中的 CSS 变量和字体选择整理成项目的 DESIGN.md。

从终端同步

每当你直接编辑了 DESIGN.md，就用 stitch upload design 把改动推送到 Stitch 画布：

stitch upload design DESIGN.md

如果你还没有为当前文件夹固定默认项目（stitch config set project <project-id>），请传入 -p <project-id>。上传会在 Stitch 项目上创建设计系统或更新现有设计系统，让你下一次生成就采用新规则。

将设计系统应用到现有屏幕

新屏幕会自动采用项目当前启用的设计系统。如果你想让画布上的旧屏幕换上新版 DESIGN.md 的样式，先列出项目的设计系统，再用 stitch edit screen 直接应用其中一个：

stitch find design-systems
stitch edit screen <screen-id> --design-system <design-system-id>