AI 编程系列③：工程化落地——让 AI 按规矩办事
AI 编程系列③：工程化落地——让 AI 按规矩办事
前两篇聊了工具选型和协作方法论。
这一篇讲具体的工程落地——UI 开发有哪些实用技巧，以及怎么通过配置让 AI 始终按你的规范干活。
这些都是我在实际项目里摸出来的，不是理论，是真的用过、有效的。
一、UI 开发的几个实战技巧
1. 先画线框图，再写代码
做新功能或 UI 升级时，我现在的习惯是先让大模型用 SVG 画一个线框图。
确认线框图符合预期后，再开始具体开发。
这一步看起来多余，但能省掉大量返工。AI 写代码很快，但方向跑偏了再改，成本比一开始多花五分钟对齐要高得多。
2. 所见即所得：指哪打哪
现在很多 AI 编程工具都集成了浏览器。你可以直接在页面上选中某个元素，然后提交 Prompt 进行修改。
原理很简单：工具会把你选中元素的 HTML 代码作为上下文，和你的提示词一起发给大模型，修改的精准度自然更高。
• Cursor 自带浏览器功能，可以直接用 • 命令行工具可以装 StateWise、SDAG、EWS 这类插件实现类似效果
3. 统一设计规范
AI 生成的 UI 有一个高频问题：样式不一致。
表单长一个样，按钮长另一个样，看着就不像一个系统出来的东西。
解决方案是把 UI 设计规范写进 CursorRules 或 CLAUDE.md，让 AI 学习并遵守。表单、列表、按钮、图表、菜单——全局统一，一次配置，长期受益。
4. 产品经理请建立自己的原型库
我强烈建议每一位产品经理打造一个自己的原型工程，把每个小原型都通过工程化的方式管理起来。
好处有两个：
• 积累组件库：初期把基本版本完成后，后续的原型设计会越来越快，规范统一也变得简单 • 提升沟通效率：一个可交互的产品原型，比纯文字方案清晰太多，更容易和团队达成共识
甚至可以把原型工程部署到线上，让团队成员随时访问，彻底告别"你本地跑一下给我看看"的尴尬。
二、工程配置：让 AI 按规矩办事
对于一个真正要上生产的工程，有几项配置是必须做的。
前期花时间配好，后面会省很多力气。
CursorRules / CLAUDE.md 里写什么？
一般包含四个方面：
- 部署、编译、发布的基本命令和框架
- 与 AI 对话的基本原则（比如用中文回复、表达要专业）
- 项目的架构规范（目录结构、模块划分）
- 编码规范（命名规则、代码风格）
这些规范不只是给 AI 看的，也是减少代码腐化、让其他人能读懂你代码的重要手段。
Command：把常用操作变成快捷键
每次敲重复的提示词很烦。你可以把常用流程配置成 Command：
• 完成功能后，一键提交代码、写注释、Push 到远端 • 把特定角色的要求和规范封装成命令 • 把常用的长 Prompt（比如 AI 优化提示词）配置成缩写
本质就是把一个很长的命令，变成一个快捷方式。
配好之后，那种"一个指令搞定一套流程"的感觉，真的很爽。
下一篇是系列收尾，聊进阶自动化——Sub-Agent、Skill、Hook 的玩法，以及一个 AI 端到端交付项目的完整案例。