原型工厂

概述

快速构建具备演示就绪水准的 polished 产品体验。本技能覆盖从需求接入 → 用户体验蓝图 → 设计系统 → 代码脚手架 → 动效/媒体 → 质量保障 → 交付移交的全流程。默认采用 Flutter 技术栈，除非用户明确指定其他技术栈。

参考文档

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

工作流概览

1. 需求接入与约束确认——明确问题本质、目标平台（平台类型）、成功标准及截止时间。
2. 体验蓝图——梳理核心用户路径，并明确各环节所需数据。
3. 视觉语言与资源资产——确定配色方案、字体、图标体系及图库/视频素材。
4. 实现开发——搭建项目结构、串联关键流程、集成动效/媒体、接入数据桩（stub）。
5. 打磨与验证——响应式适配、无障碍支持、性能优化、缺陷排查。
6. 演示与交付——编写 README、准备运行脚本、录制演示视频、记录后续事项。

1. 需求接入与约束确认

• 需向用户确认：核心价值主张、目标用户、必备界面、禁用颜色/Logo 等限制项。
• 明确演示目标设备（桌面端、平板、移动端）及其运行环境（模拟器、Mac 应用、网页分享链接等）。
• 确认可用开发周期与后端 API 可用性；若无真实后端，需决定采用本地 JSON 或 mock 服务方案。
• 编码前撰写一段三句话简述（3-sentence brief），并保存至项目根目录下的 /prototype-notes.md 中。

2. 体验蓝图

• 列出主要用户路径（例如：新手引导 → 仪表盘 → 操作执行 → 成功反馈），以要点式分镜草图呈现。
• 标注每个视图所需的数据字段，并在 /lib/data/sample.json（Flutter）或 /src/data（React）中提供示例 JSON 桩数据。
• 确定导航模型（标签栏、抽屉、顶部导航等），并为每段跳转注明过渡效果（滑入、淡入、Hero 动画等）。

3. 视觉语言与资源资产

• 如无品牌规范包（brand kit），请加载 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）。
• 对沉浸式 Hero 布局，优先使用 CustomScrollView + Slivers 组合实现。
• 通过 video_player 或 chewie 插件嵌入视频；MP4 文件应托管于 CDN 或 HTTPS 服务上。
• 保持组件高内聚、低耦合——创建可复用的 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/，并对体积较大的资源启用懒加载（lazy-load）。

SwiftUI（仅限 Apple 生态演示）

• 以 Xcode “App” 模板启动项目；新建 DesignSystem.swift 统一管理颜色与排版。
• 使用 matchedGeometryEffect 实现 Hero 过渡动画，AVPlayer 播放背景视频。

5. 打磨与验证

• 为所有异步操作区域（即使数据来自本地）添加骨架屏（skeleton）或加载态。
• 在多尺寸断点及设备模拟器中进行测试，修复溢出（overflow）与刘海屏（notch）适配问题。
• 运行 flutter analyze（Flutter）或 npm run lint 与 npm run build（Web），确保生产构建可成功完成。
• 记录性能指标：动画帧率目标为 60 fps，输入延迟控制在 <200 ms。
• 无障碍支持：确保足够对比度、可见焦点指示器，并为关键控件添加 VoiceOver 标签。

6. 演示与交付

• 更新 /README.md，说明技术栈、运行命令、凭据说明（如需）及功能导览。
• 导出高清截图（含首屏 Hero 图与关键流程图），分辨率设为 2x，存入 /docs/shots/ 目录。
• 录制一段 30–60 秒的 Loom 视频或 GIF 演示，链接嵌入 README 中。
• 在 /docs/roadmap.md 中记录已知限制与后续演进计划。
• 归档压缩项目前，请严格遵循 handoff-checklist.md 完成全部交付检查项。

实用技巧

• 尽早高频同步动效与媒体资源需求——它们将直接影响整体架构设计。
• 占位数据需具备可信度（如真实姓名、合理价格、有效时间戳），以增强演示真实感。
• 一次构建，二次换肤：将颜色与渐变统一声明为变量，便于快速切换主题配色。
• 通过特性开关（feature flags）或配置映射（config maps）控制实验性模块启停，避免直接删除代码。