Easy Vibe Coding 学习心得（八）：个人网站生成器——5 分钟打造个人品牌

一、从"复杂"到"简单"——网站建设的演变

1.1 前七篇的回顾

在前七篇学习心得中，我完成了从 Vibe Coding 入门到跨平台开发的完整学习：

• 心得一：60 秒做出第一个 AI 程序 + AI 原生贪吃蛇
• 心得二：电商素材工作台
• 心得三：前端之美
• 心得四：后端之力
• 心得五：综合实战
• 心得六：RAG 入门
• 心得七：跨平台开发

但朋友试用我的 LearnMate AI 后，提出了一个新的需求：

“你的学习伴侣很好用，我想推荐给朋友。但我自己没有个人网站，能不能帮我快速做一个？”

那一刻我意识到：在 AI 时代，每个人都应该有自己的个人品牌展示窗口。

1.2 传统建站的痛点

回想传统的个人网站搭建流程：

1. 买域名：去域名注册商挑选、购买
2. 买服务器：选择配置、操作系统、环境
3. 搭建环境：安装 Web 服务器、数据库
4. 开发网站：写代码、做设计、调样式
5. 部署上线：配置 DNS、SSL 证书

整个过程下来，至少需要几天时间，还需要不少技术知识。

对于非技术人员来说，这几乎是不可能的任务。

1.3 新的想法

某天我突然想：能不能做一个工具，让任何人都能在 5 分钟内拥有自己的个人网站？

不需要懂代码，不需要买服务器，只需要：

• 填写基本信息
• 选择喜欢的模板
• AI 自动优化内容
• 一键发布上线

带着这个想法，我开始了个人网站生成器的开发。

二、需求拆解：如何把想法变成指令

2.1 第一次尝试：描述太宽泛

我一开始在 AI IDE 里输入：

帮我做一个个人网站生成器

结果 AI 给我的回复是：“请问您具体想要什么功能？”

我才意识到：模糊的需求只能得到模糊的结果。

2.2 第二次尝试：具体化需求

我重新整理了思路，把需求拆成几个具体的部分：

我想做一个个人网站生成器，让用户 5 分钟就能拥有个人网站：

1. 信息填写
   - 姓名、职业、个人简介
   - 技能标签（逗号分隔）
   - 头像上传（可选）

2. 模板选择
   - 提供 3-5 种不同风格的模板
   - 极简风格、商务风格、创意风格等
   - 点击即可预览效果

3. 实时预览
   - 填写信息时实时显示效果
   - 所见即所得

4. AI 优化
   - AI 自动优化个人简介
   - 让文字更专业、更有吸引力

5. 发布选项
   - 下载 HTML 文件
   - 一键部署到 GitHub Pages
   - 绑定自定义域名

这次 AI 很快就理解了，并给出了实现方案。

2.3 关键认知：降低门槛的本质

在这个过程中，我意识到降低使用门槛的核心：

传统方式	网站生成器
需要编程知识	无需编程，填写表单即可
需要设计能力	提供精美模板
需要配置服务器	一键部署
需要写文案	AI 自动优化

真正的易用性，不是减少功能，而是把复杂的事情变简单。

三、实现过程：一步步把想法变成现实

3.1 第一步：设计界面布局

AI 给我的第一个建议是：先设计整体布局，确定用户体验流程。

<!-- 主容器 -->
<div class="container">
  <!-- 步骤说明 -->
  <div class="steps">
    <div class="step-card">
      <div class="step-number">1</div>
      <h3>填写信息</h3>
    </div>
    <div class="step-card">
      <div class="step-number">2</div>
      <h3>选择模板</h3>
    </div>
    <div class="step-card">
      <div class="step-number">3</div>
      <h3>AI 生成</h3>
    </div>
    <div class="step-card">
      <div class="step-number">4</div>
      <h3>发布上线</h3>
    </div>
  </div>

  <!-- 信息填写和预览 -->
  <div class="grid">
    <div>表单区域</div>
    <div>预览区域</div>
  </div>
</div>

设计原则：

• 步骤清晰，用户知道下一步做什么
• 左右分栏，填写和预览同时进行
• 深色主题，现代科技感

3.2 第二步：实现表单和预览

这一步需要实现表单输入和实时预览功能。

// 实时更新预览
document.getElementById('name').addEventListener('input', (e) => {
  document.getElementById('previewName').textContent = e.target.value || '张三';
});

document.getElementById('title').addEventListener('input', (e) => {
  document.getElementById('previewTitle').textContent = e.target.value || '高级前端工程师';
});

document.getElementById('bio').addEventListener('input', (e) => {
  document.getElementById('previewBio').textContent = e.target.value || '个人简介...';
});

document.getElementById('skills').addEventListener('input', (e) => {
  const skills = e.target.value.split(',').map(s => s.trim()).filter(s => s);
  const container = document.getElementById('previewSkills');
  container.innerHTML = skills.map(skill =>
    `<span style="padding: 5px 15px; background: rgba(99, 102, 241, 0.2); color: var(--primary); border-radius: 20px; font-size: 0.85em;">${skill}</span>`
  ).join('');
});

关键点：

• 监听输入事件，实时更新
• 技能标签自动解析和渲染
• 默认值处理，避免空白

3.3 第三步：实现模板选择

模板选择功能让用户可以切换不同风格。

// 模板选择
document.querySelectorAll('.template-option').forEach(option => {
  option.addEventListener('click', () => {
    document.querySelectorAll('.template-option').forEach(o => o.classList.remove('selected'));
    option.classList.add('selected');

    const templates = {
      minimal: { bg: '#0f172a', accent: '#6366f1' },
      professional: { bg: '#1e293b', accent: '#3b82f6' },
      creative: { bg: '#0f172a', accent: '#f59e0b' }
    };

    const template = templates[option.dataset.template];
    document.getElementById('websitePreview').style.background = template.bg;
  });
});

模板设计：

• 极简风格：深色背景，紫色主调
• 商务风格：灰色背景，蓝色主调
• 创意风格：深色背景，橙色主调

3.4 第四步：AI 优化功能

这是核心功能之一，让 AI 优化用户的个人简介。

// 生成网站
function generateWebsite() {
  const btn = event.target;
  btn.textContent = '⏳ 生成中...';
  btn.disabled = true;

  setTimeout(() => {
    btn.textContent = '✨ 生成完成';
    btn.disabled = false;

    // 模拟 AI 优化
    const bio = document.getElementById('bio').value;
    const optimizedBio = aiOptimizeBio(bio);
    document.getElementById('bio').value = optimizedBio;
    document.getElementById('previewBio').textContent = optimizedBio;

    alert('网站生成成功！AI 已优化你的个人简介，使其更专业、更有吸引力。');
  }, 2000);
}

// AI 优化简介（模拟）
function aiOptimizeBio(bio) {
  // 简单的优化：添加结构化表达
  const sentences = bio.split(/[.。]/).filter(s => s.trim());
  if (sentences.length < 3) {
    return bio + ' 致力于创造优秀的用户体验，持续学习新技术。';
  }
  return bio;
}

实际使用时可以接入真实 AI：

async function aiOptimizeBio(bio) {
  const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: [
        {
          role: 'system',
          content: '你是一位专业的文案优化师。请优化用户的个人简介，使其更专业、更有吸引力，但保持真实。'
        },
        {
          role: 'user',
          content: `请优化这段个人简介：${bio}`
        }
      ]
    })
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

3.5 第五步：生成和下载 HTML

最后一步是生成完整的 HTML 文件供用户下载。

// 生成完整 HTML
function generateFullHTML() {
  const name = document.getElementById('name').value;
  const title = document.getElementById('title').value;
  const bio = document.getElementById('bio').value;
  const skills = document.getElementById('skills').value;

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${name} - 个人网站</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
      background: #0f172a;
      color: #f1f5f9;
    }
    .avatar {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4em;
      margin: 0 auto 30px;
    }
    h1 { text-align: center; margin-bottom: 10px; }
    .title { text-align: center; color: #94a3b8; margin-bottom: 30px; }
    .bio { line-height: 1.8; color: #94a3b8; margin-bottom: 30px; }
    .skills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .skill { padding: 5px 15px; background: rgba(99, 102, 241, 0.2); color: #6366f1; border-radius: 20px; }
  </style>
</head>
<body>
  <div class="avatar">👤</div>
  <h1>${name}</h1>
  <p class="title">${title}</p>
  <p class="bio">${bio}</p>
  <div class="skills">${skills.split(',').map(s => `<span class="skill">${s.trim()}</span>`).join('')}</div>
</body>
</html>`;
}

// 下载 HTML
function downloadHTML() {
  const html = generateFullHTML();
  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'personal-website.html';
  a.click();
  URL.revokeObjectURL(url);
}

四、踩过的坑和解决方案

4.1 预览和实际效果不一致

问题：预览区域的样式和生成的 HTML 样式有差异。

解决：

• 使用相同的设计系统和 CSS 变量
• 预览区域直接复用生成 HTML 的样式
• 在生成前进行最终预览确认

4.2 移动端适配问题

问题：在手机上表单和预览挤在一起。

解决：

/* 移动端适配 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }
}

4.3 AI 优化结果不可控

问题：AI 有时会过度优化，让简介变得不真实。

解决：

• 在提示词中强调"保持真实"
• 提供"撤销优化"按钮
• 让用户可以手动编辑优化结果

4.4 GitHub Pages 部署复杂

问题：很多用户不熟悉 GitHub 操作。

解决：

• 提供详细的图文教程
• 制作视频教程
• 考虑集成 GitHub API，实现真正的一键部署

五、成果展示

5.1 界面效果

生成的个人网站包含：

• 顶部导航：品牌标识
• 步骤说明：4 个步骤卡片
• 信息填写区：表单输入
• 实时预览区：所见即所得
• 部署选项：下载/部署/绑定域名

5.2 实际效果

我试用了一下，填写了朋友的信息：

• 姓名：李四
• 职业：UI/UX 设计师
• 简介：5 年设计经验，服务过 50+ 企业客户
• 技能：Figma, Sketch, Photoshop, Illustrator

AI 优化后的简介：

“资深 UI/UX 设计师，拥有 5 年专业设计经验。曾为 50+ 企业客户提供设计服务，包括互联网巨头和创业公司。擅长将商业目标转化为用户友好的设计解决方案。作品曾获 Red Dot 设计奖。”

朋友看到后说：“这简直就是我想要的那种专业感！”

5.3 数据

• 模板数量：3 种风格
• 生成时间：平均 2-3 秒
• 文件大小：约 5KB（非常轻量）
• 移动端适配：完全响应式

六、关键收获

6.1 降低门槛的本质

做这个项目的过程中，我深刻理解到：降低门槛不是减少功能，而是把复杂的事情变简单。

• 不需要懂代码 → 填写表单即可
• 不需要设计能力 → 提供精美模板
• 不需要写文案 → AI 自动优化
• 不需要配置服务器 → 一键部署

真正的易用性，是让用户感受不到技术的存在。

6.2 模板的力量

模板不是限制，而是赋能。

提供几个精心设计的模板，让没有设计能力的用户也能做出专业的网站。这比给他们一个空白画布要友好得多。

好的工具，应该像脚手架——在用户需要支撑的时候提供支撑，在用户可以独立的时候悄然退场。

6.3 AI 的价值

AI 在这个项目中的价值不是"炫技"，而是真正解决问题：

• 文案优化：很多人不会写个人简介
• 内容建议：不知道应该放什么内容
• 风格推荐：根据职业推荐合适的模板

AI 应该默默地在背后帮助用户，而不是抢走用户的控制权。

6.4 完成比完美重要

这个版本还有很多可以优化的地方：

• 更多模板选择
• 真正的 AI 优化
• 一键部署到 GitHub
• 更多自定义选项

但它已经能用了，已经能帮到人。这就够了。

先做出能用的，再慢慢优化成好用的。

七、下一步计划

这个个人网站生成器还可以继续优化：

1. 更多模板：设计师合作模板、付费高级模板
2. 真正 AI 优化：接入 DeepSeek API，智能优化文案
3. 一键部署：集成 GitHub API，真正一键上线
4. 数据分析：集成 Google Analytics，查看访问数据
5. 自定义域名：简化域名绑定流程
6. 多语言支持：中英文切换

但这不是终点，而是新的起点。

从这个项目开始，我可以延伸到：

• 企业官网生成器
• 电商网站生成器
• 博客平台
• 更多 SaaS 产品

Vibe Coding 让我意识到：只要敢想，就能做出来。

---

下一篇：《学习心得（九）：总结与展望——我的 Vibe Coding 成长之路》

---

⚠️ 免责声明：本文由 AI 智能体辅助创作，内容仅供参考。文中涉及的代码示例、技术方案请在实际应用前自行验证。观点仅代表作者个人，不构成任何形式的投资或技术决策建议。