企业官网建设流程全解析

Hacker News 上有个帖子问：小团队开发者和 UI/UX 设计师，在 AI 时代到底该怎么协作？这个问题问得很实际。过去两年，AI 已经悄悄改写了前端的产出方式：设计师可以用 AI 一分钟生成整套风格稿，开发者可以用 AI 把截图直接变成可运行的页面组件。结果两边都开始焦虑：设计师担心被 AI 替代，开发者担心设计稿越来越没法照做。

这篇文章不聊概念，只聊落地。我会直接说清楚 AI 时代小团队的设计协作链路怎么搭：设计稿如何变成代码、Design Tokens 怎么作为单一事实源、Figma / Cursor / v0 / MCP 这些工具怎么接起来、批量任务怎么处理、接口能力怎么复用，以及最容易被忽略的版权和数据边界。不管你是前端开发、全栈工程师，还是团队里唯一一个既画图又写代码的人，这篇都建议收藏。

先说结论：在 AI 时代，小团队最能提升效率的做法，不是让设计师学习写代码，也不是让开发者学习设计，而是把设计系统工程化，让 AI 在“设计资产”和“可运行代码”之间做翻译。谁先把这条链路打通，谁就能用最少的人维持最高的交付速度。

1. 核心变化速览：AI 协作模式到底变在哪

传统设计协作的核心是“交接”：设计师产出设计稿，开发者照着实现。AI 时代最大的变化是，这个交接点开始模糊。

对小型团队来说，这个变化最直接的收益是：过去一个页面从设计到上线可能要走 3 到 5 个工作日，现在有了 AI 辅助，首版界面可以在几小时内出来，剩余时间几乎都花在业务逻辑和细节打磨上。

但代价也很明显：设计稿和代码之间的“翻译损耗”变小了，对设计系统一致性的要求反而变高了。没有一套清晰的 Design Tokens 和组件规范，AI 生成的代码会很快失控。

2. 传统“设计稿 → 标注 → 开发”流程的瓶颈

先看传统流程为什么在 AI 时代走不通。

2.1 交接成本高

设计师交付一个页面，通常要包含颜色、字号、间距、圆角、阴影、交互状态。这些信息在 Figma 里看着很直观，但落到开发者手里，常常要反复对照、量尺寸、问细节。一个按钮有 hover、active、disabled 三种状态，标注漏一个就是 bug。

2.2 设计稿和代码版本漂移

设计稿改了，开发还没跟上；开发改好了，设计稿又更新了。小团队没有专门的 UI 工程师来同步这两个版本，最后往往是代码领先设计稿，或者设计稿领先代码，谁都不清楚哪个是“当前真实状态”。

2.3 AI 加剧了信息差

当开发者用 AI 直接从截图生成代码时，AI 能还原布局，但很难还原设计意图。为什么这里用 12px 间距而不是 16px？为什么这个颜色是品牌色而不是某个任意值？如果项目里没有中心化的设计变量，AI 生成的代码就会充满魔法数字，后续维护成本直线上升。

所以，AI 时代的协作，本质上不是“要不要用 AI 画稿”的问题，而是“如何建立一套让 AI 也能理解的设计事实源”的问题。

3. AI 时代小团队的协作工具链全景

小团队不需要引入一整套复杂平台。下面这套工具组合，基本覆盖了从设计到代码的全部环节，按团队规模和数据合规要求可以裁剪。

3.1 设计侧：Figma AI 与设计变量

Figma 自带变量功能后，设计团队可以把颜色、字体、间距、圆角全部定义成变量。AI 在生成界面时，也可以直接读取这套变量，而不是生成一堆写死的颜色值。

更稳妥的做法是，在 Figma 里把 Design Tokens 插件装好，导出 JSON。这一步是后面所有自动化的基础。

3.2 开发侧：Cursor + v0 + AI Agent

现在开发者用 Cursor 写代码，可以直接把设计稿截图拖进对话窗口，让 AI 生成组件。v0.dev 这类工具则更适合从 Prompt 或者静态图直接生成完整页面。

需要注意，AI 生成的代码风格可能跟团队现有代码不一致，比如组件库用的是 Ant Design，AI 却生成了 Tailwind 版本。所以在工作流里，必须有一个“代码归一化”的步骤，让 AI 生成结果进入团队规范。

3.3 连接层：MCP 与自动化

MCP（Model Context Protocol）可以把设计工具、设计变量、代码仓库甚至设计评审记录接入 AI 编程助手。比如在 Cursor 里配好 MCP Server 后，AI 可以读取当前项目的 Design Tokens，也可以直接拉取 Figma 里的最新组件信息，减少“AI 瞎猜设计规范”的问题。

如果团队对设计稿外传有顾虑，还可以考虑本地部署开源 UI 生成模型或自建 MCP Server。这类本地方案的显存要求随模型规格波动，需要按本机环境测试，但好处是设计稿不出内网，数据合规压力小很多。

4. 新协作链路：从设计系统到可用代码

这一节是整个协作流程的核心，建议直接按这个链路落地。

4.1 Design Tokens 作为单一事实源

先说什么是 Design Tokens。它是一个 JSON 文件，集中存放设计规范里的所有基础值。

{ "color": { "brand": { "primary": "#3B82F6", "hover": "#2563EB", "disabled": "#93C5FD" }, "neutral": { "background": "#F9FAFB", "text": "#111827" } }, "spacing": { "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px" }, "radius": { "sm": "4px", "md": "8px", "lg": "12px" } }

这个文件由设计师维护，开发者直接使用。AI 生成界面时，也优先从这个文件里取值，而不是自己发明颜色和间距。

实际操作时，推荐用 Style Dictionary 把 Tokens 转成不同平台需要的格式：

# 安装 Style Dictionary npm install -g style-dictionary # 初始化配置 style-dictionary init # 构建，输出 CSS / SCSS / Tailwind 等格式 style-dictionary build

这样设计改一个品牌色，所有平台和 AI 生成上下文都会同步更新。

4.2 组件库与 Storybook 文档化

Design Tokens 管的是基础样式，组件库管的是业务单元。每个组件都应在 Storybook 里有一份描述，包括用途、参数、交互状态。这些描述同时是 AI 生成代码时的上下文。

比如一个 Button 组件的描述可以是：

Button 组件 - 用途：页面主要操作入口 - 变体：primary / secondary / ghost / danger - 状态：default / hover / active / disabled / loading - 尺寸：sm / md / lg - 使用 Design Tokens 中的 color.brand.primary 作为主色 - 点击后必须调用传入的 onClick 回调

开发者把这段描述贴给 Cursor 或 v0，AI 生成的组件基本不会跑偏。

4.3 AI Prompt 驱动的界面生成与验收

有了 Design Tokens 和组件描述，AI 生成界面的质量会明显提升。一个推荐的 Prompt 结构是：

请根据以下规范生成一个用户管理页面的 React + Tailwind 组件： 1. 使用项目里的设计变量（参考 /src/tokens.json） 2. 页面包含：搜索栏、用户表格、分页器、导出按钮 3. 表格列：用户名、邮箱、角色、状态、注册时间、操作 4. 状态标签使用 green / red / gray 三种颜色 5. 组件风格参考现有 Button、Input、Table 组件的实现 6. 响应式：窄屏时表格横向滚动

关键点是：不要让 AI 自由发挥设计系统。先给它约束，再让它生成。

4.4 Figma 到代码的自动化

如果团队还在 Figma 里维护设计稿，可以考虑用 Figma REST API 拉取组件信息，配合 AI 生成代码。下面是一个通用示例，具体参数需要按实际项目和 Figma 文档调整：

# 获取 Figma 文件信息，需要替换 FILE_ID 和访问令牌 curl -H "X-Figma-Token: YOUR_FIGMA_ACCESS_TOKEN" \ "https://api.figma.com/v1/files/FILE_ID" > figma_file.json

拿到文件 JSON 后，可以再用脚本提取画板节点、组件属性，生成供 AI 使用的结构化描述。这套链路的好处是，设计师改完稿，开发者可以直接触发同步，不用手动截图和贴图。

5. 批量任务与接口能力：设计资产的工程化

小团队跟大团队不同，没有专门的人维护设计资产管道。所以，批量任务最好用脚本一次性解决，而不是每次手动操作。

5.1 批量同步 Design Tokens

当设计师在 Figma 里更新了品牌色，可以通过 Tokens Studio 导出 JSON，然后放到代码仓库里。如果想让这个过程更自动化，可以写一个简单的同步脚本：

# 设计 tokens 同步示例：从本地 JSON 生成 CSS 变量 import json with open("tokens.json", "r", encoding="utf-8") as f: tokens = json.load(f) css_lines = [":root {"] def walk(node, prefix): for key, value in node.items(): if isinstance(value, dict): walk(value, prefix + key + "-") else: css_lines.append(f" --{prefix}{key}: {value};") walk(tokens, "") css_lines.append("}") with open("tokens.css", "w", encoding="utf-8") as f: f.write("\n".join(css_lines)) print("tokens.css generated")

这个思路可以扩展成 CI/CD 里的一个步骤：设计侧推送新 Tokens，流水线自动构建 CSS 文件，开发者拉取最新代码即完成样式同步。

5.2 批量导出图标与图片资源

AI 时代，图片资源的管理依然重要。推荐把项目里所有图标统一放在一个目录，并用脚本批量处理：

# 批量将 SVG 文件转为 React 组件，具体工具按项目选型 npx @svgr/cli --out-dir src/components/icons assets/icons

这样设计侧新增一个图标，开发者跑一次命令，AI 助手就能直接引用组件化的图标。

5.3 接口能力：AI Agent 如何接入设计数据

如果团队配置了 AI Agent 做重复性开发任务，建议把 Design Tokens、组件描述、Storybook 文档都暴露为可读取的资源。这样 Agent 在生成代码时，会自动优先使用现有设计资产，而不是凭空生成一套新样式。

一个通用的 MCP 配置片段如下，具体参数需要按实际环境调整：

{ "mcpServers": { "design-tokens": { "command": "node", "args": ["/path/to/design-tokens-server/index.js"], "env": { "TOKENS_FILE": "./tokens.json" } } } }

配好之后，把连接信息填到 Cursor 或支持 MCP 的编程工具里，AI 就能在编码时主动读取设计规范。这比手动把样式贴在 Prompt 里更稳定。

6. 一条可落地的小团队协作工作流示例

下面用一个 CRM 用户管理页举例，串起整个流程。

6.1 阶段一：需求对齐

产品和开发先确认页面功能，列出必须包含的模块：搜索、筛选、用户表格、批量操作、分页。

这一步不要急着让设计师画图，先让 AI 生成一个低 fidelity 原型，帮助团队统一认知。

6.2 阶段二：设计探索

设计师在 Figma 里用 Design Tokens 搭出界面。重点不是每个像素，而是明确交互状态和边界情况：搜索为空时展示什么，表格有 500 条数据时分页策略是什么。

6.3 阶段三：开发实现

开发者把设计稿截图丢给 Cursor 或 v0，要求 AI 严格参照项目组件库和 Design Tokens 生成代码。生成后，开发者做三件事：

1. 检查代码里有没有写死的颜色值和间距，有则替换为 tokens。
2. 检查组件是否复用现有 Button、Table、Modal。
3. 补上业务逻辑和接口调用。

6.4 阶段四：验收交付

设计师不用盯每个页面，只需要重点审三个点：品牌色和圆角是否一致、关键交互是否符合设计意图、暗色模式是否有明显问题。其余细节交给开发者在浏览器里自查。

这套流程跑通后，一个中型后台页面从需求到上线，通常可以控制在一天内完成首版，设计和开发并行，不再互相等待。

7. 资源占用与性能观察：AI 工具链不是免费的

虽然这里不是本地部署大模型，但 AI 协作工具链同样需要观察资源占用。这对小团队很现实，因为开发机往往是日常主力机，同时跑着 IDE、浏览器、Figma、Docker、本地模型进程。

7.1 浏览器内存是主要瓶颈

Figma 本身就是网页应用，打开一个大文件可能占用 1GB 以上内存。加上 AI 生成工具的网页版、Cursor、设计预览，Chrome 或 Edge 的内存占用会非常夸张。性能观察时，重点看浏览器任务管理器：

• 任务管理器里哪个 Tab 占用内存最高。
• 关闭不用的设计预览页面，而不是一直挂着。
• Figma 的原型播放模式不要同时开多个。

7.2 本地 AI 插件的资源占用

Cursor、Copilot 这类工具在索引代码仓库时会持续占用 CPU 和磁盘 IO。首次打开大项目时，建议先让索引跑完再开始写代码，避免一边索引一边生成导致的卡顿。

如果团队使用本地 AI 模型做 UI 生成或私有化部署，要格外关注显存占用。显存占用和生成分辨率、步数、批量大小直接相关，需要按本机环境实测。通常更稳妥的做法是先跑一个小分辨率样本，确认推理速度可接受再投入正式任务。

7.3 如何降低资源压力

给一个可以直接执行的建议：

1. Figma、Cursor、浏览器分别使用不同工作区，减少相互干扰。
2. 高频使用的代码仓库保持本地路径固定，减少 AI 助手的索引范围。
3. 不必要的 AI Agent 定时任务不要常驻后台，按需启动。
4. 尽量使用云端 AI 生成一次性界面方案，本地只保留最终代码。

8. 常见问题与排查方法

AI 协作工具链常见问题基本集中在三类：设计数据同步失败、AI 生成结果不符合规范、开发环境资源不足。

排查时建议按“先看日志、再看配置、最后看数据”的顺序来，不要一上来就改代码。

9. 最佳实践与合规边界

AI 协作流程跑通之后，有几条边界必须提前划清楚。

9.1 设计稿和数据合规

团队的设计稿如果包含客户信息、内部业务数据，不要随意粘贴到云端的 AI 生成工具里。优先使用支持私有化部署或明确承诺数据隔离的方案。本地部署 AI 模型时，同样要确保模型文件来源合法，运行环境不暴露到公网。

9.2 版权与授权边界

AI 生成界面时可能用到第三方字体、图标、插画素材。这些素材的授权范围直接决定能否用于商业项目。字体要买授权，图标要确认是开源还是商业可用的，AI 生成的图片如果模仿了某个特定设计师的风格，也要慎重评估使用场景。

9.3 角色和决策权

设计系统最终由谁负责，AI 生成的界面由谁验收，必须明确写进流程。最怕出现“AI 生成了，开发用了，设计不满意又不敢推翻”的灰色地带。小团队里，设计负责人通常是最终把关人，开发者则对可维护性负责。

9.4 保留人工审核环节

AI 可以加速生成，但不能替代设计评审。关键页面的每一次需求变更，都应该有设计侧和开发侧两个角度的确认记录。批量生成的设计稿尤其需要抽检，避免 AI 生成的界面在视觉上统一，但实际输出中夹杂着不一致的组件状态或无效的交互逻辑。

10. 总结与建议

回到 HN 那个问题。小团队开发者和设计师在 AI 时代怎么协作？答案不是谁替代谁，而是把设计工作流变成一套可编程的资产管道：设计师维护 Design Tokens 和组件规范，开发者负责业务实现和工程化，AI 在两个角色之间充当翻译和执行者。

最值得先做的一件事，是把你项目里的颜色、间距、字体、圆角全部抽取成 tokens.json，并且让 AI 生成代码时严格使用这套变量。这一步做完，后续所有 AI 工具都会变得更可控。

最容易踩的坑有两个：一是没有设计变量约束，AI 生成的代码充满魔法数字；二是把设计稿随意上传到不保证数据隔离的 AI 服务。这两个问题都会在项目中期集中爆发。

后续可以继续扩展的方向包括：把 Design Tokens 接入 Storybook、在 CI 里集成 AI 生成的视觉回归测试、用 AI Agent 自动处理设计稿变更通知。建议先跑通一条最小链路，再逐步加自动化环节。这套流程值得花时间搭，因为它是小团队在 AI 时代最持久的生产力来源。