让作品集记住决策:从静态展示到持续生长的产品叙事
我不想把这个作品集做成项目截图合集。它需要解释一个混合型角色:产品思考、UX/UI、AI SaaS 工作、SEO 内容、数据复盘和代码协作。所以我从 0 到 1 搭了一个双语作品集,用暗色 editorial 界面、可复用 case-study 结构和本地 memory 文件,避免后续迭代越改越散。
01. 项目背景
我的工作不太适合被放进纯 UI 作品集里。很多工作发生在页面结构、SEO 系统、模型更新、产品决策、数据复盘和开发交接里。
如果只展示最终界面,最重要的工作会被藏掉。我需要一个网站,既能呈现产品思考、上线结果和设计品味,也能表达我与 AI 和代码协作的能力,同时避免变成普通模板。
02. 核心问题
最难的是定位。我不想只呈现为 UI 设计师,也不想让网站像一份排版更漂亮的产品经理简历。它必须同时让人看到两面:产品判断和视觉执行。
- 首页需要让访客快速理解我的方向。
- 案例页需要和首页像同一个网站,而不是独立文章模板。
- 项目故事需要展示背景、问题、策略、决策、证据、结果和下一步。
- 网站需要双语支持,但不应该手动复制两套页面。
- AI 协作需要持久 memory,避免设计决策在多次会话中漂移。
03. 产品策略
我把这个网站当成一个小产品来做。首页只有一个任务:让访客快速理解我是谁,并尽快进入最有说服力的证据。
案例页负责放慢阅读节奏,解释具体工作。简历页则保持足够朴素,方便快速扫描。
04. 体验设计
首页为快速浏览而设计。它从紧凑的身份展示进入精选案例,而不是堆满项目网格。这样能把注意力集中在最强的证据:aitryon.art 产品体验重构。
案例页采用稳定结构,让未来案例不需要每次重新发明叙事方式。它也避免我把 case study 写成松散的过程日记。每一段都有明确任务:解释业务背景、产品决策、设计动作和结果。
05. 视觉系统
我有意避开明亮的 SaaS 模板感。这个网站需要更专注,也稍微锋利一点,因为我希望读者先看工作,而不是先被装饰吸引。所以我选择了 dark editorial 方向、克制对比,以及少量酸性黄绿色强调。
设计系统保留 Syne 做标志性展示标题,用 Space Grotesk 处理更长的案例标题,并用 regular IBM Plex Sans 承载正文和 UI。字号层级有意保持克制。早期迭代在详情页上过于海报化,所以当前系统更偏向冷静标题、可读正文和更严格的间距纪律。
06. Memory 系统
真正让这个网站后续更好维护的,是 memory 文件。它们记录当前状态、字体选择、内容规则、双语决策和 backlog。
下次我再借助 AI 继续改时,不需要重新解释同一批设计决策,也不用提醒它为什么这个网站不能变成普通模板。
07. 从 0 到 1
| Dimension | 起点 | 形成的系统 |
|---|---|---|
| 定位 | 需要把 UI、产品、AI 和增长能力组织成一个可理解身份 | 形成 AI / Growth Product Designer & PM 的清晰定位 |
| 首页 | 需要一个让访客快速进入重点证据的首页 | 用身份、精选案例、关于和联系构成第一屏到证据的路径 |
| 案例页 | 需要一种能持续复用的项目叙事方式 | 建立 8 段式 case-study 结构,并和首页共享同一套 dark editorial 系统 |
| 内容 | 需要让设计和内容判断能跨多次 AI 协作延续 | 用当前状态、设计规则、内容规则和 backlog 指导每次迭代 |
| 语言 | 需要同时服务中文和英文读者 | 已上线双语切换,并用内容规则让英文和中文文案成对维护 |
08. 结果
这个作品集本身也变成了一个 case study:先定义定位,再搭结构、定视觉规则,并留下足够的 memory,让下一次迭代能从同一个地方继续。
09. 下一步
- 补充更强的案例封面和过程图。
- 为指标补充证据截图或来源说明。
- 用同一叙事结构继续搭建未来案例页。
- 继续打磨首页、案例页和简历页的双语体验。
- 把设计 review 和 case-study 起草沉淀成可复用 skill。