不会写代码？没关系。你只需要一个模糊的想法，和一台装了 AI 的电脑。

一、Vibe Coding 到底是什么？

Vibe Coding 这个词最近在开发者圈子里火得不行。它的核心逻辑很简单：你不需要会写代码，你只需要会描述需求。

传统的软件开发流程是：需求分析 → 架构设计 → 编码实现 → 测试部署。这一套下来，少则几周，多则数月。而 Vibe Coding 的流程是：我有一个想法 → 告诉 AI → AI 生成代码 → 我试用 → 不满意再改 → 完成。

整个过程的核心不再是"写代码"，而是"提需求"。你扮演的是产品经理 + 测试员的角色，AI 扮演的是全栈工程师。

听起来像天方夜谭？我用AiPy 一周之内做出了三个能用的成果。下面我把每一步拆开来讲，你跟着做，也能做到。

————————————————————————————————————

二、AiPy 是什么？

AiPy 是一个 AI 编程助手，它和市面上其他 AI 编程工具最大的区别是：它不需要你搭建开发环境，不需要你安装各种依赖库，甚至不需要你打开代码编辑器。

你只需要用大白话告诉它你想做什么，它就能自动生成代码、自动运行、自动调试。如果运行出错了，它会自己分析错误日志，自己修改代码，直到跑通为止。

简单说：你动嘴，它动手。

————————————————————————————————————

三、成果一：简历生成器

3.1 功能描述

这是一个在线简历生成工具。用户输入个人信息、工作经历、教育背景、技能标签，系统自动生成一份排版精美、可直接打印或导出为 PDF 的简历页面。

3.2 我的原始需求（原话）

"帮我做一个简历生成器，用户填信息就能生成好看的简历页面，要能在线预览，样式要专业。"

3.3 AiPy 的响应过程

我把这句话发给 AiPy 后，它做了以下几件事：

1. 需求拆解：自动将"简历生成器"拆解为表单输入区、简历预览区、样式渲染三个模块。

2. 技术选型：选择纯前端方案（HTML + CSS + JavaScript），无需后端服务器，打开即用。

3. 代码生成：一次性生成了完整的 HTML 文件，包含表单交互逻辑和实时预览功能。

4. 自动运行：生成完成后自动在浏览器中打开预览。

5. 迭代优化：我反馈"字体太小""颜色太花哨"后，它自动修改样式并重新运行。

3.4 核心 Prompt 参考

帮我做一个简历生成器，包含以下功能：

1. 左侧是表单，可以填写姓名、职位、联系方式、个人简介、工作经历、教育背景、技能标签

2. 右侧实时预览简历效果

3. 样式要专业、简洁，参考硅谷科技公司的风格

4. 支持一键导出为 PDF

5. 所有代码放在一个 HTML 文件中

3.5 关键代码片段

以下是简历实时预览的核心逻辑：

<!-- 简历预览区域 -->

<div id="resume-preview">

  <div class="resume-header">

    <h1 id="preview-name">张三</h1>

    <p id="preview-title">前端工程师</p>

  </div>

  <div class="resume-body">

    <section>

      <h3>个人简介</h3>

      <p id="preview-summary">5年前端开发经验...</p>

    </section>

    <section>

      <h3>工作经历</h3>

      <div id="preview-experience"></div>

    </section>

  </div>

</div>

<script>

// 实时更新预览

function updatePreview() {

  document.getElementById('preview-name').textContent =

    document.getElementById('input-name').value || '张三';

  document.getElementById('preview-title').textContent =

    document.getElementById('input-title').value || '前端工程师';

  // ... 其他字段同理

}

// 绑定输入事件

document.querySelectorAll('.form-input').forEach(input => {

  input.addEventListener('input', updatePreview);

});

</script>

3.6 耗时统计

- 从提出需求到第一版可用：约 15 分钟

- 迭代优化（共 3 轮反馈）：约 20 分钟

- 总计：35 分钟

————————————————————————————————————

四、成果二：图片加滤镜工具

4.1 功能描述

一个在线的图片滤镜处理工具。用户上传一张图片，可以选择多种滤镜效果（如黑白、复古、模糊、浮雕、油画效果等），实时预览效果，并可以下载处理后的图片。

4.2 我的原始需求（原话）

"做一个图片滤镜工具，上传图片后可以加各种滤镜效果，要能实时预览，效果要像 Instagram 那种。"

4.3 AiPy 的响应过程

1. 需求拆解：拆分为图片上传模块、滤镜算法模块、实时预览模块、下载模块。

2. 技术选型：使用 Canvas API 实现像素级滤镜处理，无需任何第三方库。

3. 代码生成：生成了包含 8 种滤镜效果的完整 HTML 文件。

4. 自动运行：直接在浏览器中打开，上传图片即可测试。

5. 迭代优化：我反馈"加一个对比滑块，可以调节滤镜强度"，AiPy 在 2 分钟内完成修改。

4.4 核心 Prompt 参考

帮我做一个图片滤镜工具，要求：

1. 支持上传本地图片

2. 至少提供 6 种滤镜效果：原图、灰度、复古、模糊、浮雕、反色

3. 点击滤镜缩略图即可实时切换预览

4. 支持下载处理后的图片

5. 界面美观，滤镜切换流畅

6. 所有代码放在一个 HTML 文件中

4.5 关键代码片段

以下是灰度滤镜的像素处理算法：

function applyGrayscale(imageData) {

  const pixels = imageData.data;

  for (let i = 0; i < pixels.length; i += 4) {

    const r = pixels[i];

    const g = pixels[i + 1];

    const b = pixels[i + 2];

    // 加权灰度算法，符合人眼感知

    const gray = 0.299  r + 0.587  g + 0.114  b;

    pixels[i] = gray;     // R

    pixels[i + 1] = gray; // G

    pixels[i + 2] = gray; // B

    // pixels[i + 3] 是 Alpha 通道，保持不变

  }

  return imageData;

}

// 复古滤镜：增加暖色调

function applySepia(imageData) {

  const pixels = imageData.data;

  for (let i = 0; i < pixels.length; i += 4) {

    const r = pixels[i];

    const g = pixels[i + 1];

    const b = pixels[i + 2];

    pixels[i] = Math.min(255, r  0.393 + g  0.769 + b  0.189);

    pixels[i + 1] = Math.min(255, r  0.349 + g  0.686 + b  0.168);

    pixels[i + 2] = Math.min(255, r  0.272 + g  0.534 + b  0.131);

  }

  return imageData;

}

4.6 耗时统计

- 从提出需求到第一版可用：约 12 分钟

- 迭代优化（增加强度滑块）：约 5 分钟

- 总计：17 分钟

————————————————————————————————————

五、成果三：简历筛选器

5.1 功能描述

这是一个面向 HR 或招聘经理的工具。批量导入候选人简历信息（支持 CSV 格式），根据预设的筛选条件（如工作年限、技能匹配度、学历要求等）自动打分排序，快速筛选出最匹配的候选人。

5.2 我的原始需求（原话）

"做一个简历筛选工具，能批量导入简历信息，按条件自动打分排序，帮我快速找到最合适的人。"

5.3 AiPy 的响应过程

1. 需求拆解：拆分为数据导入模块、筛选规则配置模块、评分算法模块、结果展示模块。

2. 技术选型：前端处理 CSV 解析 + 本地计算，无需后端服务器。

3. 代码生成：生成了包含完整筛选逻辑的 HTML 文件，支持多条件组合筛选。

4. 自动运行：生成后自动打开，我导入了一份测试数据验证功能。

5. 迭代优化：我反馈"评分规则不够灵活"，AiPy 增加了自定义权重配置功能。

5.4 核心 Prompt 参考

帮我做一个简历筛选工具，功能要求：

1. 支持上传 CSV 格式的简历数据

2. 支持设置筛选条件：工作年限、技能关键词、学历要求

3. 每个条件可以设置权重（重要性）

4. 系统根据条件自动计算匹配度分数，从高到低排序

5. 结果以表格形式展示，高亮显示高分候选人

6. 所有代码放在一个 HTML 文件中

5.5 关键代码片段

以下是匹配度评分算法的核心逻辑：

function calculateScore(candidate, criteria) {

  let totalScore = 0;

  let totalWeight = 0;

  // 工作年限评分

  if (criteria.minYears) {

    const yearsScore = Math.min(100,

      (candidate.yearsOfExperience / criteria.minYears)  100);

    totalScore += yearsScore  criteria.weights.years;

    totalWeight += criteria.weights.years;

  }

  // 技能匹配评分

  if (criteria.skills && criteria.skills.length > 0) {

    const matchedSkills = criteria.skills.filter(skill =>

      candidate.skills.toLowerCase().includes(skill.toLowerCase())

    );

    const skillsScore = (matchedSkills.length / criteria.skills.length)  100;

    totalScore += skillsScore  criteria.weights.skills;

    totalWeight += criteria.weights.skills;

  }

  // 学历评分

  const eduLevels = { '高中': 20, '大专': 40, '本科': 70, '硕士': 90, '博士': 100 };

  if (criteria.minEducation && candidate.education) {

    const eduScore = eduLevels[candidate.education] || 0;

    totalScore += eduScore  criteria.weights.education;

    totalWeight += criteria.weights.education;

  }

  return totalWeight > 0 ? (totalScore / totalWeight).toFixed(1) : 0;

}

5.6 耗时统计

- 从提出需求到第一版可用：约 18 分钟

- 迭代优化（增加自定义权重）：约 8 分钟

- 总计：26 分钟

————————————————————————————————————

六、Vibe Coding 的核心心法

经过这一周的实践，我总结了几个关键经验：

6.1 需求越具体，效果越好

不要只说"做个简历工具"，要说"做一个简历生成器，左侧表单右侧预览，样式参考硅谷科技公司风格"。AI 对具体描述的理解能力远超模糊描述。

6.2 迭代是最好的调试

第一版通常不会完美，但这没关系。Vibe Coding 的优势就在于迭代成本极低——你只需要说"字体再大一点""颜色换成蓝色系"，AI 在几十秒内就能完成修改。担心token不够用也没关系，邀请码填c8W3，就会有两百万的token。

6.3 不要害怕说"重做"

如果 AI 生成的方向完全不对，直接说"这个不行，换一种方案"。AI 不会生气，也不会抱怨，它会重新生成一套方案。

6.4 善用示例数据

在测试阶段，提供一些示例数据能让 AI 更好地理解你的需求。比如做简历筛选器时，我给了 AI 一个包含 10 条模拟简历的 CSV 文件，它立刻理解了数据格式和筛选逻辑。

————————————————————————————————————

写在最后

一周前，我对前端开发还停留在"HTML 是啥"的水平。一周后，我做出了三个能用的工具，而且整个过程没有写过一行代码——我只是在不断地"提需求、看结果、提反馈"。

这就是 Vibe Coding 的魅力：它把编程从"专业技能"变成了"沟通能力"。 你不需要懂算法、数据结构、设计模式，你只需要清楚地表达你想要什么。

如果你也有一个想法，不妨试试。打开 AiPy，用大白话说出你的需求，剩下的交给 AI。你会发现，原来做出一款软件，可以这么简单。

————————————————————————————————————

本文所有工具均使用 AiPy 生成，实际开发耗时约 78 分钟。如果采用传统开发方式，预估需要 3-5 个工作日。

代码示例：

帮我做一个简历生成器，包含以下功能：
1. 左侧是表单，可以填写姓名、职位、联系方式、个人简介、工作经历、教育背景、技能标签
2. 右侧实时预览简历效果
3. 样式要专业、简洁，参考硅谷科技公司的风格
4. 支持一键导出为 PDF
5. 所有代码放在一个 HTML 文件中
 

<!-- 简历预览区域 -->
<div id="resume-preview">
  <div class="resume-header">
    <h1 id="preview-name">张三</h1>
    <p id="preview-title">前端工程师</p>
  </div>
  <div class="resume-body">
    <section>
      <h3>个人简介</h3>
      <p id="preview-summary">5年前端开发经验...</p>
    </section>
    <section>
      <h3>工作经历</h3>
      <div id="preview-experience"></div>
    </section>
  </div>
</div>
<script>
// 实时更新预览
function updatePreview() {
  document.getElementById('preview-name').textContent =
    document.getElementById('input-name').value || '张三';
  document.getElementById('preview-title').textContent =
    document.getElementById('input-title').value || '前端工程师';
  // ... 其他字段同理
}
// 绑定输入事件
document.querySelectorAll('.form-input').forEach(input => {
  input.addEventListener('input', updatePreview);
});
</script>
 

帮我做一个图片滤镜工具，要求：
1. 支持上传本地图片
2. 至少提供 6 种滤镜效果：原图、灰度、复古、模糊、浮雕、反色
3. 点击滤镜缩略图即可实时切换预览
4. 支持下载处理后的图片
5. 界面美观，滤镜切换流畅
6. 所有代码放在一个 HTML 文件中
 

function applyGrayscale(imageData) {
  const pixels = imageData.data;
  for (let i = 0; i < pixels.length; i += 4) {
    const r = pixels[i];
    const g = pixels[i + 1];
    const b = pixels[i + 2];
    // 加权灰度算法，符合人眼感知
    const gray = 0.299  r + 0.587  g + 0.114  b;
    pixels[i] = gray;     // R
    pixels[i + 1] = gray; // G
    pixels[i + 2] = gray; // B
    // pixels[i + 3] 是 Alpha 通道，保持不变
  }
  return imageData;
}
// 复古滤镜：增加暖色调
function applySepia(imageData) {
  const pixels = imageData.data;
  for (let i = 0; i < pixels.length; i += 4) {
    const r = pixels[i];
    const g = pixels[i + 1];
    const b = pixels[i + 2];
    pixels[i] = Math.min(255, r  0.393 + g  0.769 + b  0.189);
    pixels[i + 1] = Math.min(255, r  0.349 + g  0.686 + b  0.168);
    pixels[i + 2] = Math.min(255, r  0.272 + g  0.534 + b  0.131);
  }
  return imageData;
}
 

帮我做一个简历筛选工具，功能要求：
1. 支持上传 CSV 格式的简历数据
2. 支持设置筛选条件：工作年限、技能关键词、学历要求
3. 每个条件可以设置权重（重要性）
4. 系统根据条件自动计算匹配度分数，从高到低排序
5. 结果以表格形式展示，高亮显示高分候选人
6. 所有代码放在一个 HTML 文件中
 

function calculateScore(candidate, criteria) {
  let totalScore = 0;
  let totalWeight = 0;
 
  // 工作年限评分
  if (criteria.minYears) {
    const yearsScore = Math.min(100,
      (candidate.yearsOfExperience / criteria.minYears)  100);
    totalScore += yearsScore  criteria.weights.years;
    totalWeight += criteria.weights.years;
  }
 
  // 技能匹配评分
  if (criteria.skills && criteria.skills.length > 0) {
    const matchedSkills = criteria.skills.filter(skill =>
      candidate.skills.toLowerCase().includes(skill.toLowerCase())
    );
    const skillsScore = (matchedSkills.length / criteria.skills.length)  100;
    totalScore += skillsScore  criteria.weights.skills;
    totalWeight += criteria.weights.skills;
  }
 
  // 学历评分
  const eduLevels = { '高中': 20, '大专': 40, '本科': 70, '硕士': 90, '博士': 100 };
  if (criteria.minEducation && candidate.education) {
    const eduScore = eduLevels[candidate.education] || 0;
    totalScore += eduScore  criteria.weights.education;
    totalWeight += criteria.weights.education;
  }
 
  return totalWeight > 0 ? (totalScore / totalWeight).toFixed(1) : 0;
}