---
title: "AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统 | 行开心的颠倒世界"
description: "没有 design system，agent 每屏都在重新猜审美，hex 色值堆到 19 个。它是给 agent 的约束，不是给人看的文档。先在设计工具里把字体、颜色、组件定死，再 handoff 给 agent——这就是前端的 Spec：先定系统，后写代码。"
canonical: "https://xingkaixin.me/posts/ai-frontend-design-system-handoff/"
language: "zh-CN"
---

# AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统

没有 design system，agent 每屏都在重新猜审美，hex 色值堆到 19 个。它是给 agent 的约束，不是给人看的文档。先在设计工具里把字体、颜色、组件定死，再 handoff 给 agent——这就是前端的 Spec：先定系统，后写代码。

2026年7月6日·1,014 字·3 分钟

[AI编程](https://xingkaixin.me/tags/AI%E7%BC%96%E7%A8%8B/)[前端](https://xingkaixin.me/tags/%E5%89%8D%E7%AB%AF/)Design System[Spec](https://xingkaixin.me/tags/Spec/)

![AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统](https://xingkaixin.me/cover/ai-frontend-design-system-handoff.webp)

后端我一个下午能搭完：鉴权、数据层、API 路由，我描述需求，agent 全包了。前端是它垮掉的地方。每个页面单独看都能跑、都没毛病，凑到一起，像四个互不认识的人各做了一屏。

很多人到这一步的反应是：模型审美不行。

做 design-system-first 工具 Moonchild 的团队把话说得很干脆：**没有 design system 的团队，得到的就是随机 UI。**

模型在像素级别做生成，是因为它没有别的东西可对照。这里挑个颜色，那里定个间距，中间没有任何东西把它们绑在一起。它不是没品味，是你没给它一把尺子。

## 给它一套系统，差别有多大

在 X 上分享这个实验的开发者 @Mnilax 干了件实在事：同一个项目，一个监控 AI 应用的分析看板，十个页面，做两遍。一遍让 Claude Code 自己猜，一遍让它读一套提前在 Moonchild 里做好的 design system。

结果：首次生成就 on-brand 的页面，从 2/10 涨到 9/10。重新调样式的时间，从大约 6 小时降到 40 分钟。它自己瞎编、而不是复用的一次性 hex 色值，从 19 个降到 0。

注意那 19 个色值。没有系统时，agent 每做一屏都在重新发明一遍轮子——重新选一个它觉得还行的蓝，下一屏再选一个差不多但不一样的蓝。你以为你在让它”做前端”，其实你在让它一次次重新猜你的审美。你花在”再帮我统一下样式”上的那 6 个小时，本质是在替它的发散买单。

![有系统与没系统的差别](https://xingkaixin.me/posts/images/ai-frontend-design-system-handoff/ai-frontend-design-system-handoff-01.webp)

## 我自己是怎么做的

这套逻辑我已经固化成流程了。不管是从零做一个新东西，还是想把已有项目做整体的前端样式 + 交互逻辑改造，我都先进 Claude Design（这一步的工具我目前最认可它）。

如果是已有项目，就让它先提取现有代码库，在这个基础上重新设计一套新的 design system。如果是全新的，就给它一个概念，或者直接丢一套我已有的 design system 给它，或者让它从头设计一套。

关键的一步在这：**我会先把 design system 整个敲定。** 字体、主色、强调色、各类 UI 组件的样式，全部定死。在 Claude Design 里把方案评估完、细节调到我满意，这一整套先收口。

等系统全部敲定，我才 handoff 给 coding agent 去做具体开发。给谁都行——Claude Code、Codex、别的 coding agent 随你。它们这时候是在一套已经定死的系统约束下写代码，而不是边写边猜审美。

这套流程换来的就两个字：可控。

![先定系统再 handoff 给 coding agent](https://xingkaixin.me/posts/images/ai-frontend-design-system-handoff/ai-frontend-design-system-handoff-02.webp)

## 这其实就是前端的 Spec

我一直在写一件事：约束 agent 的不是更聪明的 prompt，是提前固化的意图。后端我让它先有验收标准再动手，前端是同一个道理——design system 就是前端的 Spec。

字体、颜色、间距、组件，这些东西如果你不提前定死，就会变成每次对话里临时口述的风格要求。口述的东西 agent 每次理解都略有偏差，于是你得到四个互不认识的人各做一屏。把它写成一套它能反复对照的系统，风格就从”每轮重新解释”变成了”一次性定死的合同”。

发散最厉害的环节——风格和交互——被你提前收口了，剩下的实现才稳得住。

## 落点

别再指望靠 prompt 把审美讲清楚。design system 在这里是给 agent 的约束输入，不是一份摆着给人看的规范文档。

先在专门的设计工具里把系统整个敲定，再 handoff 给 coding agent 实现。顺序别反——先定系统，后写代码。把最容易跑偏的那一步提前固化成合同，你才拿得回控制权。

## 版权声明

作者

XingKaiXin

标题

AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统

发布时间

2026年7月6日

文章链接

[https://xingkaixin.me/posts/ai-frontend-design-system-handoff/](https://xingkaixin.me/posts/ai-frontend-design-system-handoff/)

本作品采用[CC BY-NC-ND 4.0 DEED](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh-hans)许可。

导览

展开导览