首页重构：用 Claude + MiMo 打造 Linear 风格的数字分身

旧首页像一份精致的简历，新首页才是我的数字分身。

今天下午，我把 liclaw.site 的首页彻底换了。

不是改颜色、不是调间距，是从架构到视觉、从单文件到三文件、从 Apple 浅色到 Linear 深色的完整重构。整个过程由 Claude Code CLI (v2.1.123) + 小米 MiMo V2.5 Pro 驱动，我负责决策和验收，Agent 负责编码和迭代。

为什么必须换？

旧版首页 (felix-homepage.html) 是单文件内联方案，Apple 浅色风格，四个能力卡片 + 三个统计数字，很干净，但问题也很明显：

叙事断层：看完首屏和四张卡片，访客没有任何路径深入了解我是谁、我做了什么、怎么联系我。
视觉同质化：浅色 + 大留白 + 圆角卡片，这是 2024 年每一个 Notion 风站点的标配，缺乏辨识度。
交互单薄：只有卡片 3D 倾斜和数字滚动，没有系统级的反馈层。
工程化不足：单文件 800+ 行内联 CSS，维护成本随内容增长指数级上升。

我需要一个有灵魂的站点，而不是一个漂亮的壳。

新首页的设计哲学

新版 (index.html + style.css + script.js) 采用 Linear + Vercel 深色科技美学，核心逻辑是：视觉语言必须与 “Agentic Engineering” 主题同构。

深色主题 → 传递技术深度与 Agentic 的冷峻感
玻璃态导航 + 光标辉光 → 营造”智能跟随”的隐喻
工程原则区块 → 用内容建立专业可信度，不是装饰
项目编号（01/02/03/04） → 编辑式设计语言，像一本精心排版的工程期刊
标签分级（高亮 / 普通） → Tech Stack 的信息层级一目了然

技术实现细节

1. 三文件架构

1
2
3

index.html   → 语义化结构 + JSON-LD 结构化数据
style.css    → 完整的 CSS 变量系统（--bg-primary 到 --surface-2，--text 到 --text-3）
script.js    → 模块化动效系统（预加载、打字机、光标辉光、磁性按钮、滚动揭示、数字计数）

相比旧版单文件内联 800 行 CSS，三文件分离让后续迭代成本大幅降低。例如新增一个 “Speaking” 模块，只需在 HTML 插入结构、CSS 添加变量、JS 注册观察器，互不干扰。

2. CSS 变量系统

:root {
  --bg-primary: #08090a;
  --bg-secondary: #0f1011;
  --surface: #0f1011;
  --surface-2: #191d20;

  --text: #e2e4e7;
  --text-2: #8a8f98;
  --text-3: #5c6370;

  --accent-blue: #56cdff;
  --accent-purple: #a78bfa;
  --accent-teal: #34d399;
  --accent-orange: #fb923c;

  --border: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.06);
}

这套变量系统支持快速主题切换——如果有一天我想做浅色模式，只需覆盖 --bg-primary 和 --text 系列，所有组件自动适配。

3. 动效系统（8 层反馈矩阵）

动效	实现方式	叙事目的
预加载器	呼吸动画 + 缓动进度条	建立品牌第一印象
打字机	`setTimeout` 循环 + 光标闪烁	动态展示核心价值主张
光标辉光	600px `radial-gradient` 跟随鼠标	“智能跟随”的 Agent 隐喻
磁性按钮	`mousemove` 偏移计算	物理吸附的触感反馈
按钮涟漪	CSS `radial-gradient` 定位 hover	光源交互的精致感
滚动揭示	IntersectionObserver + 级联 `transition-delay`	内容逐层浮现的阅读节奏
3D 卡片倾斜	`perspective(600px) rotateX/Y`	项目卡片的可触达感
数字计数	`requestAnimationFrame` + easeOut	Stats 区块的数据冲击力

所有动效都注册了 prefers-reduced-motion 降级，确保无障碍访问。

4. JSON-LD 结构化数据

新版注入了完整的 Schema.org @graph：

Organization → 站点品牌实体
Person → Felix 个人实体（knowsAbout: AI Agent, OpenClaw, Agentic Engineering）
WebSite → 站点级元数据 + 搜索动作
WebPage → 页面级元数据 + 面包屑

这对 SEO/GEO 至关重要——让搜索引擎和 AI 引擎都能准确理解页面结构与作者身份。

Claude + MiMo 的协作模式

这次重构完全在 Claude Code CLI 中完成，后端模型是 小米 MiMo V2.5 Pro（通过 ANTHROPIC_BASE_URL=https://api.xiaomimimo.com/anthropic 接入）。

我的工作流是：

需求描述：向 Claude 描述设计目标（”我要一个 Linear 风格的深色首页，三文件结构，包含 Hero / About / Focus / Projects / Stack / Principles / Writing / Contact 八个模块”）
首轮生成：Claude 输出完整的三文件代码
精确迭代：基于预览效果，逐条提出修改点：
- “Hero 标题字号在移动端需要 clamp(36px, 7vw, 80px)“
- “Focus 卡片顶部彩色边线改为 CSS 变量控制”
- “增加备案信息到 Footer”
- “Writing 区块增加 ‘查看全部 18 篇文章’ 按钮”
代码审查：Claude 自动检查变量一致性、响应式断点、无障碍属性

MiMo V2.5 Pro 在中文语境下的前端代码生成质量非常稳定，特别是对中文排版（letter-spacing、-apple-system 字体回退）的处理比通用模型更细腻。

新旧对比：从”简历”到”分身”

维度	旧版 (Apple 浅色)	新版 (Linear 深色)
文件结构	单文件内联	三文件分离
视觉风格	安全、普适	冷峻、有辨识度
内容模块	4 个（Hero + Capabilities + Stats + Footer）	8 个（完整叙事流线）
交互系统	2 层（3D 倾斜 + 数字滚动）	8 层（完整反馈矩阵）
品牌叙事	看完即走	深入了解路径
工程化	维护成本高	变量驱动、模块可扩展

部署与验证

代码确认后，直接上传至 liclaw.site 根目录，替换旧 index.html。验证清单：

移动端汉堡菜单 + 全屏遮罩正常
预加载器 → Hero 揭示 → 打字机启动的时序正确
滚动进度条随页面滚动线性增长
Stats 数字在进入视口时触发计数动画
所有 # 锚点平滑滚动
JSON-LD 通过 Google Rich Results Test
Lighthouse 性能评分 > 90（深色主题 + 无大图天然优势）

下一步

首页重构只是起点。接下来会基于这个设计系统：

统一子站视觉：将 /blog/ (Hexo + Butterfly) 和 /store/ (Retail System) 的配色与字体变量向新首页对齐
增加深色/浅色切换：利用现有 CSS 变量系统，实现一键主题切换
接入 Web Analytics：统计各模块的点击热区，验证叙事流线是否有效

SEO 到 GEO：一个技术博客的结构化数据升级实录 - 同一站点同时完成 JSON-LD 全量注入和 SEO/GEO 升级
Store 站点动效优化实践：从独立实现到共享组件化 - 动效系统的组件化演进思路，与新首页的设计哲学一脉相承

如果你也在用 Agent 构建个人站点，我的建议是：**不要满足于”好看”，要追求”完整”**。一个首页的价值不在于它的首屏有多惊艳，而在于它能否在 60 秒内让陌生人理解你是谁、你相信什么、你能做什么。

新首页已经上线：liclaw.site

Built with plain HTML. Powered by Agent.

本文由 Claude Code CLI + 小米 MiMo V2.5 Pro 协作生成，Felix 审校。