Work Preview
把产品、设计、前端和内容收成一条可交付的工作链路。
先看综合强度最高的 3-4 个项目。
综合强度最高默认看 3-4 个项目按岗位一键切换
01
Problem Definition
发现了什么问题
这个视图帮助面试官快速判断我的工作方式：能不能把问题定义、界面表达、前端实现和内容组织串成一条完整链路。
主项目
Creative Lifecycle Management System 是这条视图里最优先展示的项目，用来快速建立岗位匹配感。
次优先
Prompt Hub 用来补足另一条能力链路，避免只看单点能力。
筛选原则
只展示和当前岗位强相关的项目，按 priority_for_role 排序，不做无关干扰。
02
Solution Overview
解决方案
01
综合强度最高
先看 Creative Lifecycle Management System，再看 Prompt Hub，最后补全 BiographyAI 与 AIPM。
02
默认看 3-4 个项目
页面结构保持和参考页一致，数据换文件就能切换叙事，不需要改样式层。
03
按岗位一键切换
默认只露出 3-4 个最强项目，避免首页信息噪音过大。
STAGE 01
◎筛选
先筛选最强相关项目。
STAGE 02
⟳串联
把产品、设计、技术串成一条链路。
STAGE 03
↗表达
用叙事把能力讲清楚。
STAGE 04
◈落地
让面试官快速判断匹配度。
03
Key Interfaces
关键界面与设计决策
UI Note
Creative Lifecycle Management System
这里选择这样做，因为 这里强调最强项目的优先级和整合能力。
UI Note
Prompt Hub
这里选择这样做，因为 这里强调最强项目的优先级和整合能力。
UI Note
BiographyAI
这里选择这样做，因为 这里强调最强项目的优先级和整合能力。
04
AI Coding
AI coding 实践说明
AI card 01
我怎么借助 AI 提速
AI 用来做结构初稿、信息压缩和快速对齐，人工负责判断取舍与最终表达。
CursorClaudeNext.jsTypeScript
AI card 02
哪些环节仍然手动控制
项目排序、证据口径、首屏叙事和最后的视觉节奏都保持人工控制。
结构文案筛选校对
BUILD TIMELINE
半天
搭出可看的第一版骨架
ai
1-2 天
补内容、补证据、补细节
human
持续
作为求职展示入口长期迭代
ship
Before
信息分散
项目、描述和展示方式分散在多个入口里。
After
一套壳
数据和样式拆开后，只改数据文件就能换一整套岗位视图。
05
Tech Stack
技术栈
Front-end
Next.js
React
TypeScript
Working set
信息架构
叙事
筛选
Ship
Vercel
Analytics
Custom Domain
06
Results
结果 / 数据
03
默认只看 3-4 个首屏聚焦最强相关项目，减少噪音。
04
可直接改数据后续改样式只碰 CSS，改项目只碰数据层。
!
Honest Note
这个视图的目标不是堆项目数量，而是把岗位匹配度讲得更清楚。
这个视图的目标不是堆项目数量，而是把岗位匹配度讲得更清楚。
07
Reflection
一句话反思
如果重来，我会更早把数据模型和样式层彻底切开。
— 综合视图 / 结构优先
08
Selected Work