Vibe Coding

Vibe Coding 技术拆解：用 AI 高质量搭建小程序的实战指南

“Vibe Coding” 不是漫无目的地乱写，而是一场带着规矩的意图表达。很多人用 AI 写代码半途而废，是因为把 AI 当成了“搬砖工”，而没有把它当成“架构师”。

0. 心智模型：盖房子的艺术

如果把开发小程序比作盖房子：

  • 传统开发：你自己搬砖、和水泥、画图纸，累个半死。
  • 初级 AI 开发：你对机器人说“给我盖个房”，机器人随机堆了一堆砖，最后房子塌了。
  • Vibe Coding：你先定下装修风格（设计规范），选好预制件（UI组件库），立下施工准则（开发规则），机器人只需按图索骥。
      [ 设计 Token ] (装修手册: 颜色、间距)
            |
      [ UI 组件库 ] (预制件: 门、窗、梁)
            |
      [ 项目架构 ] (地基与框架)
            |
      [ AGENTS.md ] (工地看板: 施工必须看这个)

1. 核心概念分组：从浅入深的四大步骤

场景 A：颜值的“统一战线”（设计风格与 Token）

  • 概念：Design Tokens。
  • 比喻：不要告诉工人“这堵墙刷浅蓝色”，要告诉他“这堵墙使用 Primary-Color”。以后你想换风格，只需修改 Primary-Color 的定义，全屋自动变色。
  • 操作：先给 AI 截图或参考，定下主色调、圆角、字号。

场景 B：拒绝“手搓组件”（锁定 UI 库）

  • 概念：组件化开发。
  • 比喻：不要让 AI 每次都重新设计一个按钮（手搓），要直接从工具箱里拿“uni-ui 的标准按钮”。
  • 价值：保证了小程序在安卓、苹果、桌面端看齐，不会出现“这个页面按钮大，那个页面按钮圆”的乱象。

场景 C：给 AI 立“家规”（AGENTS.md）

  • 概念：提示词工程 + 上下文注入。
  • 比喻：给 AI 戴上一个紧箍咒。每次它想偷懒乱改代码时，紧箍咒（AGENTS.md）就会提醒它：“必须遵守设计规范，不准写死数值！”

2. 知识点与坑（Markdown 总结）

知识点

  1. Token 化设计：将 UI 属性抽象成变量（如 --main-theme）。
  2. 原子化封装：功能出现 2 次以上即封装为独立组件，保持代码清爽。
  3. 单库原则：禁止在一个项目里混用 uview、uni-ui、vant 等多个库。

坑（Red Flags）

  • 【截图复刻坑】：直接对 AI 说“照着这个图做一个”。AI 会为了还原图片而硬编码（Hardcode）样式，导致后面改一个颜色要改 100 处。
  • 【版本冲突坑】：uni-app 的 Vue3 版本和 Vue2 版本的插件不通用。必须在第一步就锁死版本。
  • 【目录混乱坑】：AI 默认会把所有文件塞到根目录。必须规定：pages/ 存页面，components/ 存组件，utils/ 存工具。

3. 数据来源与核心逻辑

数据来源

  • Atomic Design (原子设计理论)：由 Brad Frost 提出的组件化分层逻辑。
  • Design Systems：如 Ant Design 或 Material Design 的设计变量体系。

涉及的逻辑（算法）

样式的继承与覆盖逻辑：
$$最终样式 = 基础库样式 + 全局 Token 覆盖 + 局部组件变量$$
AI 必须遵循这个优先级，而不是在每个 .vue 文件的 <style> 块里写死 color: #FF0000。

4. 指标的意义

  • 组件复用率：衡量项目是否“重”。复用率越高，维护越简单。
  • 样式覆盖度：通过 Token 修改主色调的成功率。
  • AI 准确率：在有 AGENTS.md 的情况下，AI 产生逻辑错误的频次。

5. 如何指导生产

  1. 先文档后代码：在 AI 写第一行代码前，先让它产出《设计规范》和《开发规则》。
  2. 严格的验收：每次 AI 生成页面，先检查它有没有引用公共 Token，如果没有，直接打回重做。

6. 经典问答 (Q&A)

Q：为什么 Vibe Coding 强调“先别写页面”？
A：磨刀不误砍柴工。没有规矩，AI 写的页面越多，项目烂尾越快。

Q：AGENTS.md 应该放哪？
A：放在项目根目录下。如果你使用 Cursor 这种编辑器，可以配置 .cursorrules 来读取这些规则。

7. 最佳工程实践

反例 (Bad Practice)

  • 提示词：“帮我写一个蓝色背景、圆角很大的登录按钮。”
  • 后果：AI 会直接在 HTML 里写死 style="background:blue; border-radius: 50px"。

正确做法 (Best Practice)

  1. 配置全局变量：在 theme.json 或 uni.scss 中定义 $brand-color: #007BFF;。
  2. 提示词：“参考组件库的 Button 文档，使用我们的全局主题色 Token，实现登录按钮。确保它遵循我们设定的‘商务风格’。”

8. 重要概念集成模型 (ASCII)

Vibe Coding 开发流水线

  [ 需求 ] 
     |
  [ 风格分析 ] --> 输入参考图 --> 产出 Token (HEX码, 间距)
     |
  [ 架构锁死 ] --> 锁定框架 (Vue3) + 锁定 UI 库 (uni-ui)
     |
  [ 注入灵魂 ] --> 编写 AGENTS.md (规则说明书)
     |
  [ 迭代开发 ] --> AI 根据规则生成功能模块
     |
  [ 自动化自查 ] --> AI 对照规则检查代码规范

9. 结语

Vibe Coding 的精髓在于掌控意图 (Vibe)。你负责定义“好”的标准，AI 负责实现。当你能用一套规范“钉住” AI 的思维时，小程序的开发速度将提升 10 倍且不会乱序。

抖，看看【敲代码的小虾米的作品】Vibe Coding 技术拆解：用 AI 搭建一套小程序

核心内容整理如下：

  1. 问题背景
    很多人用 AI 写小程序时，初期顺利，功能一多就会出现目录混乱、组件样式不统一、主色调修改不干净等问题，最终项目失控，只能推倒重来。这并非 AI 能力不足，而是开发者在让 AI 动手前，跳过了 “立规矩、搭骨架” 的关键步骤。
  2. 核心理念：Vibe Coding
    这种开发方式的核心是最大化用自然语言编程，开发者不直接写代码，关键在于 “怎么对 AI 说”，视频会提供每一步的 AI 提示话术，且这套流程已经过实际验证。
  3. 具体开发步骤
    • 第一步：定设计风格
      不要先搭架构，要先确定产品整体的视觉风格（如简洁商务、科技深色、内容社区信息流），重点敲定主色调，AI 可基于主色调自动生成整套配色。若不确定风格，可参考其他产品，小程序截图、网页 / H5 链接都可作为参考。
      对 AI 的提示话术示例：“我要做一个 XX 类的小程序，这是我喜欢的几个产品（小程序截图 / 网页链接），你先分析它们的视觉风格，再推荐一套适合我这个项目的整体设计风格，重点先帮我定一个主色调，然后围绕它推导出按钮、标签、选中态这些的整套配色，再定字号、圆角、间距的调性。先别写任何页面。”
    • 第二步：锁定 UI 组件库
      风格确定后，要选择一个成熟的 UI 组件库（如 uni-ui、uview-plus），避免 AI 逐个手搓组件，保证界面元素统一。注意要选择与项目框架版本匹配的组件库，比如 uni-app 选 Vue3 版本，就选支持 Vue3 且持续更新的组件库，且只锁定一个，禁止跨库混用。
      对 AI 的提示话术示例：“我这个项目用 uni-app 的 Vue3，只用一个成熟的 UI 组件库，挑一个明确支持 Vue3、还在持续维护的，比如 uni-ui 或 uview-plus，选定就不许再混第二个，它的主题风格要和前面定的设计风格对齐，以后改风格统一走它的主题配置，不准逐个组件去覆盖样式。”
    • 第三步：搭项目架构，定目录和复用规则
      风格和组件库确定后，搭建项目架构，可直接使用 uni-app 的官方 IDE-HBuilderX 创建项目。同时定两条核心规则：一是规范文件归位，明确页面、组件、接口、工具函数等文件的存放位置；二是组件封装复用，同一展示形式出现≥2 次就封装，禁止复制粘贴。
    • 第四步：设计 Token 化
      将设计风格转化为统一的设计 Token（即颜色、字号、间距、圆角、阴影等设计变量），让 AI 写页面时统一取用。要注意让设计 Token 与 UI 组件库的主题变量对齐，避免两套样式冲突，以后修改主色或风格，只需修改 Token 配置即可全局生效。
      对 AI 的提示话术示例：“把前面定的设计风格、UI 组件库和主题、设计 Token，整理成一份《设计规范》文档，把框架规范、目录结构、组件复用规则，整理成一份《开发规则》文档。”
  4. 文档与执行保障
    将《设计规范》和《开发规则》索引进 AGENTS.md（AI 每次开发都要参考的文档），并规定每次开发前必须先阅读这两份文档。同时，AI 完成功能后，要对照文档自查：目录是否乱放、是否绕开组件库主题、是否硬写数值。
  5. 避坑提醒
    • 不要让 AI “照着做一个”，否则 AI 会优先还原截图，忽略之前定的规范。正确的提示是让 AI 参考截图的布局、结构、设计思路，具体样式优先使用项目既定规范，特殊情况可适当补充，但要保持风格统一。
    • 开发流程要按 “定风格→选组件库→搭架构→统一 Token” 的顺序进行，严禁抢步骤，否则容易返工。
  6. 结尾
    视频提到这套流程已经落地成一套即开即用的小程序快速启动架构，设计风格、组件库、目录、Token 都已预设，可直接让 AI 接着开发
posted @ 2026-08-25 20:33  accomplish-it  阅读(4)  评论(0)    收藏  举报