把想法做成作品。

作品档案 WORKS

一只陪我工作的桌宠、一套从照片学英语的产品 Demo,以及这座记录我的网站。

从发现问题、作出判断,到把它做成能体验的东西。这里记录三个不同的尝试。

从桌宠开始

01 / VIBE CODING

Codex 大鼠灵动岛

Windows 桌面工具 · 已做成可运行作品

我想让 Codex 的工作状态有一个能被看见的角色:大鼠用八种造型提示任务进展;需要细看时,信息卡再展开用量和会话。工作间隙还可以进入背单词窗口。

Codex 大鼠灵动岛完整海报,展示大鼠休息、工作、任务完成的形象

角色与功能

先看到情绪,
再读到信息。

大鼠的八种状态对应工作、等待和任务完成等情境,让我能先从桌面角色判断当前进展。需要细看时,悬停展开蓝白信息卡,查看五小时与本周剩余额度及会话列表;工作间隙还可以进入背单词窗口。

01 / 状态图鉴

八种状态,各有表情。

点选状态,查看对应的大鼠形象与触发情境。

搬砖中的大鼠
搬砖中

有 Codex 任务正在执行。

桌宠信息卡示例:任务状态、用量圆环与会话列表
信息卡界面 · 会话与用量均为示例数据
桌宠背单词窗口的学习卡界面
学习卡界面 · 示例词条

为什么是桌宠

我想在等待 Codex 任务时,抬眼就知道它正在工作、等待,还是已经结束。信息卡当然能列出数据,却不适合一直占据桌面;用大鼠的八种形象承载状态,再按需展开用量与会话,能把“看一眼”和“看明细”分成两层。

状态怎样可信

八个造型对应真实任务、输入、用量和结果等情境,不能只是轮播表情。我与 Codex 协作梳理状态优先级和结果停留方式:任务完成或失败后保留提醒,直到我查看;用量不足要被注意到,也不能持续打断正在做的事。

把入口放回工作流

初版右键菜单和学习窗口像两套独立插件,操作成本和视觉语言都不一致。后续把菜单、状态卡与“背个单词”入口接起来;学习页先解决随机出词与阅读体验,任务结束时优先呈现结果。系统复习仍是后续方向,没有把随机词卡包装成学习进度。

如何迭代与验收

我持续提出状态、图像和交互要求,用实际桌面运行结果检查可见性、遮挡和入口是否顺手,再让 AI 协作修改 Windows 程序。角色原图只去除外部背景,保留人物和道具;功能是否成立以任务切换、卡片展开、菜单与学习窗口的实际行为为准。

我的行动

围绕状态判断、桌面呈现和学习入口反复提出要求、检查运行结果,并用 AI 协作完成 Windows 程序。

已做出的结果

桌宠现可在本机运行,包含八种状态、用量与会话信息卡,以及背单词功能。

信息层次

先用大鼠的形象提示任务状态,再按需展开用量和会话细节,把工作与学习入口收在同一处。

02 / PRODUCT DEMO

PicWords

拍照学英语 · iOS 产品方案与网页交互 Demo

我的产品假设是:完整的生活照片加上准确、克制的双语标签,能让日常英语学习者更愿意观察、保存并回看身边的词。于是我把“拍照识词 → 场景与贴纸收藏 → 复习”设计成一条连续路径。

PicWords 场景结果:咖啡照片上的中英文物品标签
01 · 在原照片中看到双语标签
PicWords 词条详情:贴纸、读音、例句和来源场景
02 · 保存有来源的贴纸
PicWords 复习卡片:贴纸与词汇
03 · 回到复习卡

从想法到 Demo

产品方向由我定,让 AI 帮我执行。

  1. 提出“从眼前生活场景学习英语”的假设,聚焦有基础的日常英语学习者。
  2. 与 GPT 完善方案,由我确定原图标签不遮挡物品、场景和贴纸分别收藏、贴纸能追溯来源等交互原则。
  3. 用 Figma 绘制原型,整理 iOS MVP 需求,再让 Codex 生成网页 Demo 并检查体验。

从个人需求出发

我想做的不是拍照后得到一张单词清单,而是让照片成为可以反复探索的英语图鉴。因此我把“看见身边物品—知道怎么说—日后再遇见它”作为连续路径,先用完整照片和物品旁的双语标签验证这种学习方式是否愿意被保存和回看。

为什么保留原场景

如果标签遮住物品,识别结果再多也会失去观察的乐趣;如果贴纸离开原图就找不到来源,词汇又退回孤立记忆。我在原型中约束标签位置,把场景与贴纸分开收藏,并让贴纸可追溯照片、读音和例句,使一次发现能继续进入图鉴与复习。

把流程做通

我先与 GPT 梳理需求和页面关系,再用 Figma 画原型、写 iOS MVP 需求,最后请 Codex 实现交互 Demo。迭代时重点检查拍照、识别、保存、返回和复习之间的跳转;例如保存后应到对应的图鉴位置,复习卡的翻看不能误算为已完成。

下一轮要验证什么

当前 Demo 的照片、词条与识别结果是预置内容,尚无真实用户试用。下一步优先验证真实照片识别是否准确、贴纸图像与词条是否匹配,再观察用户是否愿意保存场景、收藏贴纸并回到复习;这些结果比继续增加页面更能检验产品假设。

已做出的结果

形成产品需求文档、Figma 原型和可操作的网页交互 Demo。

演示边界

Demo 使用固定示例照片和预置词,识别过程与跟读完成为模拟演示;真实照片识别和跟读评分属于后续产品需求。

下一步验证

观察用户是否愿意保存首个场景、收藏贴纸并进入复习;目前没有真实用户数据。

03 / PERSONAL SITE

我的个人网站

个人表达 · 信息架构与视觉迭代

这座网站是我整理经历,也检验产品表达的一次持续练习。我把内容分成关于我、实习、校园和作品四条路径:访客可以从首页快速认识我,再按自己的兴趣进入具体经历。每个内页保留统一的索引与视觉语言,让照片、项目背景、我的职责和作品本身成为阅读的主角。

个人网站已有首页截图

从哪里开始

首页用四个章节建立整体印象:关于我呈现个人档案,实习沿业务现场展开,校园记录学习与组织实践,作品展示可见、可体验的成果。不同访客可以选择自己的阅读顺序。

怎样读下去

内页采用连续阅读结构与固定索引。实习页用问题、行动和结果串起工作,校园页按本科与硕士双卷展开,作品页以完整图片和交互体验呈现设计,而不是让访客只看项目名称。

视觉与交互

深蓝背景、纸张和粉色标记串起不同章节;人物照片与真实项目图片保留现场感。动效负责引导进入和翻阅,文字与图片的尺寸则随屏幕调整,保证电脑和手机上都能顺畅阅读。

如何迭代

我持续检查叙事顺序、信息密度、照片比例和跳转路径,并根据实际浏览感受修改页面。AI 帮我实现和调整代码,内容取舍与最终呈现由我决定。

完整浏览

首页和关于我、实习、校园、作品四个内页已经串成一条可自由选择的阅读路径。你可以从头像撕页进入,也可以用页面索引直接找到感兴趣的经历。

设计灵感

我想把个人履历做成可翻阅的故事:深蓝色是连续的底色,纸张承载具体经历,粉色标记阅读线索。照片与作品放在文字旁边,让每一段判断都有可看的场景。

从首页再逛一次