Canvas Vibe Coding 用一句话让 AI 帮你写代码原型

它是什么

Vibe Coding 是 Andrej Karpathy 提出的概念——"用自然语言描述你想要什么，让 AI 写代码"，不需要你自己写任何代码（或只需要写一点点）。Google 在 Gemini Canvas 里把这个能力做成了可用产品。

Canvas 里的 Vibe Coding：

1. 你用一句话描述一个应用
2. AI 生成完整的 HTML/CSS/JS 代码
3. 直接在 Canvas 里运行预览（右侧面板实时显示效果）
4. 你继续描述修改 → AI 改代码 → 实时预览更新
5. 满意后可以导出代码、部署到 Web、或分享链接

典型使用场景

场景一：番茄钟应用

你：帮我做一个番茄钟应用
    要求：25 分钟工作 + 5 分钟休息 + 长休息 15 分钟
    能记录今天完成了多少个番茄
    极简黑白风格
    手机端友好

Canvas 生成后：

• 右侧面板直接显示一个可交互的番茄钟
• 可以点开始/暂停/重置
• 计时结束有提示音
• 记录每天完成数量

场景二：个人作品集网站

你：帮我做一个设计师个人作品集网站
    首页要有大标题 + 3 个项目卡片 + 关于我 + 联系方式
    风格：简约、留白多、字体好看
    移动端适配

场景三：交互式数据可视化

你：（上传一份销售数据 CSV）
    基于这份数据做一个交互式仪表盘
    包含：月度销售折线图、区域销售额柱状图、TOP 10 产品排名表
    可以按年份筛选

场景四：简单游戏

你：帮我做一个贪吃蛇游戏
    方向键控制，吃到食物变长
    记录最高分
    像素风格

迭代修改的正确姿势

不要试图一次描述完所有细节——先让它跑起来，再逐步微调：

第 1 轮：
你：帮我做一个待办清单应用
AI：（生成基础版，能加/删任务）

第 2 轮：
你：加一个分类功能（工作/生活/学习），每个分类用不同颜色标记
AI：（更新代码 → 实时预览刷新）

第 3 轮：
你：再加一个"完成"状态，完成的任务划线显示、可以批量归档
AI：（继续修改）

第 4 轮：
你：颜色太暗了，饱和度调高一点，整体更活泼
AI：（调整配色）

这样每一轮都只改一个小范围，出问题容易定位。

和传统开发的对比

Canvas Vibe Coding 不是要取代工程师——它是让想法变成原型的速度从"几天"变成"几分钟"，让产品经理、设计师、创业者在写第一行代码之前就能看到东西跑起来。

代码去哪了

• Canvas 生成的代码保留在项目里，可以随时查看和导出
• 导出为 ZIP 包（HTML/CSS/JS），可以部署到任何静态托管服务
• 也可以让 AI 帮你部署："帮我把这个部署到 GitHub Pages"（需要连接 GitHub 账号）

订阅限制