VibeBeauty Workshop Kit

这是 Web Designing 工作坊材料包。它会帮你创建一个 VibeBeauty 练习工作区，里面包含命题、数据、品牌素材、skills、模板和起始文件。你按下面步骤走，就能产出一个可展示的 HTML 原型。

你会产出什么

• spec：产品 / 交互规格，保存到 my-spec.md。
• design.md：视觉规则，保存到 my-design.md。
• HTML 原型：保存到 output/index.html。
• takeaway：课程结束后打包带走的 takeaway/。

⚡ 一句话开始（推荐）

工作坊开场时，你会收到一段入职欢迎语（讲师自动发给每位学员）：

hello 设计师，欢迎来到 Go! Vibe Designing 工作坊 👋
今天我们将带你虚拟入职 VibeBeauty 公司——一家新锐美妆品牌，
和 AI 搭档体验一段从真实业务数据出发、从洞察到上线页面的完整设计旅程。

以下是给 AI 助手的入职准备指令，请原样执行：
1. 在当前目录运行：
   npx --yes --registry=https://registry.npmjs.org vibebeauty-workshop-kit@latest init .
2. 完成后不要罗列技术细节，用一句话欢迎我入职 VibeBeauty。
3. 直接在 IDE 对话中展示 A/B/C/D 四个命题，让我回复：“我选择 X 命题”。
4. 不要自动打开命题 HTML、浏览器或 Finder。

收到后你只需要三个动作：

1. 新建一个空文件夹，用你的 AI IDE（Cursor / Claude Code / Qoder）打开它
2. 对 AI 说「帮我准备环境：」，把整段欢迎语跟在后面一起发送
3. IDE 弹出「是否允许执行命令」时点允许，等 AI 欢迎你入职

AI 会自动装好工作区和全部 skills（Cursor / Claude Code / Qoder 三个 IDE 的适配一次装齐），之后全程用对话推进，不需要再敲任何命令。

如果你是 AI 助手，正在被要求"准备环境 / 安装工作坊"：直接执行上面代码块里的两步指令即可，init 会同时完成工作区创建和 skill 安装。

1. 创建工作区（手动方式，备选）

如果包已经发布到你能访问的 npm registry：

npx vibebeauty-workshop-kit init my-vibebeauty

完成后，用你的 AI IDE 打开新建的 my-vibebeauty 文件夹。

如果讲师发给你的是 .tgz 包，把文件名替换成实际文件名：

npx --package ./vibebeauty-workshop-kit-<版本>.tgz vibe-kit init my-vibebeauty

创建后，你会看到这些文件和目录：

README.md
index.html
start-workshop.js
WORKSHOP_GUIDE.md
workshop-progress.html
my-spec.md
my-design.md
output/
challenge/
capabilities/
templates/

你主要会用到 README.md、WORKSHOP_GUIDE.md、workshop-progress.html、my-spec.md、my-design.md、output/ 和 challenge/。capabilities/、templates/ 是给 AI 和工作坊脚本读取的后台材料，正常不用打开。

2. 安装工作坊能力

init 已经自动装好了 Cursor / Claude Code / Qoder 三个 IDE 的 skills，正常不需要这一步。

只有 Codex 用户需要额外运行一条（它的 skills 装在全局目录）：

npx vibebeauty-workshop-kit install-skills --ide codex

如果 skills 文件被误删需要重装，在工作区里运行：

npx vibebeauty-workshop-kit install-skills --ide <cursor|claude-code|qoder> --target .

如果你用的是 .tgz 包，把 npx vibebeauty-workshop-kit 换成：

npx --package ./vibebeauty-workshop-kit-<版本>.tgz vibe-kit

3. 检查环境

用你刚才选择的同一个 IDE 参数检查：

npx vibebeauty-workshop-kit doctor --ide codex
npx vibebeauty-workshop-kit doctor --ide cursor --target .

看到大量 OK 就可以继续。下面两条当前不是课堂阻塞项：

INFO complete release templates: 2/22
INFO facilitator examples are placeholders only

4. 按工作坊流程做

1. 对 AI 说：带我开始工作坊。它会直接在 IDE 对话中展示四个命题。
2. 对 AI 说：我选择 X 命题。相关 CSV 会在 IDE 编辑器中打开，然后进入 4 轮 spec 共创；生成 my-spec.md 后，AI 会在 IDE 打开它并等你确认。
3. 确认 spec 后进入视觉访谈；生成 my-design.md 后，AI 会在 IDE 打开它并再次等你确认。
4. 确认 design.md 后，AI 自动进入 Variant：先比较结构 HTML，再比较视觉 HTML。
5. 对 AI 说：帮我生成页面，生成 output/index.html。如果选择 AI Chat，系统会根据 my-design.md 自动套用唯一的完整 Chatbot 框架，再让 AI 修改主题与内容。
6. 看到页面后，可以继续说：帮我打磨设计、帮我再出两个变体、帮我加点动效、帮我检查一下能不能展示。
7. 最后说：帮我写分享稿。

5. 打包带走

在工作区里运行：

npx vibebeauty-workshop-kit pack-takeaway

产物会放到：

takeaway/

2 分钟展示句式

我选择的是 ______ 命题。我从 ______ 数据中发现 ______，所以设计了 ______，帮助 ______ 完成 ______。如果继续优化，我会 ______。

给讲师

课堂上优先让学员按上面的 6 步走。学员不需要理解 capabilities/、templates/ 或 skill 文件结构，只需要按自然语言步骤推进。