跟随直觉的AI辅助编程新范式
跟随感觉描述需求,不纠结语法细节
AI负责代码生成,AI负责调试修复
看效果判断好坏,不读代码细节
多次调整描述,快速验证想法
| 维度 | 传统编程 | Vibe Coding |
|---|---|---|
| 核心技能 | 语法、算法、调试 | 需求表达、结果判断 |
| 工作流程 | 写代码 → 调试 → 测试 | 描述 → AI生成 → 调整 |
| 学习重点 | 编程语言和框架 | AI提示技巧 |
| 适用场景 | 底层开发、性能优化 | 原型快速验证 |
| 代码质量 | 可控、可维护 | 依赖AI生成质量 |
描述UI需求,自动生成组件
IDE内AI辅助编程
对话生成可交互应用
一句话生成完整项目
自主完成编程任务
对话式代码生成
各类AI辅助编程工具总览
国产AI命令行编程工具
轻量级AI代码助手
终端AI结对编程
Anthropic官方CLI
开源AI编程扩展
企业级自托管方案
描述生成React UI
一句话生成完整应用
产品级应用生成
生成SwiftUI代码
AI驱动的低代码
极速原型开发
| 要点 | 示例 |
|---|---|
| 明确目标 | "登录页面" → "粉色主题的登录表单" |
| 指定风格 | "现代简洁" → "iOS风格,圆角,阴影" |
| 说明交互 | "点击按钮" → "点击蓝色按钮跳转" |
| 提供约束 | "不要使用" → "不要用第三方库" |
| 场景 | 调整策略 |
|---|---|
| 效果不对 | 更具体描述需求 |
| 风格不匹配 | 提供参考或设计规范 |
| 功能缺失 | 补充功能需求 |
| 报错 | 直接贴报错信息 |
| 场景 | 推荐程度 | 说明 |
|---|---|---|
| 原型快速验证 | 非常适合 | 快速搭建MVP,验证想法 |
| 非程序员做产品 | 非常适合 | 无需学习编程即可实现 |
| 前端UI开发 | 非常适合 | AI对CSS/UI生成效果很好 |
| 学习新技术栈 | 适合 | 快速看效果,再深入学习 |
| 简单脚本工具 | 适合 | 数据处理、文件操作等 |
| 底层/系统开发 | 不适合 | 需要精确控制,不适合AI |
| 高性能代码 | 不适合 | 需要手动优化,AI难以保证 |
# 使用 Claude API 生成一个待办事项应用
import anthropic
client = anthropic.Anthropic()
# 只需描述需求,不需要懂HTML/CSS/JS
prompt = """创建一个美观的待办事项应用:
- 粉色主题,渐变背景
- 添加、删除、完成待办事项
- 使用本地存储保存数据
- 支持手机端响应式布局
- 使用Tailwind CSS
直接返回完整的HTML文件代码,包含内联的CSS和JavaScript。"""
response = client.messages.create(
model="claude-sonnet-4-20250514",
max_tokens=8192,
messages=[{"role": "user", "content": prompt}]
)
html_code = response.content[0].text
# 保存并运行
with open("todo_app.html", "w", encoding="utf-8") as f:
f.write(html_code)
print("✅ 已生成 todo_app.html,直接在浏览器打开即可")
# 在 Cursor 中使用 AI 辅助开发
# 只需要用自然语言描述需求,AI 会帮你写代码
# 场景:创建一个数据仪表盘
# 在 Cursor Chat 中输入:
"""
创建一个Python数据仪表盘,要求:
1. 使用Streamlit框架
2. 显示销售数据折线图
3. 显示关键指标卡片(总销售额、订单数)
4. 支持日期范围筛选
5. 侧边栏有筛选选项
6. 使用Plotly作图
不要解释,直接生成完整代码。
"""
# Cursor 会生成类似这样的代码:
"""
import streamlit as st
import pandas as pd
import plotly.express as px
st.set_page_config(page_title="销售仪表盘", layout="wide")
st.title("📊 销售数据仪表盘")
# 读取数据
df = pd.read_csv("sales_data.csv")
# 侧边栏筛选
st.sidebar.header("筛选选项")
date_range = st.sidebar.date_input("选择日期范围")
# 关键指标
total_sales = df['销售额'].sum()
st.metric("总销售额", f"¥{total_sales:,.0f}")
# 图表
fig = px.line(df, x='日期', y='销售额', title="销售趋势")
st.plotly_chart(fig)
"""
# 你只需要:复制 → 粘贴 → 运行 → 看效果 → 不满意让AI修改
# 在 v0.dev 中输入自然语言,生成 React 组件
# 输入描述:
"""
创建一个用户个人资料卡片组件:
- 圆形头像
- 用户名和头衔
- 关注按钮(蓝色)
- 统计数字(帖子、粉丝、关注)
- 卡片背景渐变
- 使用 shadcn/ui 组件
"""
# v0 会生成类似这样的代码:
"""
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
export function UserCard() {
return (
JD
John Doe
Full Stack Developer
128
帖子
10.5K
粉丝
256
关注
)
}
"""
# 复制到项目中即可使用,不需要理解 React 语法
# 用 AI 快速生成数据处理脚本,不需要懂 Pandas
# 告诉 AI 你要做什么:
"""
帮我写一个 Python 脚本:
1. 读取 CSV 文件 "sales.csv"
2. 按月份分组统计销售额
3. 找出销售额最高的前10个产品
4. 生成柱状图保存为 "top_products.png"
5. 生成月度趋势折线图保存为 "monthly_trend.png"
"""
# AI 生成的代码:
"""
import pandas as pd
import matplotlib.pyplot as plt
# 读取数据
df = pd.read_csv('sales.csv')
# 按月份分组
df['月份'] = pd.to_datetime(df['日期']).dt.to_period('M')
monthly_sales = df.groupby('月份')['销售额'].sum()
# 前10产品
top_products = df.groupby('产品')['销售额'].sum().nlargest(10)
# 柱状图
plt.figure(figsize=(10, 6))
top_products.plot(kind='bar', color='skyblue')
plt.title('Top 10 Products')
plt.savefig('top_products.png', dpi=150)
# 折线图
plt.figure(figsize=(10, 6))
monthly_sales.plot(kind='line', marker='o')
plt.title('Monthly Sales Trend')
plt.savefig('monthly_trend.png', dpi=150)
print("图表已生成!")
"""
# 运行脚本,结果自动生成,不需要懂 matplotlib
# Vibe Coding 的核心:不断迭代直到满意
# 第一次描述
prompt1 = "创建一个登录页面"
# AI 生成基础版本后,你觉得不够好
# 第二次优化
prompt2 = """
之前的登录页面还不错,但现在需要:
1. 改为深色主题
2. 添加"记住我"复选框
3. 登录按钮改为圆角渐变色
4. 添加社交账号登录选项(Google、GitHub)
"""
# 第三次优化
prompt3 = """
深色主题的登录页很好看了,但还需要:
1. 手机端适配,登录框居中且宽度90%
2. 添加输入框动画效果
3. 密码输入框添加显示/隐藏切换按钮
4. 添加 loading 状态
"""
# 第四次优化
prompt4 = """
登录页基本完成了,但有几个小问题:
1. GitHub 图标用灰色,Google 用蓝色
2. loading 动画用浅蓝色
3. 错误提示用红色显示在输入框下方
4. 成功后跳转到 /dashboard 页面
"""
# 每次都只看效果,不读代码,直到满意为止
# 不需要懂测试框架,让AI帮你写测试
# 告诉AI你要测试的代码和需求:
"""
为一个用户注册函数写测试用例:
- 函数名:register_user(username, email, password)
- 功能:创建新用户,验证输入格式
- 返回:用户ID 或 错误信息
写 pytest 测试,包括:
1. 正常注册成功
2. 用户名太短(<3字符)
3. 邮箱格式错误
4. 密码太简单(<8字符)
5. 用户名已存在
"""
# AI 生成的测试代码:
"""
import pytest
from user_auth import register_user
def test_register_success():
user_id = register_user("john", "john@example.com", "password123")
assert user_id is not None
assert isinstance(user_id, int)
def test_username_too_short():
with pytest.raises(ValueError, match="用户名至少3个字符"):
register_user("jo", "john@example.com", "password123")
def test_invalid_email():
with pytest.raises(ValueError, match="邮箱格式不正确"):
register_user("john", "invalid-email", "password123")
def test_password_too_simple():
with pytest.raises(ValueError, match="密码至少8个字符"):
register_user("john", "john@example.com", "123")
def test_username_exists():
# 先注册一个用户
register_user("john", "john@example.com", "password123")
# 尝试重复注册
with pytest.raises(ValueError, match="用户名已存在"):
register_user("john", "john2@example.com", "password123")
"""
# 运行 pytest 即可,不需要自己写测试代码