Ship to Show
7阶段框架，用于将原型转化为作品集案例研究。
何时使用此技能
- 用户拥有原型（React、Vue、HTML、Figma 导出）并希望对其进行文档化
- 用户希望为自己的作品集创建一个案例研究
- 用户希望制作界面演示视频
- 用户希望将原型项目发布到自己的网站
需检查的先决条件
在开始之前，请确保已安装以下工具：
node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version
如果缺少某个工具，请提供安装命令（macOS）：
- Node.js：
brew install node - FFmpeg：
brew install ffmpeg - Git：
brew install git - GitHub CLI：
brew install gh然后gh auth login - Vercel CLI：
npm i -g vercel
7个阶段
1. 框架构建 → 识别行业、用户、问题、设计视角
2. 结构化 → 使原型在本地可执行
3. 丰富 → 添加缺失的路径以生成5个视频
4. 拍摄 → 通过Puppeteer + FFmpeg制作视频
5. 叙述 → 使用叙事结构和图例撰写案例研究
6. 打包 → GitHub、Vercel、自包含集成文件
7. 发布 → 集成到作品集网站
按顺序执行各个阶段。每个阶段在进入下一个阶段之前都需要生成具体的交付物。不要压缩阶段。
阶段 1：框架构建（15分钟）
输入：一个代码文件或原型 输出：case-study.md（v1）、CLAUDE.md、项目记忆
操作
- 读取原型源代码
- 识别：
- 行业领域及市场背景
- 目标用户（角色、使用场景、痛点）
- 解决的问题（尽可能包含关键数字）
- 现有的关键功能
- 设计视角（原型测试的假设）
- 撰写1500字符的执行摘要，包含叙事性小标题
- 创建一个包含项目定位的 CLAUDE.md
- 创建一个包含完整上下文的记忆文件
检查清单
- 已识别行业
- 已描述用户（角色、场景、痛点）
- 已用数字表述问题
- 设计视角明确
- 执行摘要已撰写
- CLAUDE.md 已创建
阶段 2：结构化（10分钟）
输入：原始代码文件 输出：在 localhost 上运行的项目
操作
- 创建包含已检测依赖的 package.json
- 配置构建工具（推荐 Vite）
- 如果使用了 Tailwind CSS，进行配置
- 创建 index.html 和入口点
- 执行 npm install
- 在 localhost 上启动
注意点
如果项目位于网络文件系统上（Google Drive、Dropbox、OneDrive），请先复制到本地再启动。文件监视器在远程文件系统上无法正常工作。
检查清单
- npm install 无错误
- npm run dev 启动服务器
- 原型在浏览器中显示
- 无控制台错误
阶段 3：丰富（30-45分钟）
输入：功能正常的原型 + 框架文档 输出：具有完整路径的可拍摄原型
操作
- 识别5个可拍摄路径：
- 概览/分类（收件箱、筛选、选择）
- 主要功能（产品的关键交互）
- 决策与反馈（操作、确认、影响）
- 边界情况（误报、错误、快速处理）
- 完整流程（顺序、会话指标）
- 列出每个路径缺失的交互
- 实现缺失的交互
- 为每种情况添加不同的数据
- 添加模拟连接（Slack、电子邮件、CRM、导出）
- 添加微交互（动画、声音反馈，如果相关）
检查清单
- 5个路径已识别并正常工作
- 每种情况使用不同数据
- 模拟集成可见
- 每个路径可在10到20秒内拍摄
阶段 4：拍摄（30分钟）
输入：已定义的路径 + 功能正常的原型 输出：5到8个 MP4 视频、5个 PNG 截图
操作
- 创建视频管线结构：
video-scenes/
├── capture.js
├── scenes/
│ ├── shared/
│ │ ├── design-tokens.css
│ │ ├── animations.css
│ │ └── components.css
│ ├── 01-scene.html
│ └── ...
└── output/
- 从原型中提取设计令牌（颜色、字体、间距、圆角）
- 创建共享 CSS 动画（fadeIn、slideUp、scaleIn、stagger、typing）
- 为每个场景创建一个 HTML 文件，包含：
- 时间线动画故事板（以 CSS 注释形式）
- 可逐帧控制的 CSS 时间线动画
- 重现原型界面的标记
- 创建 capture.js（Puppeteer + FFmpeg），通过 Web Animations API 进行控制
- 渲染所有视频
- 从实际原型中捕获5张 Retina 截图
关键技术：逐帧控制
// 暂停所有动画
document.getAnimations({ subtree: true }).forEach(a => a.pause());
// 逐帧前进时间
document.getAnimations({ subtree: true }).forEach(a => {
a.currentTime = currentTimeMs;
});
视频规格
- 1920x1080
- 30 fps
- H.264（MP4）+ 可选 WebM
- 黑色背景（#0a0a0a）
- 字体 Inter（Google Fonts）
- 每个视频时长 8 到 20 秒
检查清单
- 所有视频已渲染为 MP4
- 预览可访问（本地 HTTP 服务器）
- Retina 截图已捕获
- 视觉质量已验证
阶段 5：叙述（20分钟）
输入：框架文档 + 视频 + 路径 输出：case-study.md（中文）、case-study-en.md（英文）
操作
-
按照以下叙事结构撰写案例研究：
- 页眉（标题、副标题、类别、作者）
- 英雄图片（全宽）
- 实验意图（个人背景，3个段落）
- 基础洞察（带有数字的问题）
- 视频：前后对比（或对比）
- 设计问题（指导原则）
- 视频：数据流/架构
- 每个功能一个章节（文本 + 视频 + 图例）
- 学习收获（可迁移的机制）
- 技术栈 + 链接
-
每个视频附带其图例：
- 加粗标题（视频展示的内容）
- 痛点： 用户问题
- 收益： 带来的价值
-
没有上下文背景的视频网格。每个视频都有自己的叙述。
-
制作中文和英文版本
语调
分享实验的实践者。非推销产品的销售员。具体且专业的标题（无口语化语言）。结构清晰：问题、机制、影响。
检查清单
- 中文案例研究完整
- 英文案例研究完整
- 每个视频都有其痛点/收益图例
- 学习收获章节包含可迁移的机制
- 章节标题叙事性强且专业
阶段 6：打包（15分钟）
输入：之前所有阶段的交付物 输出：GitHub 仓库、Vercel 原型、PORTFOLIO-INTEGRATION.md
操作
- 创建 .gitignore（node_modules、dist、.env、frames）
- 初始化 git 仓库，结构化提交
- 推送到 GitHub（公共仓库）
- 将原型部署到 Vercel（生产环境）
- 创建自包含的 PORTFOLIO-INTEGRATION.md：
- 项目的 YAML 元数据
- 资源复制命令
- 案例研究的完整内容，按章节划分
- 资源清单（视频、截图、位置）
- 视频格式（autoplay/loop/muted/playsinline）
- 图例格式
- 发布检查清单
检查清单
- GitHub 仓库已创建并推送
- 原型已部署到 Vercel
- 自包含的 PORTFOLIO-INTEGRATION.md
- 文件已复制到作品集项目
阶段 7：发布（时间不定）
输入：作品集项目中的 PORTFOLIO-INTEGRATION.md 输出：网站上的项目页面已发布
操作
此阶段在单独的会话中执行，位于作品集项目内。提示词：
读取 PORTFOLIO-INTEGRATION.md 并将案例研究作为项目实现到我的网站上。该文件包含所有说明：资源、内容、页面结构、视频和图例格式。
检查清单
- 资源已复制到作品集项目
- 项目页面已创建
- 视频设置为 autoplay/loop/muted
- 每个视频下方有图例
- og:image 已配置
- 中文和英文版本
- 原型和 GitHub 链接有效
总结
| 阶段 | 时长 | 交付物 |
|---|---|---|
| 1. 框架构建 | 15分钟 | 案例研究 v1、CLAUDE.md |
| 2. 结构化 | 10分钟 | 本地项目 |
| 3. 丰富 | 30-45分钟 | 可拍摄原型 |
| 4. 拍摄 | 30分钟 | 视频 + 截图 |
| 5. 叙述 | 20分钟 | 中英文案例研究 |
| 6. 打包 | 15分钟 | GitHub、Vercel、集成包 |
| 7. 发布 | 不定 | 作品集页面 |
| 总计 | 约2小时30分 | 完整发布的案例研究 |