做一份能点击的 iOS 原型：AI 番茄钟实战

背景：「做个能点击的 App 原型」和「做个好看的页面」，是两个完全不同的任务。前者需要状态管理、页面切换、真实交互反馈。我用 huashu-design 做了一份 AI 番茄钟 iOS 原型，这篇文章完整记录整个过程。

什么是「能点击的 iOS 原型」？

大多数 AI 生成的 App 界面，是一张张静态截图，用户只能「看」，不能「点」。

真正的可交互原型，需要：

• 状态管理：点击按钮后跳到哪个页面，TabBar 切换，Modal 弹窗
• 真实设备框：iPhone 15 Pro 的精确尺寸（灵动岛、状态栏、Home Indicator）
• 真图填充：不用占位灰块，用 Wikimedia / Unsplash 的真实图片
• 交互反馈：按钮有按压态、TabBar 有选中态、页面切换有过渡动画

案例：AI 番茄钟 iOS 原型

我给 AI 说的是：

「做一个 AI 番茄钟 iOS 原型，4 个核心页面：今日专注、统计数据、番茄历史、设置页面」

第一步：设备框选型——不能用自己画的 iPhone 样式

这是新手最容易踩的坑：自己手写 Dynamic Island 和 Status Bar。

我见过太多 AI 生成的「iPhone 界面」，Status Bar 的时间和电池图标位置全错，Dynamic Island 的尺寸和位置也不对。用户一眼就能看出「这不是真正的 iPhone」。

huashu-design 的解决方案：用现成的 assets/ios_frame.jsx 组件，这是已经对齐过 iPhone 15 Pro 精确规格的标准外壳：

<IosFrame time="9:41" battery={85}>
  <YourScreen />
</IosFrame>

这个组件包含：
- Dynamic Island：124×36 像素，top:12px，居中
- Status Bar：时间/信号/电池，两侧避让岛，vertical center 对齐岛中线
- Home Indicator：底部灰色横条
- 圆角外框：精确的 44px radius

自己做 99% 会撞位置 bug。 iPhone 15 Pro 的刘海是固定尺寸，不是你凭空估的。

第二步：架构选型——单文件还是多文件？

huashu-design 给出了明确的决策树：

AI 番茄钟是 4 个页面，走单文件 inline 架构——所有 JSX/data/styles 直接写进主 HTML 的 <script type="text/babel"> 标签。

第三步：页面设计——每屏都要有「值得截图」的质感

页面 1：今日专注（Today）

核心元素：
- 大号圆形计时器（番茄钟的核心视觉）
- 当前任务标签（衬线字体，圆角 pill 样式）
- 底部的「开始专注」按钮

配色：黑底白字 + 赭石强调色。这个组合既有时钟应用该有的紧迫感，又有温暖的人文调性。

页面 2：统计数据（Stats）

核心元素：
- 周专注时长柱状图
- 连续专注天数
- 平均番茄时长

数据可视化用赭石色柱子，白色标签，克制但清晰。

页面 3：番茄历史（History）

核心元素：
- 今日完成的番茄列表（每条有任务名 + 时长 + 完成时间）
- 每条记录左侧有圆形图标

真实图片从 Wikimedia Commons 抓取（合规 CC0），不用灰色占位卡。

页面 4：设置（Settings）

核心元素：
- 专注时长设定
- 休息时长设定
- 通知开关
- 关于

第四步：状态管理——AppPhone 状态机

这是可交互原型的核心：页面切换不是靠超链接，而是靠 React 的 useState 状态机。

function AppPhone({ initial = 'today' }) {
  const [screen, setScreen] = React.useState(initial);
  const [modal, setModal] = React.useState(null);

  // 根据 screen 渲染不同 ScreenComponent
  // 传入 onEnter/onClose/onTabChange/onOpen props
}

每个 Screen 组件接 callback props（onEnter、onClose、onTabChange、onOpen），不硬编码状态。TabBar、按钮、作品卡加 cursor: pointer + hover 反馈。

第五步：真图优先——不用灰色占位卡

App 原型是最不适合用灰色占位卡的场景——静态摆拍和米白占位卡没有说服力，用户看到灰块会本能觉得「这是半成品」。

真图诚实性测试： 取图之前先问自己——「如果去掉这张图，信息是否有损？」

AI 番茄钟是工具类应用，没有天然的内容图片，所以我用图标 + 色彩 + 字体层级来建立视觉质感，而不是靠照片填充。

第六步：Playwright 验证——交付前跑真实点击测试

静态截图只能看 layout，交互 bug 要点过才发现。huashu-design 要求交付前跑 3 项最小点击测试：

1. 进入详情页面
2. 关键标注点
3. Tab 切换

npx playwright screenshot --viewport-size=393,852 "file:///path/to/prototype.html" out.png

交付物：单文件 HTML，双击即开

最终产出是一个 .html 文件，双击浏览器打开就是可交互的 iPhone 界面演示。

不需要安装任何东西，不需要起 server，不需要配置环境。就一个 HTML 文件，微信里直接能打开。

耗时复盘

品位锚点：没有 design system 时怎么走？

huashu-design 给出了 iOS 原型的默认审美方向：

核心心得

做 iOS 原型最难的不是「画界面」，而是状态管理和交互逻辑。

一个能点击的番茄钟原型，核心价值不是「让你看到界面长什么样」，而是让你体验一条完整的用户路径——从打开 App → 开始专注 → 完成番茄 → 看统计数据。

这条路径走通，比 10 张静态截图都有说服力。

下一次你需要向投资人 / 甲方演示产品思路的时候，别给他们看 Figma 截图了，给他们一个能点击的 HTML 原型。

截图清单

1. ✅ AI 番茄钟 iOS 原型全览（多屏并排）— 已插入上文
2. ✅ IosFrame 组件 + 4 个核心页面 + TabBar 状态管理代码 — 已插入上文
3. ⚠️ 如需各页面独立大图，请打开 AI番茄钟-iOS原型.html 手动截图