企业官网建设流程全解析

前段时间，我看到一套特别喜欢的网页设计。

黑白手绘风，像一张摊开的纸。按钮、输入框、小插画、箭头、人物线稿，都带着一点手作感，不是标准的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 的问询有时也已经失效了。

产品大大如果刷到我的文章，求优化一下下～