本页是怎么被 AI 建出来的

你现在看到的这个页面，从第一张设计稿到上线，没有写过一行”传统意义上的”代码——但每一个决策都是人做的。这正是我想展示的东西：AI 时代的产品经理，怎么把判断变成能跑起来的东西。

第一步：在 Claude Design 里探索设计

我的需求很模糊：“一个承载转型成果的个人主页，要审美好”。我没有让 AI 直接出活，而是让它先出 3 个方向：编辑感、Builder 工作台、深色精密。看完我选了编辑感，又要了 6 个变体——包括把 Claude 官网的设计令牌”偷”过来的暖奶油版。

窄条 demo 看不出好坏，这是我中途的一个关键判断：风格对比只能看气质，必须把真实内容模块装进去再看。 于是第三轮直接做了两个满配版：实时 token 用量、GitHub 风格热力图、Obsidian 风格知识图谱全部进场。最后锁定「编辑感 × 数据」，又往苹果 Liquid Glass 方向重构了一次视觉——雪山是我自己用无人机拍的。

第二步：Claude Code 接手实现

设计稿是 React 原型，跑在 CDN 的 Babel 上——能看不能用。Claude Code 读完整个设计包（含全部对话记录），把它重写成了零依赖的静态页面，又在我提出”不要被设计稿限制”之后，升级成 Astro 工程：主页、博客、数百篇知识库笔记页，全部静态构建。

第三步：让数据变成真的

工作台数据区的承诺是「实测为主、估算标明」，那就不能是假的：

• 多源活动热力图：GitHub 只是我贡献的一小部分。脚本同时统计本地 git 仓库的全部提交历史、Obsidian 库数千篇笔记的创建时间线、Claude Code 的会话日志——工作活动史一直回溯到 2022 年（注意：是工作活动，不是 AI 用量）。
• Token 用量：解析 Claude Code 本地日志拿到逐条消息的真实 token 数，高强度日在数千万到上亿量级；日志保留期之前的部分按活跃度校准估算，口径和估算占比都标在页面上（实时数字以首页工作台为准，本文不复述）。
• 知识图谱：不再是设计稿里的 5 个示例主题，而是我 Obsidian 库 04AI 文件夹的真实结构——十余个主题域、数百篇笔记、上千条双链，力导向布局，点击任何节点都能打开那篇笔记。求职相关的文件夹被发布管线自动排除。

每天一条 launchd 定时任务跑 npm run sync：采集 → 提交 → 推送 → EdgeOne 自动重建。Git 仓库本身成了数据存档，日志被清理也不会丢历史。

我从中确认的几件事

1. AI 不能替你做取舍。 三轮设计方向、热力图算 GitHub 还是算本地、估算数据要不要标注——每个岔路口都需要人来选。选得快、选得对，是 PM 的本职。
2. 验证闭环比生成能力更重要。 这个页面的每一版都在真实浏览器里截图核对过；数据脚本的产出和原始日志做过抽查比对。AI 的产出质量，取决于你给它装上什么样的反馈回路。
3. proof-of-work 胜过自我介绍。 这个页面不描述我会什么——它本身就是证据。

接下来还想做的：把三个项目的真实演示接进来、知识图谱加时间轴回放、再写几篇拆解。如果你对这条工作流感兴趣，欢迎聊聊：rick.si@outlook.com。