我完成了这些年来最大的网站改版。就在吃早餐时。

周六早上 8:47。我正在吃越南烤肉法棍（Banh Mi Heo Quay）。与此同时，我刚刚把个人网站自 2021 年以来最大的一次系统级改版，最后一块上线完毕。

五年。 这是我上一次对网站做实质性升级到现在的时间。期间当然改过一些文案、发过一些文章。但设计？架构？整体体验？自疫情阶段结束前后就几乎没动过。

今天早上，我完成了 TRANSMISSION design system——一次完整视觉重构：新字体体系、新色板、新动画、以及一页高级产品展示页。但这只是 3 天冲刺的收尾。整个站点都被翻新了。

这次的数字：

- 3 天 40 commits

- 新增 28,129 行代码

- 新增 4,950 行 CSS

- CSS 文件从 1 个到 11 个

- 完整 dark mode 系统

- 全站 mobile-first 响应式

- 带真实截图的自定义产品页

整次改版总投入时间：3 天里零散几小时。 光第 1 天就 36 commits。今天最后冲刺：边吃早餐边做，30 分钟。

没有设计公司。没有 Figma 大稿。没有几个月周期。只有我和 Claude Code。 :D

有一件事我必须说清楚： 我一行 CSS 都没写，PHP 也没写，连部署命令都不是我手敲。Claude Code 完成了 100% 实现——设计、代码、git 提交、部署。我只做决策：“发光再多一点。”“这字体不对。”“卡片要更 premium。”

这就是 2026 年 AI-assisted development 的真实样子。

---

起点：网站基本停在 2021

先讲讲我当时的真实状态。

2026 年 1 月 1 日时，我的网站是这样的：

- 只有 1 个 CSS 文件，700 行“意大利面代码”

- 全站 Poppins 字体（典型“我没认真想过字体系统”）

- 没有设计系统，颜色到处硬编码

- 基础 dark mode，一半页面会出问题

- Products page：根本没有 products page，整个网站就是博客

- 移动端体验大概属于“响应式了，但像便宜西装那种勉强合身”

我一直把精力放在主业、学习 Generative AI，以及开发 STRAŦUM 和 DIALØGUE 这两个 AI 应用上，个人站慢慢变成了“鞋匠没鞋穿”。

每次潜在合作方或客户来访，看到的都是一个在喊“2021 来电话了，说要拿回它的 WordPress 主题”的站点。

---

为什么是现在？为什么用这种方式？

2025 年底有两件事叠在一起：

第一，我把 STRAŦUM 和 DIALØGUE 都发到了线上。两个 AI 产品都是我 solo 开发，同时还维持我在全球广告代理机构 VP 的全职工作。已经有真实用户、真实商业讨论、真实品牌风险。

我的个人站现在是产品入口，必须匹配这个阶段。

第二，我开始认真用 Claude Code，不是当聊天工具，而是当开发环境。然后我发现了一个改变一切的插件：[frontend-design](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design)。

这个插件不只是写 CSS，它会 *思考* 设计：字体搭配、色彩关系、空间构图。这是防止 AI 输出“AI slop”界面的关键。

我当时想：那要不就……全重做？不是周末修补，而是完整改。真正做一套 design system。由 Claude Code 做重活，我来做决策。

---

这 3 天到底发生了什么

Day 1：大爆发 — 36 commits

我原本没计划第 1 天就 36 commits。但一旦启动就停不下来。

先做初始化、备份旧主题、开始 CSS 模块化。

把那份 700 行单文件 CSS 拆成：

```
css/
├── style.css          # Design tokens only
├── components.css     # Buttons, cards, navigation
├── homepage.css       # Hero, products, posts sections
├── about.css          # About page specific
├── blog.css           # Blog archive
├── dark-mode.css      # Complete dark mode system
├── mobile-nav.css     # Bottom navigation bar
├── search.css         # Search overlay
├── single-post.css    # Blog post typography
└── products.css       # Premium products page
```

每个文件只做一件事。每个文件都吃 root 里的 CSS variables。以后再也不用在 700 行里翻“为什么这个按钮颜色不对”。 :P

Dark mode 也整体重做。旧 dark mode 很尴尬：有的字看不见、有的按钮对比不够。于是我彻底重建：

- 658 行专用 dark mode CSS

- 正确对比度（WCAG 合规）

- 移除全部 89 个 !important（是的，89 个）

- 语义化 color token 自动切换

到第 1 天结束：Homepage 重构完成、About 页重建、移动端底部导航上线、newsletter 集成完成。36 commits。

Day 2：架构与基础设施 — 9 commits

第 2 天重点是“让它可维护”。

最大改动是 functions.php：从 724 行单体混乱，变成 25 行 include：

```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```

同时我把 Docker 本地开发环境搭好、做了 GCP 安全审查，并补了文档。

Day 3：TRANSMISSION 收官 — 早餐冲刺

这一步真正体现了 frontend-design 插件价值。

我只描述方向：“复古未来感。模拟时代与数字时代融合。高级但不企业味。技术感强但有人味。” 然后我去买早餐。

我带着 bánh mì 回来时，Claude Code 已经生成了完整 TRANSMISSION 设计系统：

Typography：

- Playfair Display — Headlines（优雅、编辑感）

- DM Sans — Body（干净、易读）

- JetBrains Mono — 代码与数据（技术可信度）

Colors：

```css
--color-cream: #fffbeb;    /* Warm background */
--color-navy: #0f172a;     /* Deep primary */
--color-cyan: #22d3ee;     /* Energy accent */
--color-amber: #f59e0b;    /* Warm accent */
```

Fluid Typography：

```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```

标题在移动端到桌面端自动缩放，不再需要一堆 media query。

接着我处理 products page。原先只是文字，现在变成：

Hero Section：

- 终端风格 eyebrow 文案

- Playfair 主标题：“What I'm Building”

- Stats 条：2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction

- 轻微动效几何漂浮元素

Product Cards：

- 高级 navy 渐变背景

- 真实线上产品截图（不是 mockup）

- 带浏览器窗口点位的容器样式

- hover 态 cyan/amber 光晕

- 箭头标记 feature 列表

- 全宽 CTA

截图过程本身也很有意思。Claude Code 自动访问我的生产站，抓取页面，压缩图片从 1.8MB 到 229KB（缩小 86%），再套入样式容器。

---

技术栈：意外地简单

我用到的东西：

Claude Code —— 不只是给建议，而是能写代码、跑命令、保持长期上下文的 AI。它有文件系统访问能力，能跑 git，也记得昨天我们构建了什么。

frontend-design plugin —— 这是“AI 生成 CSS”和“真正看起来像设计过”的分水岭。里面内置了字体理论、色彩关系和空间构图逻辑。

Docker —— 本地 WordPress 开发。docker-compose up 就能起一个接近生产镜像。

Chrome DevTools MCP —— Claude Code 可直接控制浏览器。“检查移动端 dark mode”→ 直接回你真实渲染截图，不用来回切窗口。

gcloud CLI：同样由 Claude 直接调用。

---

真实部分（没有神话）

这不是魔法，中间确实有坑：

嵌套目录混乱： Docker 拷贝时出现 gambit-child/gambit-child/，排了 10 分钟。

Dark mode 文字消失： 某些标题继承了错误颜色，靠更具体选择器修复。

图片优化： 原始截图过大，后来学会在 macOS 用 sips -Z 800 无依赖压缩。

WordPress 模板指派： 忘了在 WP admin 里给新 products page 指定模板。经典低级错误。

区别在于：调试单位从小时变成分钟。Claude Code 在同一会话里能看到渲染结果、定位问题、提出修复。

---

前后对比：数字说话

| Metric | January 1, 2026 | January 10, 2026 |

|--------|-----------------|------------------|

| CSS Files | 1 | 11 |

| Lines of CSS | ~700 | 4,950 |

| PHP Architecture | Monolithic | Modular (6 files) |

| Typography | 1 font | 3-font system |

| Color Tokens | ~5 hardcoded | 15+ semantic |

| Dark Mode | Broken | 658 lines, WCAG compliant |

| Products Page | Plain text | Premium with screenshots |

| Mobile Nav | None | Bottom bar with 6 actions |

| Animations | 0 | 7 (fadeInUp, float, glow, etc.) |

| Last Major Update | 2021 | Today |

整体改造规模： 3 天内 40 commits，123 个文件里新增 28,129 行。全部由 Claude Code 编写。

---

这次成本是多少

钱： 设计成本 $0。Claude Code 订阅费。GCP 托管费本来就在付。

时间： 总历时 3 天；但我真正盯着屏幕的主动时间，大概 2-3 小时总计。多数时候是我描述目标，Claude Code 构建，我回来看结果。今天早上我就是启动最后重构后去买早餐，回来确认，30 分钟解决。

我的实际贡献： 0 行代码。我只描述想要什么，审查 Claude 输出，并做“这块更亮一点/间距不对/卡片要更高级”的判断。

对比： 这个范围如果找设计公司，通常是 8-12 周、$10,000+。而且你还得自己把 Figma 落地。

---

我学到的事

1. 我不再是“开发者”，更像 creative director。 Claude Code 写了所有代码。我做审美决策：“动画太慢了”“dark mode 的 cyan 还不够亮”“hero 统计信息要更突出”。这和传统编码是完全不同的能力结构。

2. 先模块化，再美化。 Claude Code 第一步是先拆架构，再做视觉。这个顺序让后续所有改动都变简单。

3. 设计系统有复利。 TRANSMISSION tokens 一旦搭好，新组件只是变量重组。products page 45 分钟完成，就是因为系统先在。

4. frontend-design plugin 是关键差异。 普通 AI 生成 CSS 常常是“安全但平庸”的 AI slop；frontend-design 会考虑字体、色彩、空间关系，所以结果不会一眼“AI 味”。

5. 增量发布比一次性发布更稳。 40 commits，不是 1 个大提交。每个模块 ready 就上线。Claude Code 负责完整 git workflow：staging、commit、push、PR。

---

你也可以这么做

如果你的个人站从 2021 到现在都只是“将就能用”：

1. 装 Claude Code 并启用 frontend-design plugin

2. 先描述 vibe（我的是“retro-futuristic，analog meets digital”）

3. 从架构开始——先模块化再美化

4. 先做 design system——tokens、字体、颜色

5. 再做页面——页面只消费你刚搭好的系统

6. 频繁部署——别等“全做完”

真正最难的不是技术，而是你要先说清楚你希望网站带来什么 *感受*。

这件事一旦清楚，剩下就是对话。

Update： “审美决策比实现更关键”这个结论，在我后来不会 Swift 直接做原生 iOS app时更明显了。Claude 一晚上能 scaffold 7,568 行代码，但把产品“调到对的感觉”的那部分，仍然是纯人类工作。

你上一次重建一个拖了很多年的东西，是什么时候？最后真的动手的触发点是什么？做完那一刻你是什么感觉？

致敬，

Chandler

---

*Still building, still shipping, still enjoying that bánh mì.*

---