【生活娱乐】ReFrame —— One Photo · Infinite Perspectives

TRAE AI 创造力大赛 【大赛初赛专区】
1

【【生活娱乐赛道】ReFrame —— One Photo · Infinite Perspectives

0. 先和大家打个招呼吧 :waving_hand:

大家好，我是智能交互设计专业本科生，主要关注 UI/UX 设计、AI 产品创新以及数字体验设计。

ReFrame 是我使用 TRAE 从创意构想到 Demo 落地的一次探索。

在开始制作之前，我只有一个比较模糊的想法：能不能让 AI 不只是“识别图片”，而是帮助用户发现照片背后更多可能性？

于是我把自己的想法一点点告诉 TRAE：

“我想做一个可以让照片产生不同故事的 AI 产品。”

TRAE 帮助我逐步完善了产品定位、用户流程、功能设计以及前端 Demo 开发。从最开始的创意整理，到页面结构设计，再到交互效果优化，我发现原本需要大量开发经验才能完成的事情，通过不断与 AI 沟通和调整，也可以快速实现。

其中让我印象最深的是，当我第一次看到上传照片后，通过不同身份生成完全不同故事的交互效果时，我意识到 AI 不只是提高开发效率，更像是一位能够一起探索创意的设计伙伴。

1. Demo 简介

产品介绍

ReFrame 是一款基于多模态 AI 的图片创意应用 App。

它通过 AI 视觉理解能力，让用户上传一张照片后，从不同身份、时代、职业和创作风格重新解读图片，让一张普通照片产生无限可能。

简单来说：

一张照片，不止一种故事。

面向用户

ReFrame 主要面向：

  • 喜欢记录生活的普通用户

  • 摄影爱好者

  • 内容创作者

  • 学生群体

  • 设计师

  • 喜欢探索 AI 创作的人群

用户可以在旅行记录、日常拍摄、社交分享、创意创作等场景中使用。

核心功能

① AI 多视角解读

用户上传照片后，AI 会分析图片内容，并从不同身份重新理解照片。

例如：

  • :baby: Child：孩子眼中的世界

  • :old_woman: Elder：多年后的回忆

  • :camera_with_flash: Photographer：摄影师视角

  • :clapper_board: Director：电影导演视角

  • :robot: Future AI：未来人工智能视角

  • :open_book: Writer：文学创作者视角

不同视角会生成完全不同的内容体验。

② AI 创意内容生成

根据用户选择的视角，AI 可以生成：

  • 故事

  • 诗歌

  • 电影旁白

  • 日记

  • 新闻报道

  • 信件

帮助用户从新的角度理解照片。

③ AI 分享卡片

系统会自动将照片与 AI 生成内容结合，形成具有设计感的分享卡片。

用户可以：

  • 保存作品

  • 分享创意内容

  • 收藏历史记录

让 AI 创作更容易传播。

（此处添加 Demo 页面截图）

2. Demo 创作思路

灵感来源

ReFrame 的灵感来源于日常生活中的照片记录。

如今，手机已经成为人们记录生活的重要工具，每个人都有大量照片存储在设备中，但很多照片最终只是停留在相册里，很少被重新理解。

我思考：

如果同一张照片交给不同的人观看，会不会产生完全不同的故事？

孩子看到的是想象；

老人看到的是回忆；

摄影师看到的是构图；

历史学家看到的是时代。

因此，我希望利用 AI 的多模态能力，让用户体验一次“改变观察角度”的过程。

想解决的问题

当前图片 AI 产品大多集中在：

  • 图片生成

  • 图片美化

  • 图片识别

但缺少能够激发用户创造力和情感连接的体验。

ReFrame 希望解决：

  1. 普通照片缺少二次创作价值的问题；

  2. 用户缺少创意表达能力的问题；

  3. AI 应用体验过于工具化的问题。

为什么选择这个方向

在选择项目方向时，我希望作品不仅具有 AI 技术特点，也能够体现设计专业优势。

相比传统效率工具，ReFrame 更关注 AI 带来的创造力体验。

通过：

图片输入 → AI 理解 → 多维视角 → 创意输出

形成一个简单、有趣、容易传播的 AI 原生产品体验。

同时，该方向具有较强视觉表现空间，可以通过 UI、动画和交互设计进一步增强用户体验。

3. Demo 体验地址

体验方式：点击链接即可

在线 Demo：

ReFrame — One Photo. Infinite Perspectives.

HTML Demo：

已将交互式 HTML Demo 文件打包上传至社区。

文件：

ReFrame-Demo.zip

4. TRAE 实践过程

本项目主要通过 TRAE 完成从产品构想到 Demo 开发的完整流程。

第一阶段：创意探索与产品规划

使用 TRAE 完成：

  • 产品定位分析

  • 用户需求梳理

  • 功能模块设计

  • 页面流程规划

Session ID：

2222527592019692:f91be612b9bc22809e97e597927a22a7_6a4943e5ae156abc31c405c3.6a495534ae156abc31c408cf.6a495534ae156abc31c408cd:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/7/5 02:47:16)

第二阶段：UI设计与页面开发

使用 TRAE 完成：

  • 首页设计

  • 图片上传页面

  • AI 分析动画

  • 视角选择页面

  • 内容生成页面

  • 分享卡片页面

重点优化：

  • 极简视觉风格

  • 卡片化交互

  • 页面动效体验

Session ID：

2222527592019692:dbea46aaeca152ff9c72367c54b48801_6a4943e5ae156abc31c405c3.6a494fd3ae156abc31c40771.6a494fd3ae156abc31c4076f:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/7/5 02:24:19)

第三阶段：功能优化与 Demo 打磨

使用 TRAE 完成：

  • 页面交互优化

  • 响应式适配

  • 动画效果调整

  • Demo 流程完善

  • Bug 修复

最终实现：

上传照片 → AI 分析 → 选择视角 → 生成故事 → 分享作品

完整体验流程。

Session ID：

（2222527592019692:5cdacb4aff86e0f68a7966173605013e_6a4943e5ae156abc31c405c3.6a4943e5ae156abc31c405c6.6a4943e5ae156abc31c405c4:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/7/5 01:33:25)

5. 报名审核通过帖子链接

ReFrame —— AI From a Different Perspective - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区

感谢 TRAE 提供这样一个让创意快速落地的平台。

ReFrame 希望探索一种新的 AI 产品形态：

让 AI 不只是帮助我们完成任务，而是帮助我们发现世界更多可能。

1 个赞