摘要
作为设计师，我一直在思考如何让 AI 真正融入设计工作流，而不是只停留在"生成图片"的层面。这篇文章记录了我用 TRAE SOLO 将已有的设计资源（Figma 链接、设计稿截图、标注文档等）快速转化为结构化的 design.md 文件的完整过程。这份 md 文件不仅是设计交付的"桥梁文档"，更是后续 AI 辅助开发、自动化走查、设计系统维护的核心输入。从设计到代码，从沟通到协作，一个 md 文件打通了整个链路。
背景
做为ux设计师,你是否熟悉以下场景:
领导给了需求,让先出几个图看看效果
做设计走查的时候总担心有遗漏
换了新同事，要花大量时间口头传达设计规范和组件用法
核心痛点：设计资源散落在各个工具里，缺乏一份统一的、机器可读的、人也可读的设计描述文档。
在这里我将通过Trae,手把手带大家把ai融入工作流,欢迎大家一起讨论!本次先分享设计资源转design.md,方便后续内容复用
实践过程
第一步：整理你的设计资源
在开始之前，先准备好你手头的设计资源。不需要特别复杂，以下任一途径都可以：
- design system的设计网站链接(例如ant design、devui等)
- design system的设计文件链接(例如figma设计文件)
- 产品的设计稿
补充说明：其实方法途径有很多,但是列出的前两者在结构和内容上都相对完善,更适合实际落地.产品设计稿中提取design.md,更适合初创团队,产品先行,还未来得及搭建design system的情况
第二步：用Trae生成 design.md
打开 TRAE，将你的设计资源的链接给它，并使用类似以下的 Prompt：
请通过链接提炼design system的组件规范,做成design.md
design.md结构参考设计文件结构,先给我md内容结构,我确定好后再填充内容.
允许你向我提问,用于完善md内容
Trae运行期间会向你提问用于调整内容,注意点击.这样你就会得到一个结构完整的高质量design.md
Prompt 技巧：
如果想让design.md内容更加细致齐全贴合公司设计规范,那一定要在提示词中说明让ai基于已有的实际系统的结构进行创建
恭喜你创造了design.md!还记得那个场景吗“领导给了需求,让先出几个图看看效果”
我们快速的解决一下
「使用展示」让Trae基于design.md生成PC端营销费用表单页
补充说明:生成的页面为代码开发效果,包含交互.如果想让页面更加符合实际工作中的设计规范,可以多论微调,或提供完整的需求做补充.到这里有没有解决让你出几版看看效果的困扰呢?
疑问解答
我在截图案例里展示的是通过设计规范的figma设计稿生成design.md的:
figma是目前我尝试的唯一能够在trae中读取文件数据的免费的设计工具.
mastergo的mcp接入需要设计工具开通付费版本.
pixso mcp接入正常,但文件读取上有问题目前只能依靠ai对文件内容截图识别,准确性较差.
关于pixso mcp的问题,如果有人能处理,欢迎补充讨论.
如果有兴趣,我在评论区补充figma mcp免费接入Trae的方法
下篇预告:用skill跑通设计稿批量走查,减轻自查负担.
如何把设计稿自查交付给ai,替设计师减轻负担,提升效率
