Vibe Coding

与 AI 协同，重塑创造力

凭感觉编程。

自 Claude 3.5 发布以来，大模型已能稳定输出高质量、可执行的代码。这带火了 Vibe Coding 的概念：我们只需聚焦"意图"，将繁琐的"实现"过程交给 AI。

为什么选择网页开发？

即时运行，高效协同

浏览器即所得，提供最快的可视化反馈。

跨平台，零安装

代码一次生成，通行桌面、移动端和平板。

部署门槛极低

单文件即可通过 CDN 或 Gemini Canvas 等平台分享。

生态丰富，无需配置

通过 CDN 可直接引入海量开源库，快速实现复杂功能。

AI 网页开发应用场景

信息展示

效率工具

数据浏览

交互演示

Vibe Coding 案例展示

测评数据可视化

数据转换

网页增强

实际演示

Vibe Coding 技巧 1

掌控“意图”，释放“实现”

清晰地定义“为什么做”（Why）和“做什么”（What），给予 AI 在“如何实现”（How）上的自由。

BAD - 只说做什么，没说为什么

写一个网页，支持上传excel，把数据渲染成一个表格

GOOD - 提供目标，AI 会据此优化

写一个网页，我的目标是上传excel，对比用户自己填的业务点、业务优势，以及AI通过落地页提取的业务点和优势

Vibe Coding 技巧 2

好的 Prompt 是自明的

无需额外解释，上下文完整，让 AI 的理解成为必然。

BAD - 上下文不完整

帮我做一个用户管理页面，要支持增删改查

GOOD - 提供完整上下文和数据结构

帮我做一个用户管理页面，要支持增删改查

用户数据结构：
{
  "id": 1,
  "name": "张三",
  "email": "zhangsan@example.com", 
  "role": "admin", // admin, user, guest
  "status": "active", // active, inactive
  "createdAt": "2024-01-01"
}

页面需求：
- 列表展示：支持按角色、状态筛选和搜索
- 新增用户：表单验证邮箱格式和角色权限
- 编辑用户：不允许修改ID和创建时间
- 删除确认：管理员不能删除自己

Vibe Coding 技巧 3

校准 AI 的"品味"

与其让 AI 凭空生成，不如给它一个"参照系"，在对比中进行创造。这本质上是用你的品味去校准 AI 的审美。

BAD - 凭空生成

开发一个现代、简洁的网页

GOOD - 提供参照系

开发一个现代、简洁的网页

正面范例：参考 Stripe 官网的按钮设计 - 圆角、渐变、微妙阴影
反面范例：不要拟物化风格，避免过度装饰和复杂纹理  
对比范例：融合 Apple 的留白美学 + Google Material 的色彩体系

具体要求：
- 配色：使用 #6366f1 作为主色调，配合中性灰色
- 字体：优先使用系统字体栈
- 布局：采用 16px 栅格系统，保持一致的间距

Vibe Coding 技巧 4

反馈循环：从“能用”到“好用”

AI 的初版是“毛坯房”，你的反馈和评价则是“精装修”的过程。这体现了你对用户体验、业务流程和最终价值的理解。

BAD - 仅修正

表格的列宽不对，调整一下。

GOOD - 注入品味与洞察

这个表格虽然展示了数据，但信息密度太高，无法一眼看到重点。我的目标是快速对比不同方案的优劣。我们来优化一下：

突出重点：自动将'转化率'最高的那一行用淡绿色背景高亮。这能帮助我立即定位到最佳方案。

提升易读性：将所有超过1000的数字，比如'消耗'和'展现'，都格式化为带逗号的样式（例如 12345 -> 12,345）。

增加交互性：当鼠标悬停在方案名称上时，弹出一个小浮层显示该方案的'详细描述'字段。

Vibe Coding 技巧 5

注意管理上下文窗口

对话次数越多，模型出错的概率越大，越容易遗忘之前的细节。连续出错时需要及时止损。

BAD - 无限续接对话

// 已经聊了50轮，AI开始出现混乱
继续基于之前的代码修改...
再加一个功能...
怎么又出bug了？

GOOD - 及时重置上下文

下面是我未完成的代码，需要加上XXX功能，需要改XXX的bug，请你继续完成

[这里粘贴完整的当前代码]

具体要求：
1. 修复登录验证逻辑的空值判断问题
2. 新增用户角色权限控制功能
3. 保持现有的UI风格和数据结构

Vibe Coding 技巧 6

通过大模型快速了解领域知识

先获取领域知识，再进行具体实现。让AI成为你的知识顾问。

BAD - 直接要求实现

帮我写一个油猴脚本，隐藏某个网站的广告模块

GOOD - 先获取知识再实现

我要开发油猴脚本，需要隐藏某个网站的XX模块，但我不是开发者，不知道应该怎么跟大模型说明。

请告诉我：
1. 我应该提供什么信息给你作为上下文？
2. 需要获取哪些页面元素信息？
3. 具体的实现步骤是什么？

目标网站：xxx.com
要隐藏的内容：右侧广告栏和弹窗

认知价值的"微笑曲线"

前AI时代：价值的"高地"

在AI普及之前，价值链的每个环节都很重要。但"执行"是关键瓶颈，它需要大量专业技能和资源，是决定一个想法能否实现的核心。因此，价值集中体现在这个宽厚的"高地"上。

AI 时代的价值曲线

被压缩的中间环节 (How)

编写具体代码的“实现”过程，其价值被 AI 大幅压缩。

被放大的前端价值 (Why & What)

定义“为什么做”和“做什么”的能力，决定了 AI 输出的起点。

被放大的后端价值 (Good or Bad)

你的审美、业务理解和对质量的判断力，成为最稀缺的资产。

你的新角色

意图架构师

品质鉴定官