从疯狂翻车到渐入佳境，我花了三个月。今天把这些坑和心得全抖出来。

那天，AI 给我上了一课

事情要从几个月前说起。

公司要做一个内部管理系统，页面不少，人手不够。我正在用的活字格刚上线了一个 React AI 单元功能——简单说就是可以用自然语言直接生成前端页面。我当时想：这不就是动动嘴的事吗？

于是我打开对话框，信心满满地敲下第一行字：「做一个员工管理页面」。

十几秒钟后，AI 给了我一个页面。

怎么说呢……确实是个页面。但你要问我满不满意——它像一个刚学前端的大二学生的课程作业。表格没有分页，搜索栏不知道在哪，字段名是英文的，配色一言难尽。

那天晚上我复盘了一下，发现一个扎心的事实：问题不在 AI，在我。

从那天起，我开始系统性地研究「怎么让 AI 写出好前端 UI」。三个月，100 多个页面，踩了无数坑，终于摸索出一套稳定可复现的方法论。今天就把它完整分享出来。

第一课：选模型这事，我是真吃过亏

踩坑 1：在「弱模型」上死磕了一个下午

我最早用的是某个免费模型（名字就不提了，反正带一个 flash）。需求是做一个带多条件筛选的订单列表页。

第一版，字段对不上。第二版，分页组件的逻辑是反的。第三版，筛选条件居然互斥了——选了日期就不能选状态。我来回改了七八次，一个下午过去了，页面还是没法用。

后来换了 GLM-5.2，同样的需求描述，一遍过。那一刻我真的破防了。

这件事教会我：不同模型在前端代码生成上的能力差距，比你能想象的大得多。三个维度差异明显：

• 首次生成质量：强模型给的代码结构完整、样式合理，弱模型连组件层级都理不清。
• 精准修改能力：你说「只改表格第 3 列」，强模型精准定位，弱模型动不动把整页布局改乱。
• 复杂需求理解：涉及数据联动、动态交互时，强模型和弱模型简直不是同一个物种。

经过大量实测，我现在的模型清单是：

现在每季度重新评估一次模型，新模型出来就试。在弱模型上死磕，纯属浪费生命。

踩坑 2：跟 AI 聊太久，它「累了」

有一次我已经跟 AI 聊了快 20 轮，中间改过字体、调过间距、换过配色。然后我说：「帮我把按钮颜色改成蓝色」。

AI 的回答是——把整个页面的所有按钮、标题、背景全改成了蓝色。

我人都傻了。后来才明白：长对话的上下文已经有几万字历史记录了，AI 被这些噪音干扰，对新指令的判断严重退化。

现在的习惯：每完成一个独立任务，新建对话。给 AI 一个干净的大脑，它立刻就清醒了。

踩坑 3：自然语言描述可太苍白了

一个让我效率翻倍的发现：让两个模型「打配合」

有一天我盯着一个外部系统的漂亮页面发呆，心想：这得写多少提示词才能复刻出来啊。

然后我灵光一闪——我把那个页面截了张图，丢给了多模态模型 Qwen3.7-Plus。几十秒后，一个长得十分像的初版就出来了。

这个效果，我都惊了，和上面的相比，你能看得出区别吗？

接着我切换到文本模型 GLM-5.2，在初版基础上逐项精修：调整卡片样式、对接数据源、加上业务逻辑。

这个工作流现在是我的标配：

截图 → 多模态模型生成初版 → 文本模型精修 → 对接平台能力

前者负责「形似」，后者负责「神似」。就像摄影里的「先构图再精修」，效率和质量双双起飞。

第二课：不会说话，AI 就是人工智障

踩坑 4：那句「做一个页面」害了我无数次

回想我最早写的那句「做一个员工管理页面」，AI 能怎么办？它只能猜。猜你喜欢什么布局、猜你需要什么字段、猜你的分页逻辑。

猜对了是运气，猜错了是常态。

同一句话，对比一下差距：

后来我给自己定了一条铁律：提示词的信息密度，决定生成质量的上限。 我现在描述需求至少包含：

• 页面类型：这是列表页、详情页、表单页还是仪表盘？
• 核心布局：顶部有什么、中间有什么、底部有什么？左右有侧栏吗？
• 关键交互：搜索、筛选、排序、分页、行内编辑、批量操作——说清楚要哪些
• 数据字段：展示哪些字段、字段类型、有没有下拉枚举值
• 要对接的能力：要联动的数据源、命令、权限点

AI 不是读心者，你说几分清楚，它就还你几分质量。

踩坑 5：想一口吃成胖子，被噎得半死

月初领导说：「做个智能制造车间监控大屏，要有设备状态、生产网络、趋势图、订单进度、物流告警和报警明细。」

我直接丢给 AI。

结果——设备数不准，趋势是假数据，地图颜色乱，订单没校验，报警不能下钻。

后来我学会「分步法」：

1. 先做框架分区
2. 设备状态区 → 验证通过 →
3. 加全国生产网络 → 验证通过 →
4. 加注塑趋势图 → 验证通过 →
5. 加订单进度和物流告警 → 验证通过 →
6. 加报警事件和下钻 → 验证通过

每一步验收完再继续，错误就不会层层累积。

踩坑 6：一个让我打字速度「退步」的发现

你们知道给 AI 描述一个复杂页面需要打多少字吗？我数过，按我上面说的标准，大概 200-300 字。

用键盘敲，我要 2-3 分钟。

后来我试了一下微信语音输入法——对着手机说一遍需求，十几秒搞定。AI 自动整理成有条理的文字，我再花 1 几秒扫一眼确认，直接发给模型。

语音输入速率 150-200 字/分钟，键盘 40-80 字/分钟。差 3-5 倍。

而且说话的时候你更自然，上下文会说全，不像打字时容易省略。这对 AI 理解需求反而是加分项。

第三课：5 个页面 5 种画风，老板问我是不是外包的

踩坑 7：没有设计约束，AI 就是在创作艺术

这是最让我社死的一件事。

系统有 4 个页面：首页仪表盘、用户管理、订单列表、客户详情。因为我每次都是独立对话独立生成，模型每次都是「自由创作」。

结果——仪表盘是蓝色系的，用户管理是绿色的，订单列表是灰色系的，客户详情是紫色的。

旁边同事沉默了三秒，问：「这些页面……是一个系统吗？」

从那以后我坚定了一件事：必须给 AI 一份「设计宪法」。

设计 Skill 就是干这个的——一份定义好色彩、字号、间距、圆角、阴影、组件样式的规则文档。每次生成页面前，AI 都会先读这份东西，保证所有页面的视觉语言统一。

我的三种获取方式：

1. 搬企业已有的设计规范（最好用）：把内部视觉规范抽象成 Skill，AI 生成的页面直接和公司其他系统长一样。
2. 用成熟设计系统当基线：Ant Design、Material、Arco Design 都行，至少不会「丑得原创」。
3. 让 AI 反向提取你喜欢的设计：把你觉得好看的页面截图丢给 AI，让它自己总结出一套风格，再用这套风格生成所有页面。我的仪表盘就是这么来的——对着一个喜欢的系统截了张图，AI 自动提取出配色、字号、间距体系，后来所有页面都是这个调性。

比如这个页面就是用上面一个页面的设计 skill 在活字格里生成的：

一份合格的设计 Skill 要包含：主色与辅色色值、字号字重体系、间距档位（4/8/12/16/24/32）、圆角与阴影层级、按钮表单表格弹窗的默认样式。

写完别急着直接用，先在一个页面验证，确认视觉对味了再铺开。

第四课：AI 在干活，你在发呆？那可太亏了

踩坑 8：全程陪伴型编程不可取

早期我的工作流是：提需求 → 盯着进度条 → 等结果 → 提下一个需求。

后来我发现这纯粹是浪费时间。AI 生成一个页面要几十秒到几分钟，这段时间我完全可以做别的。

现在我的节奏是这样的：一次性给 3-5 个页面提需求，全部丢后台生成，然后我在前面做手工配置。 AI 生成完一个，Windows 会弹通知提醒我，我切过去验收，验收完继续做自己的事。

活字格的设计器里，任务列表能同时看到所有运行中和已完成的任务。人机两条线并行推进，等待时间几乎为零。

写在最后

本文内容基于活字格 React AI 单元格插件的实战经验总结，所述方法与原则适用于所有 AI 前端开发场景。

三个月前，我以为 AI 写前端就是「说一句话，得到一个页面」。现在我知道了，这中间的差距，就在这 12 条细节里：

维度	踩过的坑	现在的方法
模型	弱模型上死磕、长对话 AI 变傻、只用一种模型	选强模型、新对话、多模态+文本打配合
需求	描述笼统、忘加约束、一口吃胖子、没给上下文	高信息密度提示词、负向约束、分步验证、业务上下文、语音输入
设计	每页一个风格，老板以为外包的	设计 Skill 统一视觉语言
效率	盯着进度条发呆	后台并

AI 不是替代你的思考，而是放大你的思考。 你对细节的把控有多深，AI 的产出就有多好。

当这些习惯变成肌肉记忆，AI Coding 就不再是「碰运气」，而是一种稳如老狗的工程能力。

共勉。