设计师的第一份 AI 协作文档:把设计资源变成 design.md,用 AI 重新定义设计工作流

做为设计师,你是否熟悉一下场景:

• 领导突然丢过来一个需求，说”先出几个图看看效果”——你打开 Figma，从零开始画，半天过去了，领导说”感觉不对，再做几版”。

• 做设计走查的时候，你拿着检查清单逐项核对，心里总嘀咕：有没有漏掉什么？

• 新同事入职，你花了整整一下午口头讲解设计规范和组件用法——下周他问你”这个按钮用哪个组件”，你差点心梗。

本篇我将分享用Trae SOLO把已有设计资源快速转化为结构化 design.md 的完整过程。这份 md 文件不仅是设计交付的”桥梁文档”，更是后续 AI 辅助开发、自动化走查、设计系统维护的核心输入。

第一步：准备设计资源

开始前，先准备好手头的设计资源。不需要特别复杂，以下任一途径均可:

• Design System的设计网站链接（例如 Ant Design、DevUI 等）

• design system 的设计文件链接（例如 Figma 设计文件）

  

• 产品的figma设计稿(从产品设计稿中提取 design.md，更适合初创团队——产品先行，还未来得及搭建 design system 的情况。)

 补充说明：方法途径有很多，但前两者在结构和内容上都相对完善，更适合实际落地。

第二步：生成 design.md

打开 TRAE，将你的设计资源链接给它，使用类似以下的 Prompt：

请通过链接提炼 design system 的组件规范，做成 design.md。design.md 结构参考设计文件，先给我md内容结构，我确定好后再填充内容。你可以向我提问，用于完善md内容。

Trae 运行期间会向你提问用于调整内容，注意点击确认。这样你就会得到一个结构完整的高质量 design.md。

 Prompt 技巧：如果想让 design.md 内容更加细致齐全、贴合公司设计规范，一定要在提示词中说明让 AI 基于已有的实际系统的结构进行创建。

 恭喜你创造了 design.md！还记得那个场景吗——”领导给了需求，让先出几个图看看效果”。我们快速解决一下。

「使用展示」基于 design.md 生成 PC 端营销费用表单页

把 design.md 丢给 Trae，让它基于这份规范直接生成页面代码。生成的页面包含交互，不是静态图片，是可运行的前端代码。

如果想让页面更加符合实际工作中的设计规范，可以多轮微调，或提供完整的需求做补充。这里我Trae提出了顶部步骤条的修改,Trae按照ant design.md进行修改:

到这里，有没有解决快速出效果图的困扰呢？

问题补充

我在截图案例里展示的是通过 Figma 设计稿生成 design.md 的。关于设计工具在Trae的接入现状，实测结果如下：

• Figma:我尝试的唯一能够在 Trae 中读取文件数据的免费设计工具。

• Mastergo:MCP 的接入需要开通Mastergo的付费版本。

• Pixso:MCP 接入正常，但文件读取上有问题，目前只能依靠 AI 对文件内容截图识别，准确性较差。关于 Pixso MCP 的问题，如果有人能处理，欢迎补充讨论。

下篇预告：用 skill 跑通设计稿批量走查，减轻自查负担

如何把设计稿自查交付给 AI，替设计师减轻负担、提升效率——这是下一篇要聊的。如果你也被”走查怕遗漏”困扰过，咱们下篇见。