跳到主要内容

3 小时重构个人网站：AI 辅助执行层工作的实践记录

阅读需 3 分钟

Problem Context​

问题背景​

原有架构问题：

  • 使用 Docusaurus 文档站，但内容既不是产品文档也不是系统教程
  • 零散技术笔记用文档形式组织，维护成本高
  • 无法展示实际项目（如 Peer Drop）
  • 每次添加内容需要思考目录结构，心理负担大

为什么需要解决：

  • 网站定位与实际内容不匹配，影响访问者理解
  • 缺少产品展示，无法体现实际项目进展
  • 维护成本高导致更新频率低

常见替代方案：

  • 继续使用文档站，逐步调整结构（耗时且效果有限）
  • 完全重写网站（投入过大，容易放弃）
  • 迁移到其他平台（如 WordPress，失去技术控制力）

Practice Record​

采用的方案​

使用 kiro-cli（AI 编程助手）辅助重构，人工负责战略决策，AI 负责执行层工作。

实施步骤​

1. 禁用文档系统​

修改 Docusaurus 配置文件，禁用 docs 插件，只保留博客插件。这样原有的文档结构会被转换为按时间线组织的博客文章。

2. 转换现有文档为博客​

将文档目录下的文件迁移到博客目录，并为每篇文章添加博客必需的 front matter（包括标题、标签、发布日期等元数据）。AI 批量处理了 9 篇文档的转换工作。

3. 创建产品展示系统​

创建产品数据文件，定义产品的基本信息（名称、描述、链接、标签等）。然后创建产品卡片组件，用于在页面上展示产品，包含标题、描述、访问链接和 hover 动画效果。

4. 配置多语言支持​

配置 Docusaurus 的 i18n 插件，添加中文和英文两种语言支持。配置完成后，网站右上角会显示语言切换按钮，URL 会自动根据语言分开。

5. 样式重构（深色主题）​

自定义 CSS 变量和组件样式，采用深色背景配合绿色主题色，类似 Supabase 的设计风格。产品卡片使用毛玻璃效果和 hover 动画，提升视觉质感。

Results​

量化结果​

指标数值
总耗时3 小时
修改文件数49 个
新增代码12,517 行
删除代码6,690 行
转换文档9 篇
创建产品页1 个（Peer Drop）

功能成果​

重构前：

  • ❌ 文档站结构，定位模糊
  • ❌ 无产品展示
  • ❌ 单语言（中文）
  • ❌ 朴素设计

重构后：

  • ✅ 博客架构，清晰的时间线
  • ✅ 产品展示页面（What I Build）
  • ✅ 中英文双语切换
  • ✅ 现代化深色设计（Supabase 风格）

意外发现​

  • Docusaurus 的文档转博客比预期简单（只需调整 front matter）
  • AI 在处理重复性工作时效率极高（如批量添加 front matter）
  • 多语言配置的复杂度被高估了（Docusaurus 内置支持完善）

Limitations & Trade-offs​

局限性​

AI 辅助的边界：

  • AI 无法决定网站应该展示什么内容（战略决策）
  • AI 无法判断设计风格是否符合个人品牌（审美决策）
  • AI 无法保证技术选型的长期适用性（架构决策）

技术权衡：

  • 从文档站改博客后，失去了文档的层级导航（但获得了时间线浏览）
  • 产品展示页面需要手动维护（但比集成 CMS 更轻量）
  • 多语言需要双倍翻译工作（但 Docusaurus 的 i18n 简化了流程）

不适用场景​

  • 需要复杂权限系统的内容管理
  • 需要实时协作的文档平台
  • 需要高度定制化设计的项目（AI 只能提供通用方案）

Reusable Pattern​

核心原则​

AI 辅助执行层工作模式：

人工负责战略决策（做什么、为什么做），AI 负责执行层工作（怎么做、具体代码）

操作指南​

适用场景判断：

  1. 目标清晰，但执行步骤繁琐
  2. 知道怎么做，但不想写重复代码
  3. 需要快速验证想法，而非追求完美

工作流程：

  1. 明确目标 - 用自然语言描述想要什么
  2. 确认边界 - 说明哪些需要人工决策
  3. 分步执行 - 让 AI 按步骤输出，逐步验证
  4. 人工审查 - 关键决策点暂停，人工确认

投入产出比计算：

传统方式：需求分析 (2h) + 编码 (8h) + 调试 (4h) = 14h
AI 辅助：需求分析 (2h) + AI 执行 (1h) + 审查 (1h) = 4h
节省时间：10h (71%)

相关实践​

  • AI Agent 系统配置
  • 自动化工作流设计

Citations & References​

工具使用​

  • kiro-cli - AI 编程助手，用于代码生成和重构
  • Docusaurus - 静态网站生成器，支持博客和多语言
  • Peer Drop - P2P 文件传输工具（本项目产出）

进一步阅读​

AI Extraction Hints​

重构时间： 2026 年 1 月 22 日下午
总耗时： 3 小时
核心工具： AI 编程助手
关键收获： 不用自己写代码的感觉，真好