AI Coding的正确范式 #8
Description
Tip
相当于用自然语言把代码的执行流程（伪代码粒度）口述出来让AI去照着执行，而不是笼统的一句话描述，然后当甩手掌柜。实际上AI只是单单做了最不重要的Coding这一步。
实现：人类设计 -> AI 实现 -> 人类验收。
示例：
完整链接：https://mp.weixin.qq.com/s/ql8op9iikDwBDgPSiDlNCg
缺点和挑战
- 架构设计能力：你必须能将一个复杂的功能精准地拆解成一个个独立的、可执行的、逻辑清晰的微任务。这要求开发者具备强大的系统设计和抽象思维能力。
- 清晰的表达能力：你需要用无歧义的自然语言，将脑中的技术方案精确地传达给 AI。正如文末所说，“脑子想到的事情很难清晰地表达出来”。
- 代码审查能力：虽然你不用亲自写每一行代码，但你必须具备足够的技术深度，去审查 AI 生成的代码是否高效、安全、是否存在潜在的陷阱。你看不懂，就无法验收。
说得很对，但是前提是自己要懂，我是个后端仔，AI 写后端我完全能 hold 住，因为我写提示词也会写得很详细，用 xx 模块通过 xx 方法实现一个函数，入参 xxx 出参xxx。 但是写前端就不行，因为我不懂前端，我只能从功能上拆分，实现一个表格从后端接口 xxxx拉取数据，每秒自动刷新，但是我自己不知道用什么组件合理，应该怎么分布，应该怎么嵌入进去。也是复杂了就只能靠 AI 自己赛博鬼打墙似的修复。
提问：当因为缺乏领域知识而无法进行有效的“任务拆解”和“方案设计”时，应该怎么办？
Note
核心思想是：在您不熟悉的领域，您首先要利用 AI 当您的“技术顾问”，帮助您完成技术选型和架构设计，然后再切换回“指挥家”的角色去指导它完成具体实现。
示例：
我是一个后端工程师，正在用 Vue 3 / React 18 (说出你知道的或者你想用的) 开发一个后台管理系统。我需要实现一个功能复杂的表格，要求支持：1. 前端分页 2. 按列排序 3. 单元格可编辑 4. 关键字搜索。请为我推荐 2-3 个主流的、适合该场景的 UI 组件库（例如 Element Plus, Ant Design Vue, Material-UI 等）。请用表格对比它们的优缺点，包括社区活跃度、文档质量和上手难度。
好的，我决定使用 Vue 3 和 Element Plus。现在我要开发一个‘用户管理页面’，核心就是一个数据表格。请为我设计这个页面的组件结构。我应该把它拆分成几个 .vue 文件？每个文件的核心职责是什么？它们之间的父子关系和数据传递（props/emits）应该如何设计？请用树状结构或者列表清晰地展示出来。”
很好，我们先来创建 UserDataGrid.vue。请使用 Element Plus 的 el-table 组件，为我生成这个文件的完整代码。表格需要包含‘ID’、‘用户名’、‘邮箱’、‘状态’这四列。数据暂时用 mock data 写死在代码里，让我能先看到效果。请确保代码结构清晰，并添加必要的注释。
现在表格已经可以显示了。请修改 UserManagementView.vue，在 onMounted 生命周期钩子中，使用 axios 库请求我的后端接口 GET /api/users 来获取数据，并将获取到的数据传递给 UserDataGrid.vue 组件。同时，添加加载中（loading）的状态处理。提问：看了你的回答，是不是我至少还是要懂一些前端的，不然我可能都不知道前端是使用vue文件编写的，也不知道有父子关系和数据传递这个东西的？
是的，绝对的“零基础”无法提出有效指令。但您需要的不是去学习前端开发的“术”（具体语法），而是学习它的“道”（核心概念）。而对于您这样的后端专家来说，借助 AI 和类比思维，掌握这个“道”的时间成本，可能仅仅是半个小时。
可以使用Gemini/秘塔AI的学习辅导模式。
我是一位精通后端开发的资深工程师，熟悉微服务、API 设计、数据库和缓存等概念。现在我需要使用 AI 来辅助我进行前端开发，但我对现代前端框架（比如 Vue 3）几乎一无所知。
请你扮演一名前端技术专家，用我能理解的后端概念来类比和解释 Vue 3 的 5-7个最核心、最关键的“概念性知识”。
我不需要你教我任何具体的代码语法，我只需要快速建立一个正确的心智模型，让我能够像一个“架构师”一样去理解前端页面的构成和运行逻辑，从而可以向 AI 提出正确的设计和实现指令。请确保你的解释简洁、清晰，并聚焦于概念本身。