前段时间我看到一套特别喜欢的网页设计。黑白手绘风像一张摊开的纸。按钮、输入框、小插画、箭头、人物线稿都带着一点手作感不是标准的Saas味。我第一反应是这个风格能不能拿来做我自己的产品网站这种需求我大概率会丢给 Claude Code其实也就是交给Claude Code了。它确实会给我生成一个页面但是问题也在这里它太快冲到代码。我一看页面结构不是我想要的就只能继续修补 Prompt。这里再手绘一点那里再留白一点...改到最后我相当于隔着代码和最终页面反向猜 AI 哪里没理解我。这也是我一直觉得 AI Coding有点别扭的地方它们把「从需求到代码」这一步做得很猛但是我得先看到这个东西长什么样、得先判断风格对不对才能到下一步。根本不缺一个会写代码的AI也不担心它能不能生成一个漂亮页面缺的是在代码之前先看到这个东西是什么样会更放心交给它做。这几天试 TRAE Work 新上的 Design 模式我最强烈的感受就在这里。在开发之前给我补了一个能看、能改、能接着往下走的设计层。你可以先给它一个截图、一个想法或者一套 Figma 设计系统。它会先建立设计上下文再生成高保真页面。比如我的需求是把纸漫风复刻到我的网站里。基于这个风格【参考图片】创建一个网页帮我设计一个“AI 分身工作室”的产品目标用户是自由职业者、知识博主和个人 IP 创作者。 用户可以上传自己的文章、语音和聊天记录生成一个能写文章、回私信、整理选题、生成内容日历的 AI 分身。页面风格要有未来感但不要冰冷要像一个可靠的数字合伙人。包含 Hero 区、核心功能、使用场景、价格方案和用户评价。它会先输出产物汇总打开右侧是一个画布画布里包含页面设计、页面内容、视觉素材。在Design 里这个“产物汇总”就是它交给你的设计交付物画布里装着页面原型。画布和figma一样可以缩放、点选、继续修改。点击任何一个组件你可以直接修改位置、外观、布局、文字、字体、颜色等等。如果对整个页面不满意点击添加到对话用自然语言告诉它如何修改。当你觉得这版差不多了还能继续做页面跳转、原型连线甚至接到 Code 模式往下开发。选中页面导出- 在Code模式中开发便会跳转到Code模式下开发。这一下从脑中想法到具备设计风格的原型再到可开发页面的整个链路就顺了。◈设计上下文拒绝 AI 随机发挥除了复刻风格Design模式里最关键的是其实是「设计系统」。我一开始没太在意这个入口。因为「设计系统」这几个字听起来有点专业像设计师和大公司才会用的东西。但是它解决的是一个特别普遍的问题AI 设计能不能有统一的标准能不能解决稳定出图如果不能那它最多就是一次性的效果图每次都从头开始猜用户审美最后就变成你一直在提示词里重复交代。设计系统是一套给 AI 用的设计资料包里面包括颜色、字体、组件、图形素材、页面样式和设计规范。后面你再让它生成页面它就不是凭空发挥而是在这套视觉规则里继续做。不管你做官网、后台、App 原型还是演示页面它都有一个相对稳定的起点。目前它有几种建立设计上下文的方式。最简单的是直接用内置风格。比如 TRAE Work、TRAE、豆包、Apple、Claude、Google、Vercel 这类风格都可以直接选。第二种是风格探索。如果你没有 Figma 文件也没有现成设计系统可以先从风格探索开始直接形容你想要的风格TRAE Work 会把这些描述解析成可调用的设计上下文。比如你可以直接说我想做一个面向大学生的 AI 求职教练产品。风格要年轻、有冲劲但不要像培训机构广告更像一个可靠的职业伙伴。TRAE Work Design 会把这种描述转成设计上下文再让它往下生成页面。第三种也是我觉得最适合打工人的方式是用已有的Figma 文件。如果团队本来就有 Figma 文件或者已经有一些页面资产和设计的规格文件可以直接导入。TRAE Work 会解析文件内容从已有页面中提取颜色、字体、组件、样式规范等设计资产。我自己很喜欢 iOS 26 的视觉风格就直接在 Figma 里找了一套相关设计规范解析我把这个设计源文件导入TRAE Work 让它自动读取并解析整套设计系统从颜色、字体、间距、圆角到导航栏、Tab Bar、弹窗、Liquid Glass 按钮等核心组件再到半透明、背景模糊和层级光感等 iOS 26 设计语言是一套稳定的设计上下文出图也更加稳定。当然不只是一个「生成页面」的功能还能预览效果。到这一部分真的做到了在代码开始之前先让用户看到东西长什么样。设计系统是想做到是让AI有稳定的标准然后才能进入生产流程。你可以把一套颜色、字体、组件、图形素材和设计规范先沉淀进去。后面再生成页面AI 就不是每次重新发明一套视觉语言而是尽量沿用这套已有规则。对个人开发者来说这意味着你不用每次都从头调风格。对设计师来说这意味着 AI 生成的页面可以更接近团队已有规范不至于每次都要人工大返工。对团队负责人来说这更重要。设计资产可以被复用、被迁移、被共享而不是散落在不同 Figma、截图和 Prompt 里。◈从想法到高保真原型我试着让 TRAE Work 帮我设计一个“AI 分身工作室”的产品目标用户是自由职业者、知识博主和个人 IP 创作者。我的提示词是帮我设计一个“AI 分身工作室”的产品。用户可以上传自己的文章、语音和聊天记录生成一个能写文章、回私信、整理选题、生成内容日历的 AI 分身。页面风格要有未来感但不要冰冷要像一个可靠的数字合伙人。包含 Hero 区、核心功能、使用场景、价格方案和用户评价。差不多就是告诉它我想做一个什么产品面向谁大概要解决什么问题。没有完整 PRD没有页面结构。好多真实需求一开始就是这么模糊好多 AI Coding很容易直接冲进代码里在 Design 里它会先把这句话往页面原型上推。它把这个产品拆成具体页面补出首页、核心功能页、操作流程、内容模块甚至会顺手把页面里的文案也写出来。TRAE Work 给出的完成度比我预期高。它能很快搭出一个合理、像模像样的页面骨架各级原型页面也比较完备清晰。页面里有不少有逻辑、有交互感的细节和动效整体不更接近一个可以继续讨论和打磨的高保真原型。对于一个从脑洞到原型的场景来说这个很实用主义。当然也可以从PRD文档开始这更像真实工作。因为在团队里很多需求不是一句话来的基本是一份文档来的。我发现在有明确PRD文档下Design模式表现会更好设计稿基本在我看来一稿过解决了团队里最麻烦的对齐。到这里TRAE Design 的位置就更清楚了。它不是单纯让页面变漂亮。它是在代码之前先把需求变成一个能被看见、能被讨论、能被继续推进的东西。把这些原本散落在设计、产品、前端之间的东西收进一个可以被 AI 调用的工作流里。截图、想法、规范都是入口。设计系统Design Library是中间的生产资料。画布、页面、代码、导出物是最后的产物。不是多了一个画图工具是有了 AI 时代的设计交付层。写到这里可能很多人会想到 Claude Design。最近 Claude Design 上线了网页端和桌面端我自己也试了做原型、设计稿、Deck、一页纸、营销物料都能搞定。但我自己在网页端体验下来它目前还是一个「设计内容生成空间」它可以生成原型、幻灯片、单页材料也可以导出 PDF、PPTX、HTML 这类结果。可是至少我现在用到的网页端里没有看到一个直接把设计稿接到 Claude Code 继续开发的入口。TRAE Work Design 这次把 Design 和 Code 放在同一个产品工作流里你在 Design 里生成页面、调整画布、连原型觉得差不多了可以继续转到 Code 模式往下开发。实际用下来整体体验比较流畅各个环节基本都能跑通没有明显“中途断掉”的感觉。当然它还有进步空间。比如现在虽然已经支持多项目、多模式协作但如果某些弹窗问询出现在另一个项目里当前项目中并不能及时看到。即使侧边栏有提醒点进去之后AI 的问询有时也已经失效了。产品大大如果刷到我的文章求优化一下下