从疯狂翻车到渐入佳境我花了三个月。今天把这些坑和心得全抖出来。那天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。结果——设备数不准趋势是假数据地图颜色乱订单没校验报警不能下钻。后来我学会「分步法」先做框架分区设备状态区 → 验证通过 →加全国生产网络 → 验证通过 →加注塑趋势图 → 验证通过 →加订单进度和物流告警 → 验证通过 →加报警事件和下钻 → 验证通过每一步验收完再继续错误就不会层层累积。踩坑 6一个让我打字速度「退步」的发现你们知道给 AI 描述一个复杂页面需要打多少字吗我数过按我上面说的标准大概 200-300 字。用键盘敲我要 2-3 分钟。后来我试了一下微信语音输入法——对着手机说一遍需求十几秒搞定。AI 自动整理成有条理的文字我再花 1 几秒扫一眼确认直接发给模型。语音输入速率 150-200 字/分钟键盘 40-80 字/分钟。差 3-5 倍。而且说话的时候你更自然上下文会说全不像打字时容易省略。这对 AI 理解需求反而是加分项。第三课5 个页面 5 种画风老板问我是不是外包的踩坑 7没有设计约束AI 就是在创作艺术这是最让我社死的一件事。系统有 4 个页面首页仪表盘、用户管理、订单列表、客户详情。因为我每次都是独立对话独立生成模型每次都是「自由创作」。结果——仪表盘是蓝色系的用户管理是绿色的订单列表是灰色系的客户详情是紫色的。旁边同事沉默了三秒问「这些页面……是一个系统吗」从那以后我坚定了一件事必须给 AI 一份「设计宪法」。设计 Skill 就是干这个的——一份定义好色彩、字号、间距、圆角、阴影、组件样式的规则文档。每次生成页面前AI 都会先读这份东西保证所有页面的视觉语言统一。我的三种获取方式搬企业已有的设计规范最好用把内部视觉规范抽象成 SkillAI 生成的页面直接和公司其他系统长一样。用成熟设计系统当基线Ant Design、Material、Arco Design 都行至少不会「丑得原创」。让 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 就不再是「碰运气」而是一种稳如老狗的工程能力。共勉。