为什么不用模板
市面上有很多作品集模板，Framer、Webflow、Notion 都能快速出一个好看的页面。但我想要的不只是好看——我想让这个网站本身成为「我会用 AI 协作」的证据。
所以我选了 Next.js + Tailwind + Framer Motion 这个技术栈，用 Claude Code 作为协作伙伴，从零开始搭。
真实的协作过程
第一步：确定叙事结构
我没有先画线框图。而是和 Claude 讨论：一个设计师的作品集应该讲什么故事？我们讨论了几种方案，最终确定了「Hero → 能力 → 案例 → 工具 → 思考 → 联系」的叙事线。这一步完全是对话完成的，没有草图。
第二步：逐个板块实现
确定结构后，开始逐个板块实现。我的工作方式是：
- 描述我想要的效果（比如「案例卡片要能 hover 抬起，有微妙的阴影变化」）
- Claude 生成组件代码
- 我在浏览器看效果，告诉它哪里不对（比如「阴影太重了，收一点」「标题字距再紧一些」）
- 它改，我再看
一个板块通常要迭代 3-5 轮才能满意。关键在于：我不是在「指导」AI，而是在和它对话——它会提出我没想过的方案，有时候我会采纳。
第三步：文案也是对话产物
案例描述、板块标题、总结段落——都是先让 Claude 写初稿，我再逐句调整。比如它写的「主导 Wbit AI 助手平台 0-1 产品设计」太正式，我改成更口语的表达。最终的文案不是 AI 生成的，也不是我独立写的，而是对话迭代的结果。
几个关键判断点
Claude 建议居中布局，我选择左对齐 在案例详情页，Claude 建议标题居中、内容两栏对称。我觉得太「模板感」了，选择了左对齐 + 不对称布局。这个判断来自我对站酷优秀案例的观察。
动效宁可少也不要多 Claude 很擅长加动效——滚动渐入、视差、弹簧动画。但我砍掉了一大半，只保留了 Hero 的黑幕揭开和案例卡片的 hover 效果。设计师的价值之一就是知道什么时候该做减法。
代码结构要为迭代服务 我坚持把数据（案例内容、导航配置）和组件分离，用 TypeScript 类型约束。这样以后加新案例只需要改数据文件，不用动组件。这个架构决策是我做的，不是 AI 建议的。
这件事说明了什么
这个网站从第一行代码到上线，全程在 VS Code + Claude Code 中完成。它证明的不是「我会写代码」，而是「我能把 AI 放进自己的工作流，形成稳定、可迭代的协作方式」。
AI 不会让设计师失业，但不会用 AI 的设计师会越来越难。问题不是要不要学，而是怎么把 AI 变成自己的方法，而不只是偶尔用一下的工具。