把想法做成手机上能真点的原型

静态稿打动不了人，点击热区的假交互也骗不过手指。真正能拿下客户和用户测试的是能点的原型：真页面、真动效、手机浏览器里真滑动。这节课从想法直接到原型，跳过「先做高保真稿」那一步。

01跟做：一段提示词

我有一个 App 想法：「本地咖啡馆打卡」小应用。帮我做一个能点的网页原型：
1. 首页：附近咖啡馆卡片列表（用假数据填 8 家，图用色块占位），能点进详情
2. 详情页：图片位、评分、「打卡」按钮——点了要有集章动效反馈
3. 「我的打卡」页：打卡过的馆子 + 集章进度条
4. 配色字体按 @我的规范.md；移动端优先，转场要顺滑
5. 纯前端，我要在手机浏览器里点着演示。
先出页面流程图我确认结构，再动工。

它问的那个问题（返回是否保持滚动位置）说明这个原型已经到了「真实产品才需要考虑」的细节层——这正是能点原型和热区假原型的差距：用户测试时，人对真滑动和假跳转的反应完全不同。

02迭代与演示

• 截图迭代老规矩：哪个间距不对、哪个动效太跳，截图说一句，刷新即见；
• 演示姿势：给客户/老板看时直接把手机递过去让他自己点——「亲手点过」的方案通过率比投屏讲解高得多；
• 用户测试：发链接给五个目标用户，让他们完成「打个卡」任务，你看录屏——真交互测出来的问题才是真问题。

03设计师做原型的独特优势

同样让 AI 出原型，你和产品经理的产出差在规范注入：你的间距节奏、动效曲线、状态设计都通过规矩文件灌进去了——原型出来就带着你的手感。这也是为什么先上组件预览页那节课：规范活了，原型就是规范的自然延伸。

04检查点