项目概览

人物：小橘，摄影爱好者，完全零编程基础 目标：做一个作品展示网站，吸引客户约拍 用时：约 2 小时（从零到上线） 最终成果：一个 4 页响应式摄影作品网站，部署在 Vercel

用到的 Skills 一览

开始前，先安装本案例会用到的所有 Skill：

# 产品定义
npx skills add phuryn/pm-skills@create-prd -g -y

# UI/UX 设计
npx skills add nexu-io/open-design@ui-ux-pro-max -g -y

# 前端开发
npx skills add busirocket/agents-skills@busirocket-tailwindcss-v4 -g -y

# 测试
npx skills add wshobson/agents@javascript-testing-patterns -g -y

# 部署
npx skills add yonatangross/orchestkit@devops-deployment -g -y

💡 提示：以上命令在终端执行，-g 表示全局安装，-y 表示自动确认。如果某条报错，不影响其他 skill 的使用。

阶段 0：准备工作

需要注册的账号

需要安装的工具

✅ 全部注册安装完大约需要 15 分钟。不需要记住怎么用，AI 会一步步教你。

阶段 1：产品定义（写 PRD）

做什么

让 AI 帮你写一份产品需求文档（PRD），把”我想做个摄影网站”这个模糊的想法变成 AI 能理解的清晰需求。

🎯 Skill：create-prd

复制这段提示词给 AI

在产品目录中创建一个 p/ 文件夹（随便什么名字），然后执行：

npx skills create-prd

按提示输入以下信息：

• 项目名称：小橘的摄影集
• 一句话描述：个人摄影作品展示网站，吸引约拍客户
• 目标用户：潜在约拍客户（新娘、情侣、家庭）
• 核心功能：
  1. 作品分类展示（人像、风景、婚礼）
  2. 关于我页面
  3. 联系预约表单
  4. 响应式设计（手机/电脑都能看）

💡 如果你更喜欢直接对话，也可以用这段提示词：

请帮我写一份产品需求文档（PRD），项目是「小橘的摄影集」。

我是一个完全不会编程的摄影爱好者，想用 AI 帮我建一个个人摄影作品网站。

网站需要：
1. 首页 — 精选作品大图展示，一句话介绍"用镜头讲述你的故事"
2. 作品集页 — 按人像/风景/婚礼分类展示，点击可查看大图
3. 关于我页 — 摄影师的故事和风格介绍
4. 联系页 — 预约表单 + 社交媒体链接

设计风格要极简、黑白为主、突出照片本身。目标用户是想约拍的潜在客户。

得到的结果

AI 会生成一份完整的 PRD，包含：

• 项目背景和目标
• 用户画像
• 功能清单和优先级
• 页面结构
• 技术建议

保存好这份 PRD，后续所有开发都基于它。

阶段 2：设计与原型

做什么

确定网站的视觉风格和页面布局。

🎨 Skill：ui-ux-pro-max

复制这段提示词给 AI

请为我的摄影作品网站推荐设计风格。网站叫「小橘的摄影集」，目标用户是约拍客户。

要求：
- 风格关键词：极简、高级感、突出照片、黑白为主
- 参考品牌风格：类似 VSCO、Instagram 的视觉调性
- 需要 4 个页面的布局建议：
  1. 首页：全屏大图轮播 + 一句话标题
  2. 作品集：瀑布流 / 网格布局，分类筛选
  3. 关于我：个人照片 + 文字介绍
  4. 联系：简洁表单 + 社交链接

请给出具体的配色方案、字体建议、每个页面的布局草图。

得到的设计方案

AI 会给出完整的设计方案。关键决策点：

• 配色：黑白灰为主，单张照片配色作为点缀
• 字体：英文用 Playfair Display、中文用 Noto Sans SC
• 布局：首页全屏展示、作品集用 Masonry 瀑布流

阶段 3：前端开发（核心）

做什么

让 AI 把设计变成真正的网页。这是最关键的步骤——所有代码都由 AI 生成，你只需要复制粘贴。

💻 Skill：tailwindcss-v4

第一步：创建项目结构

在 VS Code 中打开一个文件夹，创建以下文件结构：

xiaoju-photography/
├── index.html        # 首页
├── portfolio.html    # 作品集
├── about.html        # 关于我
├── contact.html      # 联系
├── style.css         # 全局样式
└── script.js         # 交互脚本

不会创建？把这段提示词复制给 AI：

我是一个完全不会编程的小白，请一步一步教我在 VS Code 中创建以上文件结构。每一步都说清楚点击哪里、输入什么。

第二步：生成首页

请帮我生成一个摄影作品展示网站的首页（index.html）。

网站名：小橘的摄影集
风格：极简、黑白为主、突出大图

首页包含：
1. 顶部导航栏：Logo「小橘摄影」+ 导航链接（首页 / 作品集 / 关于 / 联系）
2. 全屏英雄区：一张占满屏幕的大图背景，居中显示主标题"用镜头讲述你的故事"、副标题"深圳 | 人像 | 婚礼摄影"、一个「查看作品」按钮
3. 精选作品区域：展示 6 张占位图片（用 picsum.photos 的随机图片），3 列网格布局
4. 页脚：版权信息 + 社交媒体图标占位

要求：
- 所有样式写在 style.css 中
- 响应式设计（手机端导航折叠为汉堡菜单）
- 字体：使用 Google Fonts 的 Playfair Display（英文标题）+ Noto Sans SC（中文正文）
- 图片先用灰色占位块，标注"照片占位"
- 代码要加中文注释，方便我理解

AI 会生成 index.html 和 style.css。把生成的代码分别复制到对应文件中，然后在浏览器打开 index.html 查看效果。

第三步：生成作品集页面

请帮我生成摄影网站的作品集页面（portfolio.html），风格和首页保持一致。

包含：
1. 导航栏和页脚与首页相同（建议复用同一个导航组件）
2. 页面标题「作品集」
3. 分类筛选按钮：全部 / 人像 / 风景 / 婚礼
4. 作品以瀑布流（Masonry）布局展示，每个作品卡片包含：
   - 图片（用 picsum.photos 随机图占位）
   - 拍摄地点标签
   - 悬停时显示半透明遮罩 + 照片标题
5. 点击图片打开灯箱效果（大图预览）
6. 响应式：桌面 3 列、平板 2 列、手机 1 列

JavaScript 写到 script.js 中。

第四步：生成关于页面

请帮我生成摄影网站的「关于我」页面（about.html）。

内容：
1. 导航 + 页脚保持一致
2. 左侧：一张摄影师个人照（用灰色占位块）
3. 右侧：自我介绍文案
   - 标题：你好，我是小橘
   - 正文：我是一名深圳的独立摄影师，专注于人像和婚礼摄影。我相信每一张照片都是一个故事。从事摄影 5 年，服务过 200+ 客户。
   - 几个关键数据：5 年经验 / 200+ 客户 / 500+ 场拍摄
4. 页面底部展示合作品牌或媒体（用占位 logo）

用 flex 布局实现左右分栏，手机端改为上下排列。

第五步：生成联系页面

请帮我生成摄影网站的「联系我们」页面（contact.html）。

包含：
1. 导航 + 页脚保持一致
2. 页面标题「预约拍摄」
3. 联系表单，字段：
   - 姓名（文本输入框）
   - 邮箱（邮箱输入框）
   - 拍摄类型（下拉选择：人像 / 风景 / 婚礼 / 其他）
   - 期望日期（日期选择器）
   - 需求描述（多行文本）
   - 提交按钮
4. 表单提交到 Formspree（action="https://formspree.io/f/你的表单ID"）
5. 右侧展示联系方式：微信 / 微博 / 小红书 / 邮箱
6. 提交成功后显示感谢信息

加上表单验证：必填字段不能为空，邮箱格式要正确。

⚠️ 关于 Formspree：注册 Formspree 后，创建一个新表单，把表单 ID 替换到 action URL 中（https://formspree.io/f/你的表单ID）。

第六步：完善导航

请帮我完善网站的导航交互（script.js）：

1. 当前页面在导航中高亮显示
2. 手机端汉堡菜单的展开/收起
3. 点击导航链接后自动关闭手机菜单
4. 页面滚动时导航栏添加半透明背景

导航交互逻辑要求：
- 所有页面共用同一套导航结构
- 高亮当前页面的导航项（通过对比当前 URL 判断）

阶段 4：后端与数据

做什么

摄影网站不需要复杂的后端，只需要一个能接收预约的表单。

🗄️ Skill：不需要额外 skill，用 Formspree 即可

步骤

1. 打开 Formspree，用 GitHub 登录
2. 点击 New Form，创建一个新表单
3. 复制表单 ID（URL 中 /f/ 后面的部分）
4. 替换 contact.html 中 action 属性的值

验证

用浏览器打开联系页面，提交一条测试数据。Formspree 后台会收到提交记录。

阶段 5：测试

做什么

检查网站能不能正常工作。

🧪 Skill：javascript-testing

检查清单

把以下内容复制给 AI：

请帮我检查摄影网站是否完整。我需要你逐项确认：

功能测试：
- [ ] 首页大图是否正常显示
- [ ] 导航链接是否能跳转到对应页面
- [ ] 作品集页的分类筛选是否工作
- [ ] 灯箱点击是否能查看大图
- [ ] 手机端汉堡菜单能否展开收起
- [ ] 联系表单提交是否有反馈
- [ ] 表单验证（空字段、邮箱格式）是否生效

兼容性测试：
- [ ] 桌面端（1920px）显示是否正常
- [ ] 平板（768px）显示是否正常
- [ ] 手机（375px）显示是否正常

代码检查：
- [ ] HTML 标签是否闭合
- [ ] CSS 类名是否正确
- [ ] JavaScript 有无语法错误

常见问题及修复

阶段 6：部署上线

做什么

把网站部署到互联网上，分享给客户看。

🚀 Skill：devops-deployment

方法一：用 Vercel（推荐，5 分钟）

我是一个完全不会编程的小白，请手把手教我用 Vercel 部署一个静态网站。

我的情况：
- 代码在本地电脑的 xiaoju-photography 文件夹中
- 已经注册了 GitHub 账号
- 没有用过命令行

请教我：
1. 如何在 GitHub 上创建仓库并上传代码（每一步点哪里）
2. 如何在 Vercel 上导入这个 GitHub 仓库
3. 如何设置自定义域名（可选）
4. 部署完成后如何更新网站

方法二：用 Netlify（同样免费）

和 Vercel 流程类似，选择 Netlify 的”拖拽部署”功能，直接把 xiaoju-photography 文件夹拖到浏览器即可。

✅ 部署完成后，你会得到一个 https://xxx.vercel.app 的链接，可以直接发给客户看。

阶段 7：运维与监控

做什么

确保网站稳定运行，出问题能及时发现。

配置 Vercel 监控

1. 登录 Vercel 控制台
2. 进入项目 → Analytics → 开启 Web Analytics（免费）
3. 进入项目 → Logs → 查看访问日志

日常维护

每周花 5 分钟做这些事：
1. 打开网站看看所有页面是否正常
2. 检查 Formspree 后台有没有新预约
3. 更新作品集，添加新照片

阶段 8：运营与增长

做什么

让更多人找到你的网站。

📈 Skill：不需要额外 skill

SEO 优化提示词

请帮我优化摄影网站的 SEO（搜索引擎排名）。

网站是个人摄影作品集，目标客户在深圳。

要求：
1. 帮我检查并优化每个页面的 title 和 meta description
2. 建议合适的关键词（例如：深圳摄影师、深圳约拍、深圳婚纱摄影等）
3. 帮我在首页添加结构化的本地商家数据（LocalBusiness Schema）
4. 建议图片的 alt 文本规范

社交媒体推广清单

阶段 9：文案优化

做什么

用 AI 优化网站文案，让访客更愿意联系你。

✍️ Skill：不需要额外 skill

首页文案优化

请帮我的摄影网站首页写几版不同的主标题和副标题。

网站风格：极简、高级感、黑白为主
目标用户：准备拍婚纱照/写真的人
我的风格：温暖、自然、纪实

要求：
- 主标题控制在 10 字以内
- 副标题控制在 20 字以内
- 提供 3 个不同风格的方案
- 示例参考：「用镜头讲述你的故事」

完整项目文件清单

项目最终的文件结构如下：

xiaoju-photography/
├── index.html          # 首页
├── portfolio.html      # 作品集
├── about.html          # 关于我
├── contact.html        # 联系
├── style.css           # 全局样式
├── script.js           # 交互脚本
└── images/             # 你的照片放在这里
    ├── hero.jpg        # 首页大图
    ├── portrait-1.jpg  # 作品图片
    └── ...

🎉 恭喜！ 你已经用 Vibe Coding 完全靠 AI 做出了一个完整的摄影作品网站。整个过程不需要写一行代码，你只需要：

1. 想清楚要什么
2. 用自然语言告诉 AI
3. 复制粘贴生成的代码
4. 部署上线

进阶挑战

做完了基础版？试试这些进阶功能：

• 添加暗房灯箱效果（点击图片全屏查看）
• 添加页面加载动画
• 集成 Instagram 动态展示
• 添加客户评价轮播
• 添加多语言切换（中/英）
• 预约成功后自动发送确认邮件

想实现哪个？直接把需求告诉 AI：“请为我的摄影网站添加 [功能名]，风格保持一致”。