ai-coding-demo

生活情绪日记

https://zhuanlan.zhihu.com/p/31610177566

提示词

你是一位全栈工程师,同时精通产品规划和UI设计。

我想开发一个AI情绪日记与生活助手app,现在需要输出完整的APP原型图。请按以下方式完成app所有原型图片的设计:

  1. 思考用户需要AI情绪日记与生活助手app实现哪些功能。
  2. 结合用户需求,以产品经理的视角去规划APP的功能、页面和交互。
  3. 作为设计师,思考这些原型界面的设计,并以设计师的视角去输出完整的UI/UX。
  4. 使用html在一个界面上生成所有的原型界面,文件命名为:canghe_app_prototype.html。可以使用FontAwesome等开源图标库,让原型显得更精美和接近真实。
  5. 引入tailwindcss来完成,而不是变成style样式,图片使用unsplash。我希望这些界面是需要能直接拿去进行开发的。
  6. 使用iPhone标准尺寸作为基准(375px宽度),并确保所有元素都符合移动端的交互习惯。

实战记录

对比上个案例,这次并没有指定使用什么开发语言,是否需要输出到单个文件。

Edit 模式:模型 4.0

我将为您设计一个完整的AI情绪日记与生活助手app原型。让我先分析用户需求,然后创建一个完整的原型界面。

功能分析与规划

核心功能模块

  1. 情绪记录与分析
  2. AI智能对话
  3. 生活目标管理
  4. 数据统计与洞察
  5. 个人设置

页面结构

完整原型设计

canghe_app_prototype.html

创建一个包含所有原型界面的完整HTML文件,使用Tailwind CSS和现代移动端设计原则。

canghe_app_prototype.html+728-1

这个完整的原型设计包含了:

核心页面

  1. 启动页 - 品牌展示和用户引导
  2. 主页 - 情绪概览和快速操作
  3. 情绪记录页 - 详细的情绪记录功能
  4. AI对话页 - 智能助手聊天界面
  5. 统计分析页 - 数据可视化和洞察
  6. 目标管理页 - 个人成长目标追踪
  7. 个人中心页 - 用户资料和设置

设计特色

这些原型界面可以直接用于开发参考,包含了完整的UI组件和交互逻辑。