告别“开盲盒”写代码：给初学者的现代 AI 前端开发实战指南

AI 时代工程方法论 · 面向初学者与独立创作者

为什么凭感觉让 AI 写前端总是翻车？本文用通俗大白话带你拆解 Matt Pocock 的工程精髓，搭建一套有理有据、所见即所得、零基础也能轻松驾驭的现代 UI 研发工作流。

1. 从“凭感觉聊天”到“专业带技能”#

最近一段时间，“Vibe Coding（氛围式编码）”成了技术圈常见的讨论主题。它的美好愿景是：你不需要在脑子里背诵几百个 API 或繁琐的框架语法，只要在聊天框里用日常语言向 AI 描述心中构想，AI 就能替你敲出可运行的代码。

然而，只要试过用这套方式去改写一个有模有样的网页，你大概率会经历以下令人抓狂的挫败时刻：

• 盲盒现象：只说了一句“做个好看的读书卡片”，AI 却凭空发明了巨大的粉紫色渐变，和原项目格格不入。
• 顾头不顾尾：刚修好了右边的搜索按钮，左侧原本好好的导航栏居然被它随手删空了，历史记忆支离破碎。
• 虚假的高效：AI 拍着胸脯向你保证“代码已为您完美重构”，结果一刷新浏览器，控制台直接炸出一大片红字报错。

为什么会这样？没有规矩不成方圆。在没有任何约束的情况下，AI 就像一个拿着锯子和油漆桶的学徒：它不知道你房子的承重墙在哪里，也不知道地板是实木还是瓷砖，只能靠猜。

Matt Pocock 维护着一套开源的 Agent Skills（智能体技能），为编码代理提供可复用的工作流程说明。它把工程中的一些做法写成可按需调用的指导，而不是神秘算法或一份适用于所有任务的固定 SOP。相关视频：《mattpocock/skills: A complete AI Coding workflow, end-to-end》。

2. 新一代 AI 时代的心法：少即是多#

一种常见的做法，是在项目里写一份极其庞大的“紧箍咒”文件：长期加载许多 Skills，塞满死板规则，还要求 AI 每次改一个按钮前先把整座图书馆通读一遍。

面对 GPT-6、Codex 与 Gemini 3 等新一代模型和工具，增加规则的数量并不自动带来更好的结果。OpenAI 关于 GPT-6 Astra 的技能与提示建议指出，过长的技能说明可能被截短，过多或相互矛盾的技能说明也会让模型更难选对技能；对仓库指令，应按任务需要指向相关资料，而不是要求每次都读完整套文档。Google 在介绍 Gemini 3中说明了 Gemini 3 的发布时间；GPT-6 系列信息见 OpenAI 模型指南。

对实际协作来说，与其预先塞入所有规则，不如让约束清楚、与当前任务相关，并在需要时再加载专门的指导。复杂任务中，过多无关上下文会增加噪声；具体效果仍应结合任务和实际结果判断。

3. 告别翻车：现代 UI Agent 的五步工作法#

下面是本文针对前端 UI 场景整理的简化工作法，不是 Matt Pocock 官方流程的逐字复述。它把查清项目现状、需求对齐、原型探索、切片实现和视觉验收串在一起。Matt Pocock 官方流程的具体步骤和分支可见工作流说明；本站也有一篇更详细的流程介绍。

1. 查清家底（Repo Grounding）——做饭先看冰箱食材
   动手写代码前，先查清必要的项目事实：排版规范是什么？有没有可复用的 Button 或 Card？真实数据结构是什么？改动以现有代码和配置为依据，避免凭空发明。

2. 需求对齐（Grill with Docs）——像好医生一样连环盘问
   先把目标问清楚，再开始改代码：“改动的核心动机是什么？”“哪些必须保留，哪些允许推翻？”讨论中形成的术语和关键决策可以记入 GLOSSARY.md；难以回退且有真实取舍的决策再记录为 ADR，避免换个会话就丢失背景。

3. 草稿试吃（Prototype）——让肉眼参与拍板
   文字难以确定视觉结构时，先制作少量可运行草稿，例如侧边栏型、卡片流型或杂志型。草稿用来回答具体设计问题；选定方向后再实现生产代码，不必每个任务都先做多个原型。

4. 切片推进（Vertical Slice & Implement）——像切千层蛋糕一样垂直推进
   不一次性重写几十个文件，而是拆成小的端到端切片。例如先完成静态列表，再完成搜索，最后完成详情弹窗。每个切片覆盖所需的数据、界面和检查，逐步推进。

5. 双重质检（UI 视觉验收 + 代码复审）——工程与审美都要达标
   代码没有语法错误，不等于页面就好用、好看。除代码复审外，前端任务还应检查间距、移动端触控区域、加载与空状态等实际呈现。通过相应检查后再提交改动。

4. 开发者的三态心智模型#

这是本文整理的三阶段视角，用来帮助安排协作顺序：

5. 新手拿来即用的 AGENTS.md 极简配置#

在项目根目录下创建 AGENTS.md 文件，下面是一份起步示例；实际使用时应按项目约定调整：

1
# Project Core Directives
2

3
## 1. Grounding First
4

5
- Never guess component names, styles, or file paths.
6
- Always check existing routes, Tailwind classes, and design tokens before proposing UI changes.
7
- Minimal change: only modify what is necessary for the current task.
8

9
## 2. Decision & Alignment
10

11
- When requirement or scope is unclear, grill me with questions first.
12
- When visual structure or user interaction is uncertain, generate 2-3 interactive prototype variants for human review instead of assuming.
13
- Record key decisions into GLOSSARY.md.
14

15
## 3. Implementation
16

17
- Implement feature via tracer-bullet vertical slices.
18
- Do not re-architect already decided plans.
19
- Run tests and visual verification checklist before concluding.

6. 写在最后：让 AI 成为真正的得力工匠#

现代 AI 开发真正的生产力飞跃，从来不是“AI 敲键盘的速度比人快了多少倍”；而是通过清楚的规则和流程，减少 AI 在错误方向上写出大量代码的代价。

把繁杂的代码探索、类型检查和多方案原型试验交给 AI；而把我们最宝贵的心智留给审美裁决、业务权衡和方向把控。

本文标签： AI编程 Vibe Coding 工作流

版权声明：若无特殊注明，本文皆为《WindowsIt》原创，采用 CC BY-NC-SA 4.0 协议授权，转载请保留文章出处。
本文链接： 告别“开盲盒”写代码：给初学者的现代 AI 前端开发实战指南