📦 Prototype Factory — 高保真交互原型工厂

技能文档

概述

快速创建精美、可演示的产品体验。本技能涵盖从需求收集 → UX 蓝图 → 设计系统 → 代码脚手架 → 动画/媒体 → 质量保证 → 交付的全过程。默认使用 Flutter，除非用户指定其他技术栈。

参考文档

• references/design-language.md - 默认霓虹/赛博美学风格
• references/handoff-checklist.md - 最终交付要求

工作流程概览

• 需求收集与边界确认 – 确认问题、平台、成功标准、截止日期。
• 体验蓝图 – 绘制主要流程 + 所需数据。
• 视觉语言与资源 – 锁定调色板、字体、图标、素材媒体。
• 实现 – 搭建项目脚手架、连接流程、添加动画/媒体、接入数据存根。
• 优化与验证 – 响应式、可访问性、性能、Bug 排查。
• 演示与交付 – README、脚本、录制视频、记录下一步计划。

1. 需求收集与边界确认

• 询问：核心价值主张、目标用户、必备屏幕、禁止使用的颜色/Logo。
• 明确演示目标（桌面、平板、移动）+ 运行位置（模拟器、Mac 应用、Web 分享）。
• 确定时间预算 + API 可用性。如果没有真实后端，决定使用本地 JSON 或模拟服务。
• 在触摸代码前编写 3 句话的简报；保存在项目根目录的 /prototype-notes.md 中。

2. 体验蓝图

• 列出主要流程（例如，入门 → 仪表盘 → 操作 → 成功）。用项目符号故事板绘制草图。
• 确定每个视图需要的数据；在 /lib/data/sample.json（Flutter）或 /src/data（React）中存根示例 JSON。
• 决定导航模型（标签栏、抽屉、顶部导航）。注意每次跳转的过渡效果（滑动、淡入、英雄动画）。

3. 视觉语言与资源

• 如果没有品牌套件，加载 design-language.md 并应用默认值。
• 获取素材图片/视频（Unsplash、Pexels）。保存在 assets/media/ 下并记录许可证。
• 将 Logo/图标导出为 SVG。保持优化（svgo）并组织在 assets/icons/ 中。
• 定义动画参数：时长 200–350 ms，使用 Curves.easeOutCubic / Cubic 等效曲线。

4. 实现

Flutter（默认）

flutter create 
cd 
flutter pub add google_fonts cached_network_image go_router lottie

• 结构：lib/ui/（屏幕）、lib/widgets/、lib/theme/、lib/data/。
• 实现带有配色方案 + 排版的 ThemeData（Space Grotesk / Inter）。
• 使用 CustomScrollView + Slivers 实现沉浸式英雄布局。
• 通过 video_player 或 chewie 嵌入视频。在 CDN/HTTPS 上托管 MP4。
• 保持组件模块化——创建 NeonCard、GlassButton 等以便复用。

React / Web（按需）

npm create vite@latest prototype -- --template react-ts
cd prototype
npm install framer-motion tailwindcss @radix-ui/themes

• 配置带有霓虹调色板 + 字体族的 Tailwind。
• 使用 Framer Motion 进行过渡，Lottie 用于动画图标。
• 将媒体托管在 public/media/ 中并延迟加载大型资源。

SwiftUI（仅 Apple 演示）

• 从 Xcode "App" 模板开始。创建 DesignSystem.swift 用于颜色/排版。
• 使用 matchedGeometryEffect 实现英雄过渡，AVPlayer 用于背景视频。

5. 优化与验证

• 为每个异步区域添加骨架/加载状态（即使数据是本地的）。
• 在多个断点/设备模拟器上测试。修复溢出 + 刘海问题。
• 运行 flutter analyze 或 npm run lint 和 npm run build 确保生产构建成功。
• 记录性能指标：目标 60 fps 动画，<200 ms 输入延迟。
• 可访问性：足够的对比度、焦点指示器、主要控件上的画外音标签。

6. 演示与交付

• 更新 /README.md，包含技术栈、命令、凭证和功能导览。
• 导出 2x 分辨率的截图（英雄图 + 流程），存储在 /docs/shots/ 中。
• 录制 30–60 秒的 Loom 或 GIF 演示。在 README 中链接。
• 在 /docs/roadmap.md 中记录已知限制 + 下一步计划。
• 在压缩项目前遵循 handoff-checklist.md。

提示

• 尽早充分沟通动画/媒体需求——它们会影响架构。
• 保持占位数据可信（名称、价格、时间戳）以增强真实感。
• 构建一次，主题两次：将颜色/渐变保存在变量中，以便快速切换调色板。
• 使用功能标志或配置映射来切换实验性部分，无需删除代码。