以 skill 自身的术语
通过 MCP 工具管理在 Stitch 中充当项目单一信息源的设计系统。它检索项目元数据和屏幕资产(list_projects、list_screens、get_screen、read_url_content),通过 design-md skill 从现有屏幕合成 token,或根据纯文本描述合成 token,写入 .stitch/DESIGN.md,然后上传该 markdown 并调用 create_design_system_from_design_md。
在上传任何内容之前,都有一个硬性检查点,需要用户批准显示名称、颜色、字体和圆角。创建完成后,apply_design_system 仅使用屏幕实例 id,将 token 推送到现有屏幕上,.stitch/metadata.json 会记录项目、屏幕以及设计系统摘要。
它产出什么
- 为该项目生成的 DESIGN.md 设计文件。
- 一个 .stitch/metadata.json 文件,用于跟踪项目 id、标题、所有已知屏幕以及设计系统摘要。
- 保存在 Stitch 内部的项目级设计 token,后续生成提示无需重复声明这些内容。
工作方式
- 01检索项目和屏幕资产
list_projects 找到目标 projectId,list_screens 呈现具有代表性的屏幕,例如 Home 或 Main Dashboard,get_screen 返回截图和 htmlCode 下载 URL,随后再获取 HTML。
- 02合成设计系统
现有屏幕通过 design-md skill 进行解读;全新项目或直接给出的描述,则先将用户宽泛的措辞映射为精确的值。
- 03上传 DESIGN.md 并创建设计系统
推荐使用的上传脚本会在进程内对该 markdown 进行 base64 编码,并将其发送到项目的 batchCreate 端点,从而绕过输出 token 限制;随后 create_design_system_from_design_md 会使用 projectId 和返回的屏幕实例运行。
- 04将系统应用到现有屏幕
apply_design_system 接收 projectId、assetId 以及一份屏幕实例列表,使已构建的屏幕采用所存储的 token。