项目概览

人物：小张，开了一家设计工作室，需要一个官网展示作品 目标：一个 5 页的响应式官网 + 联系表单 用时：约 4 小时（从零到上线） 最终成果：一个专业的公司官网，部署在 Vercel

用到的 Skills 一览

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

# 设计
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 aj-geddes/useful-ai-prompts@nodejs-express-server -g -y

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

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

阶段 0：准备工作

需要注册的账号

需要安装的工具

✅ 全部注册安装完大约需要 15 分钟。

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

做什么

让 AI 帮你写一份 PRD，明确官网需要展示什么。

复制这段提示词给 AI

请帮我写一份产品需求文档（PRD），项目是「墨研设计工作室官网」。

我是一个设计工作室的创始人，完全不会编程，想用 AI 帮我建一个公司官网。

工作室信息：
- 名称：墨研设计
- 服务：品牌设计、UI/UX 设计、包装设计
- 团队：5 人
- 城市：上海

网站需要 5 个页面：
1. 首页 — 一句话介绍 + 精选作品 + 服务概览 + 联系引导
2. 作品集页 — 按项目分类展示过往案例
3. 关于我们 — 团队介绍 + 工作室理念
4. 服务页 — 各项服务详细介绍 + 报价参考
5. 联系页 — 联系表单 + 公司信息 + 地图

设计风格要简约、有设计感，体现工作室的审美水平。颜色以深色为主，突出作品本身。

得到的结果

AI 会生成一份完整的 PRD，包含目标客户分析、页面结构和内容策略。

阶段 2：设计与原型

做什么

确定网站的视觉风格和页面布局。官网是设计公司的门面，设计要够好看。

🎨 Skill：ui-ux-pro-max

复制这段提示词给 AI

请为我的设计公司官网推荐设计风格。

公司名称：墨研设计
目标客户：需要品牌设计/UI 设计/包装设计的企业客户
风格调性：简约、高级、专业、有艺术感

需要 5 个页面的布局建议：
1. 首页：全屏视频/大图 Hero + 服务介绍 3 卡片 + 精选作品展示 + 客户 Logo 墙 + CTA
2. 作品集：网格展示，每张卡片悬停显示项目名称 + 分类标签，点击进入详情弹窗
3. 关于我们：团队照片 + 工作室故事 + 团队成员个人介绍
4. 服务：每项服务独立卡片，含价格范围 + 交付周期 + 案例链接
5. 联系：表单（姓名/公司/邮箱/需求描述）+ 公司地址 + 地图

请给出配色方案（推荐深色为主）和字体建议。

得到的设计方案

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

• 配色：深色背景（#1a1a1a）+ 白色文字 + 品牌色点缀（金色或蓝色）
• 字体：英文用 Playfair Display（标题）+ Inter（正文）、中文用 Noto Sans SC
• 布局：大量留白、全屏展示作品、滚动动画

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

做什么

让 AI 把设计变成真正的网页。

💻 Skill：tailwindcss-v4

第一步：创建项目

# 在终端执行
npm create astro@latest moyan-studio -- --template basics
cd moyan-studio
npm install

第二步：生成首页

请帮我生成一个设计公司官网的首页（index.astro）。

公司名称：墨研设计
风格：深色背景、简约高级、突出作品

首页包含：
1. 顶部导航栏：Logo「墨研设计」+ 导航链接（首页 / 作品集 / 关于 / 服务 / 联系），透明背景，滚动后变半透明深色
2. Hero 区域：深色全屏背景，居中的大字标题「设计，让品牌更有温度」，副标题「墨研设计 | 上海 · 品牌 · UI · 包装」，一个「查看作品」渐变按钮
3. 服务概览：3 张卡片（品牌设计 / UI/UX 设计 / 包装设计），每张含图标 + 标题 + 简短描述，悬停有上浮效果
4. 精选作品：4-6 个作品卡片网格，图片用 picsum.photos 占位，悬停显示半透明遮罩 + 项目名称
5. 客户 Logo 墙：一行展示 6 个客户 logo 占位（灰色占位块）
6. 联系 CTA 区域：深色背景，文案「想让你的品牌脱颖而出？」+「联系我们」按钮
7. 页脚：公司信息 + 社交媒体链接 + 版权

要求：
- 所有样式用 Tailwind CSS（使用 dark 主题）或内联 style
- 响应式设计
- 平滑滚动 + 淡入动画
- 代码要加中文注释

第三步：生成作品集页面

请帮我生成设计公司官网的作品集页面（portfolio.astro）。

要求：
1. 导航和页脚与首页一致
2. 页面标题「我们的作品」
3. 分类筛选：全部 / 品牌设计 / UI/UX / 包装
4. 作品以网格展示（桌面 3 列、平板 2 列、手机 1 列）
5. 每个作品卡片：大图占位 + 项目名称 + 分类标签
6. 悬停效果：图片放大 + 半透明遮罩显示详情
7. 点击打开作品详情弹窗（Modal）：
   - 大图展示
   - 项目名称 + 客户名
   - 项目描述
   - 服务类别标签
8. 弹窗点击遮罩区域关闭，按 ESC 键关闭

模拟数据至少包含 8 个作品，涵盖不同类别。

第四步：生成关于我们页面

请帮我生成设计公司的关于我们页面（about.astro）。

内容：
1. 导航 + 页脚保持一致
2. Hero 区域：团队合照占位（大图）+ 标题「关于墨研」
3. 工作室故事：2 段文字介绍工作室的创立理念和价值观
   - 2018 年成立于上海
   - 专注于品牌设计与数字化体验
   - 服务过 50+ 企业客户
4. 团队介绍：3-5 个成员卡片
   - 头像（圆形占位图）
   - 姓名 + 职位
   - 一句话介绍
5. 数据展示：3 个数字（50+ 客户 / 200+ 项目 / 5 年经验）带动画计数效果
6. 客户评价轮播：3 个客户评价，左右箭头切换

布局：使用分栏 + 交错布局，避免单调。页面要有设计感，体现工作室的审美。

第五步：生成服务页面

请帮我生成设计公司的服务页面（services.astro）。

内容：
1. 导航 + 页脚保持一致
2. 页面标题「我们的服务」
3. 3 项服务的详细介绍：

服务一：品牌设计
- 包含：Logo 设计、品牌 VI、品牌指南手册
- 价格范围：¥15,000 - ¥50,000
- 交付周期：2-4 周
- 案例链接：#（占位）

服务二：UI/UX 设计
- 包含：App 设计、网页设计、设计系统
- 价格范围：¥20,000 - ¥80,000
- 交付周期：3-6 周
- 案例链接：#（占位）

服务三：包装设计
- 包含：产品包装、礼盒设计、标签设计
- 价格范围：¥8,000 - ¥30,000
- 交付周期：1-3 周
- 案例链接：#（占位）

4. 每项服务用卡片展示，含图标 + 详细说明
5. 底部 FAQ：3-5 个常见问题（折叠面板 Accordion 效果）
6. 页面底部 CTA：「需要设计服务？联系我们」

第六步：生成联系页面 + 对接 Supabase

请帮我生成设计公司的联系页面（contact.astro），并配置表单提交到 Supabase。

内容：
1. 导航 + 页脚保持一致
2. 页面标题「联系我们」
3. 联系表单：
   - 姓名（必填）
   - 邮箱（必填，邮箱格式验证）
   - 公司名称
   - 服务需求（下拉选择：品牌设计 / UI/UX 设计 / 包装设计 / 其他）
   - 预算范围（下拉选择：¥10,000以下 / ¥10,000-30,000 / ¥30,000-50,000 / ¥50,000以上）
   - 需求描述（多行文本，必填）
   - 提交按钮
4. 右侧信息：地址 / 电话 / 邮箱 / 微信 / 小红书
5. 嵌入上海地图（用占位 iframe）
6. 提交后显示成功提示

表单数据需要提交到 Supabase：
- 使用 Supabase JS SDK
- 表名：contacts
- 使用 RLS 策略允许匿名插入
- 在项目根目录创建 .env 文件存放 SUPABASE_URL 和 SUPABASE_ANON_KEY
- 提交成功后清空表单并显示「感谢您的留言，我们会尽快与您联系！」

⚠️ Supabase 配置：在 Supabase Dashboard 创建 contacts 表，然后在项目设置中复制 URL 和 anon key 到 .env 文件。

阶段 4：后端与数据

做什么

官网只需要一个能接收咨询表单的数据库。

复制这段提示词给 AI

请帮我设计一个官网联系表单的数据库表。

项目名称：墨研设计工作室官网
数据库平台：Supabase（PostgreSQL）

需求：
1. 访客填写联系表单，数据存入数据库
2. 表单字段：姓名、邮箱、公司名称、服务需求类型、预算范围、需求描述
3. 需要自动记录提交时间
4. 需要允许匿名用户提交（不登录也能留言）

请帮我：
1. 设计表结构，包含所有字段和合适的类型
2. 说明字段的约束条件（必填/选填）
3. 设计 Row Level Security (RLS) 策略，允许匿名插入
4. 告诉我如何在 Supabase Dashboard 中创建这张表

同时提供 JavaScript SDK 插入数据的示例代码。

得到的结果

AI 会生成完整的建表 SQL 和配置说明：

在 Supabase 中创建

1. 打开 Supabase，用 GitHub 登录
2. 创建新项目（名字随意，比如 moyan-contact）
3. 进入 SQL Editor，执行建表语句：

CREATE TABLE contacts (
  id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  company TEXT,
  service_type TEXT,
  budget TEXT,
  message TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

4. 启用匿名插入：进入 Authentication → Policies，为 contacts 表添加一条策略：
   • 策略名称：Allow anonymous insert
   • 操作：INSERT
   • 角色：anon
   • USING：留空
   • WITH CHECK：true

验证

提交一条测试数据，看 Supabase 的 Table Editor 中是否出现新记录。

阶段 5：测试

做什么

检查官网所有页面和功能是否正常。

🧪 Skill：javascript-testing

检查清单

请帮我检查设计公司官网是否完整。逐项确认：

功能测试：
- [ ] 所有 5 个页面导航是否正常跳转
- [ ] 首页 Hero 区域是否全屏显示
- [ ] 作品集筛选是否工作
- [ ] 作品详情弹窗是否正常打开/关闭
- [ ] 联系表单提交是否成功反馈
- [ ] 表单验证（必填字段 + 邮箱格式）是否生效
- [ ] 手机端导航折叠菜单是否正常
- [ ] 服务页面 FAQ 折叠面板是否工作

视觉检查：
- [ ] 深色主题是否一致
- [ ] 图片占位是否正常
- [ ] 悬停动画是否流畅
- [ ] 各页面间距是否统一

响应式检查：
- [ ] 桌面端（1920px）显示是否正常
- [ ] 平板（768px）显示是否正常
- [ ] 手机（375px）显示是否正常

常见问题及修复

阶段 6：部署上线

做什么

把官网部署到互联网上，客户可以直接访问。

🚀 Skill：devops-deployment

用 Vercel 部署

我是一个编程初学者，请教我用 Vercel 部署 Astro 网站。

我的代码在本地的 moyan-studio 文件夹中。

请教我：
1. 如何在 GitHub 上创建仓库并上传代码
2. 如何在 Vercel 上导入仓库
3. 如何在 Vercel 中设置环境变量（SUPABASE_URL 和 SUPABASE_ANON_KEY）
4. 如何配置自定义域名（我有自己的域名）

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

阶段 7：运维与监控

做什么

确保官网稳定运行。

配置监控

1. Vercel Analytics：查看访问量、页面停留时间
2. Supabase 后台：查看表单提交记录，确保没有丢失

日常维护

每周做这些事：
1. 打开网站看看所有页面是否正常加载
2. 检查 Supabase 后台是否有新咨询
3. 及时回复客户留言
4. 更新作品集，添加新案例

阶段 8：运营与增长

做什么

让更多潜在客户找到你的官网。

📈 Skill：不需要额外 skill

SEO 优化提示词

请帮我优化设计公司官网的 SEO。

公司名称：墨研设计
服务地区：上海
服务项目：品牌设计、UI 设计、包装设计

要求：
1. 为每个页面优化 title 和 meta description
2. 首页添加 LocalBusiness 结构化数据
3. 作品集页面添加 CreativeWork 结构化数据
4. 建议目标关键词（例：上海品牌设计公司、上海 UI 设计、logo 设计等）
5. 每张图片加 alt 描述
6. 生成 sitemap.xml

推广清单

阶段 9：文案优化

做什么

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

✍️ Skill：不需要额外 skill

首页文案优化

请帮我的设计公司官网写几版不同的核心文案。

公司名：墨研设计
风格：简约、专业、有温度
目标客户：需要品牌升级的中小企业

需要优化的文案：
1. Hero 主标题（10 字以内）：现用「设计，让品牌更有温度」
2. Hero 副标题（20 字以内）
3. 服务卡片描述（每段 30 字以内）
4. CTA 按钮文案

请提供 3 个不同风格的方案：
- A 方案：专业正式风
- B 方案：文艺感性风
- C 方案：直接效果风

完整项目文件清单

moyan-studio/
├── src/
│   ├── pages/
│   │   ├── index.astro        # 首页
│   │   ├── portfolio.astro    # 作品集
│   │   ├── about.astro        # 关于我们
│   │   ├── services.astro     # 服务
│   │   └── contact.astro      # 联系
│   ├── components/
│   │   ├── Nav.astro          # 导航栏组件
│   │   ├── Footer.astro       # 页脚组件
│   │   ├── ProjectCard.astro  # 作品卡片
│   │   ├── ProjectModal.astro # 作品详情弹窗
│   │   ├── ServiceCard.astro  # 服务卡片
│   │   └── TeamMember.astro   # 团队成员
│   ├── layouts/
│   │   └── BaseLayout.astro   # 基础布局
│   └── styles/
│       └── global.css         # 全局样式
├── public/
│   └── images/                # 图片资源
├── .env                       # Supabase 配置
├── astro.config.mjs
└── package.json

🎉 恭喜！ 你已经用 Vibe Coding 做出了一个专业的设计公司官网。整个过程你只需要：

1. 告诉 AI 你的公司信息
2. 复制 AI 生成的代码
3. 配置 Supabase 表单
4. 部署上线

现在你可以把链接发给客户了！

进阶挑战

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

• 添加页面过渡动画（页面切换时平滑过渡）
• 图片懒加载 + 渐进式加载（模糊占位 → 清晰图）
• 集成 Google Analytics / Umami 统计
• 添加博客/资讯板块，发布设计行业文章
• 添加作品搜索功能
• 多语言切换（中/英/日）
• 添加 AI 设计助手聊天浮窗

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