首页 周刊 分类 标签 关于

AI Coding 最佳实践（四）：Plan 方案层

· 技术
AIClaude开发效率方法论

Plan 层的核心作用

Plan（方案层）回答一个关键问题：

  • How：技术上怎么实现？

这是技术视角的实现方案，基于 Intent 和 Spec 制定。

Plan 文档结构

# Plan - 方案层

## 1. 技术栈

## 2. 系统架构
### 整体架构图
### 目录结构

## 3. 数据模型

## 4. 接口设计

## 5. 部署方案

## 6. 开发计划

各部分详解

1. 技术栈

使用表格清晰列出技术选型和理由：

### 核心框架
| 类别 | 选型 | 版本 | 选择理由 |
|------|------|------|----------|
| 框架 | Astro | 5.x | SSG 优先、性能优秀 |
| 样式 | Tailwind | 4.x | 原子化 CSS、开发效率高 |

### 开发工具
| 类别 | 选型 | 用途 |
|------|------|------|
| 包管理 | pnpm | 依赖管理 |
| 类型检查 | TypeScript | 类型安全 |

写作要点：

  • 明确写出版本号
  • 说明选择理由，帮助 AI 理解决策背景

2. 系统架构

用 ASCII 图表示整体架构：

┌─────────────────────────────────┐
│           用户浏览器              │
└───────────────┬─────────────────┘
                ↓
┌─────────────────────────────────┐
│          CDN / 边缘节点           │
└───────────────┬─────────────────┘
                ↓
┌─────────────────────────────────┐
│            静态资源               │
│   HTML / CSS / JS / Images      │
└─────────────────────────────────┘

目录结构也很重要：

src/
├── components/    # 可复用组件
├── layouts/       # 页面布局
├── pages/         # 页面路由
├── content/       # 内容集合
└── styles/        # 全局样式

3. 数据模型

使用 TypeScript 接口定义数据结构：

interface Post {
  // Frontmatter 字段
  title: string;
  date: Date;
  category: string;
  tags?: string[];

  // 自动生成字段
  slug: string;
  readingTime: number;
}

写作要点：

  • 区分必填和可选字段
  • 标注字段来源（手动 vs 自动生成）

4. 接口设计

对于静态站点，主要是构建时的数据查询：

// 获取所有已发布文章
const posts = await getCollection('posts', ({ data }) => {
  return data.draft !== true;
});

// 按日期排序
const sortedPosts = posts.sort(
  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
);

5. 部署方案

描述从代码到上线的流程：

代码推送 → GitHub Actions 触发 → 构建 → 部署到 CDN

### 部署平台
- 推荐：Vercel / Cloudflare Pages
- 原因：免费、快速、支持边缘部署

6. 开发计划

分阶段规划，使用 checkbox 追踪进度：

### Phase 1：基础搭建 ✅
- [x] 项目初始化
- [x] 基础布局组件
- [x] 首页文章列表

### Phase 2：功能完善
- [x] 分类页面
- [x] 标签页面
- [ ] 暗黑模式

### Phase 3：优化上线
- [ ] 性能优化
- [ ] 部署配置

与 AI 协作时的使用方式

开始技术实现时：

请参考 docs/plan.md 中的技术栈和目录结构，
按照 Phase 2 的计划实现分类页面功能。

修复问题时：

请参考 docs/plan.md 中的数据模型定义，
检查 Post 接口的字段是否正确。

三层文档的协作流程

1. 新需求 → 检查是否符合 Intent
2. 符合 → 更新 Spec 添加功能点
3. 功能点 → 更新 Plan 添加技术方案
4. 方案确定 → AI 开始实现

总结

三层文档的核心价值：

文档价值
Intent确保方向正确
Spec确保功能完整
Plan确保实现规范

投入在文档上的时间，会在与 AI 协作中获得数倍回报。

当你有了清晰的三层文档，AI 就像一个熟悉项目的团队成员，能够快速理解上下文，高效完成任务。

这就是「AI Coding 最佳实践」系列的全部内容。希望这套方法能帮助你更高效地与 AI 协作开发！

推荐阅读