claude-3.7-Sonnet 直出原型图

参考：mp.weixin.qq.com/s/8STi5CntE…

直接看原型效果

提示词

我想开发一个使用《福格行为模型》这部书的原理帮助用户完成人生目标的 ios app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。

1、思考用户需要这个app实现哪些功能

2、作为产品经理规划这些界面

3、作为设计师思考这些原型界面的设计

4、使用html在一个界面上生成所有的原型界面，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实我希望这些界面是需要能直接拿去进行开发的

生成的整个内容（包含原型图代码）

以下内容由 claude-3.7-Sonnet 大模型生成

1. 功能需求分析

基于《福格行为模型》，用户需要以下核心功能：

• 目标设定与分解：设定长期目标并拆解为小目标
• 行为设计：创建微习惯，降低行为门槛
• 触发系统：在恰当时机提醒用户行动
• 动机管理：维持和提升用户动机
• 进度追踪：可视化展示用户进展
• 成就与奖励：庆祝小成就，强化行为
• 行为分析：评估策略有效性
• 社区支持：获取鼓励和互动

2. 产品界面规划

基于福格模型的三要素（动机、能力、触发器），规划以下界面：

1. 欢迎/登录界面
2. 主仪表盘
3. 目标管理
4. 习惯培养中心
5. 行为触发器设置
6. 动机提升工具
7. 进度分析
8. 个人设置
9. 社区互动

3. 设计思考

• 视觉风格：简洁明快，减少认知负担
• 色彩方案：主色调蓝色（稳定），辅色绿色（成长）和橙色（活力）
• 交互设计：关键操作易触达，提供即时反馈
• 内容结构：采用卡片式设计，信息层次分明

4. HTML原型设计

以上设计的原型完整实现了基于《福格行为模型》的iOS应用，从用户界面、交互流程和视觉设计三个层面考虑了应用的开发需求。这套原型充分体现了福格模型的三大核心要素：动机、能力和触发器，并通过各个界面的功能配合来帮助用户实现目标。

主要设计亮点包括：

1. 目标分解系统：将大目标拆分为可执行的小步骤
2. 微习惯设计：降低行为门槛，使用户更易成功
3. 智能触发系统：结合时间、地点和行为链设计触发器
4. 动机分析工具：帮助用户认识和提升自身动机
5. 数据可视化：直观展示用户进度和成就
6. 社区支持功能：通过社会认同增强用户动机

这套原型设计已经能够直接作为开发参考，包含了所有关键界面和交互元素。