| name | tech-architect |
| description | 技术架构设计。调研技术方案、评估开源项目、输出架构决策记录,写入 Tech-Arch.md。在 dev-planner 之前调用。 |
Tech Architect — 技术架构设计
职责
基于 Product-Spec.md(和 Design-Brief.md,如存在)中的产品需求,进行技术调研、方案评估和架构设计。以 ADR(架构决策记录) 的格式记录每一项关键技术决策,输出到独立的 Tech-Arch.md。
此 skill 不负责任务拆分或排期。 那是 dev-planner 的工作。本 skill 的输出是 dev-planner 的前置输入。
核心原则
技术选型必须基于证据,不是记忆。 每一项推荐都要有搜索结果支撑——版本号、Stars、最近更新时间,不是凭印象说「React 很流行」。
每一项决策都要有取舍分析。 没有完美的方案,选 A 就要说清楚放弃了 B 的什么。
复用优先于自研。 搜索现成组件和开源项目是第一步,自研是最后选项。
方案要有可替代性。 如果推荐方案被否决,备选方案应该已经评估好了。
前置条件
Product-Spec.md 必须已存在
Design-Brief.md 如果存在则纳入参考(配色和组件规范可能影响 UI 框架选型)
触发场景
- Product-Spec.md 就绪后,进入技术方案阶段
- 用户说"技术选型"、"架构设计"、"用什么技术栈"
- dev-planner 执行前必须先过 tech-architect
工作流程
Step 0: 模式判断
检查 Tech-Arch.md 是否存在。
情况 A — 不存在: 进入新建模式。
情况 B — 已存在: 告诉用户文档已存在,询问:
Tech-Arch.md 已存在。你是想:
- 重新评估 — 推翻重来,重新调研所有决策
- 调整某个决策 — 只改某一条架构决策
- 补充新决策 — 新增一条 ADR
- 直接跳过 — 架构方案没问题,进入 dev-planner
Step 1: 阅读前置文档
完整阅读并提取关键信息:
| 文档 | 提取什么 |
|---|
Product-Spec.md | 产品类型(Web/桌面/移动/CLI 命令行工具)、MVP(最小可行产品)功能列表、技术约束、性能/安全要求 |
Design-Brief.md(如有) | 组件风格、配色方案、响应式需求——影响 UI 框架/组件库选型 |
Step 2: 识别架构决策点
基于产品需求,列出所有需要做技术决策的点。不是每个项目都要全部覆盖,按需选取:
几乎必有(核心决策):
- 前端/客户端框架
- UI 组件库
- 状态管理
- 后端/API 层方案(如果适用)
- 数据库/存储方案(如果适用)
- 构建工具与打包方案
按需覆盖(取决于项目类型):
- 认证/授权方案
- 路由方案
- 测试框架
- 部署/托管方案
- 日志/监控方案
- 国际化方案
- 实时通信方案
复用调研(每个功能过一遍):
针对每个 MVP 功能,搜索是否有现成的组件库、开源项目、npm 包或脚手架可直接复用。
复用评判标准(四维度):
| 评判维度 | 可直接用 | 需改造 | 不适用 |
|---|
| 功能匹配度 | ≥90% | 50-90% | <50% |
| 维护状态 | 近 1 月有更新 | 近 6 月有更新 | 超过 1 年未更新 |
| 协议 | MIT/Apache | GPL/需评估 | 商用受限 |
| 代码质量 | 有测试/文档 | 有文档缺测试 | 无文档 |
每项复用方案的评分结果写入复用项目清单(Step 6 输出格式中的第 3 章)。
Step 2.5: 结构化思考前置(可选,复杂项目建议执行)
如果项目满足以下任一条件,在开始搜索技术方案前(Step 3),建议先用 structured-thinking 审视关键技术决策:
触发条件:
- 决策点多于 5 个(项目复杂,容易过度设计)
- 产品类型新颖(不是标准 Web/CLI/Electron 模式,没有现成套路可抄)
- 用户表现出不确定("你帮我看看"、"不知道应该用哪个")
- 每个 MVP 功能看起来都需要独立的技术选型
执行方式:
架构涉及 个关键技术决策。在开始搜索方案之前,要不要用结构化思考先过一遍核心决策?
它能帮我们:
- 把问题问对 — "需要状态管理"真需要吗?还是组件传参就够了?
- 从本质出发 — 不被"大家都用 Redux"的惯性绑定
- 做剪枝 — 哪些可以不做、推迟、用原生方案?
这样可以避免为不需要的东西选型。要试试吗?
用户同意后,对每个关键决策点执行 structured-thinking。输出继承规则:
| structured-thinking 输出 | 对 tech-architect 的影响 |
|---|
| 奥卡姆剃刀:某决策可删除 | 该决策点从 Step 2 列表中移除 |
| 奥卡姆剃刀:可推迟 | 标记为「后续迭代」,Step 3 暂不调研 |
| 奥卡姆剃刀:可用原生方案 | Step 3 搜索替换为「验证原生方案是否足够」 |
| 第一性原理:本质诉求 | 作为 ADR「背景」章节的核心论述 |
用户拒绝则直接进入 Step 3。
Step 3: 逐项调研与对比
每个决策点按以下流程走:
3.1 搜索
针对每个决策点,联网搜索当前主流选项、社区活跃度、生产可用性,以及是否有现成的开源方案可复用。
3.2 评估维度
每个候选方案从以下维度打分:
| 维度 | 权重 | 说明 |
|---|
| 功能匹配度 | 高 | 与产品需求的契合程度 |
| 社区活跃度 | 高 | Stars、最近 commit、issue 响应速度 |
| 生态成熟度 | 中 | 插件/教程/问答资源、TypeScript 支持 |
| AI 实现友好度 | 中 | 是否有成熟 SDK(软件开发工具包)、CLI 命令行工具、API 接口、模板可以调 |
| 性能/体积 | 中 | Bundle size、运行时性能(前端);吞吐/延迟(后端) |
| 学习曲线 | 低 | 对后续维护的影响(但 AI 实现时重要性降低) |
3.3 对比输出
每个决策点输出对比表:
### 决策点:<决策名称>
| 候选方案 | 版本 | Stars | 功能匹配 | 活跃度 | AI友好 | 综合推荐 |
|---------|------|-------|---------|--------|--------|---------|
| 方案 A | | | | | | ⭐ |
| 方案 B | | | | | | |
| 方案 C | | | | | | |
**推荐:方案 A**
**理由:** <一句话说清为什么>
**代价:** <放弃了什么>
**备选:** 如果方案 A 不可行 → 方案 B
Step 4: 架构设计
在技术选型确定后,画出系统架构骨架。
4.1 架构图(Mermaid 或文字描述)
项目类型决定架构模式:
- Web 全栈 → 前端 + API + 数据库
- 桌面应用 → Electron + Renderer + Main Process
- CLI 工具 → 单进程 + 文件系统
- 移动端 → React Native / Flutter
4.2 目录结构设计
先询问用户:
项目有没有现有的编码规范文档?比如 .clauderules、团队 wiki、README 里的约定?
如果有,我会读取并归档到 Tech-Arch.md。如果没有,我会按默认模板为你生成一份。
需要确认的规范类别:
- 目录规范 — 源码怎么分子目录?有无
application/、business/、view/ 划分?
- 命名规范 — 文件/目录/类/函数/变量/常量/类型/枚举分别用什么风格?
- 注释规范 — API 是否必须写注释?TODO 标记格式?禁止事项?
- 编码规范 — 类型安全级别、错误处理方式、导入顺序、文件/函数长度限制?
你有现有规范吗?还是我按默认模板生成?
用户有规范 → 读取原文,提取关键规则写入 Tech-Arch.md §5,标注来源路径。
用户没有 → 用默认模板生成,逐类询问确认后写入。
用户选择默认模板时:
<project-name>/
├── CLAUDE.md # AI 入口:项目上下文,自动加载
├── README.md # 人类入口:简介、快速启动
│
├── src/ # 源代码
│ │
│ ├── application/ # 应用入口(启动配置、路由注册)
│ │
│ ├── business/ # 业务逻辑(前后端分离时)
│ │ └── <模块名>/ # 按功能模块组织
│ │ ├── handler.ts # 控制器 / 服务入口
│ │ ├── service.ts # 核心业务逻辑
│ │ └── model.ts # 数据模型 / 类型定义
│ │
│ ├── view/ # 视图层(前后端分离时)
│ │ └── <模块名>/ # 按功能模块组织,层层递进
│ │ ├── <页面>.tsx # 页面组件
│ │ └── components/ # 模块专属 UI 组件
│ │
│ ├── utils/ # 通用工具(不归属任何模块的共享代码)
│ └── types/ # 全局类型定义(可选,小型项目可放 business/ 内)
│
├── docs/ # 项目文档(AI 快速了解项目的第一入口)
│ │
│ ├── requirements/ # 需求文档(引用 Product-Spec.md)
│ │ ├── overview.md # 产品概述:一句话定位 + MVP 功能 + 目标用户
│ │ └── glossary.md # 业务术语表(引用 Product-Spec 领域术语)
│ │
│ ├── design/ # 设计文档
│ │ ├── functional/ # 功能设计 — 业务层面
│ │ │ └── <模块名>.md # 每个模块的交互流程 / UE / 状态处理
│ │ └── visual/ # 原型设计 — UI 层面
│ │ └── <模块名>.md # 配色 / 组件风格 / 动效 / 对标产品的视觉参考
│ │
│ ├── architecture/ # 架构层 — 系统是什么样的
│ │ └── overview.md # 系统架构总览(含 Mermaid 图)
│ │
│ ├── modules/ # 模块实现文档
│ │ ├── README.md # 模块索引:所有模块清单 + 依赖关系 + 一句话职责
│ │ └── <module>/
│ │ └── README.md # 模块实现详情
│ │
│ └── guides/ # 操作指南
│ ├── development.md # 开发环境搭建
│ ├── testing.md # 测试策略与规范
│ ├── build-and-deploy.md # 构建与部署
│ └── troubleshooting.md # 常见问题排查
│
├── tests/ # 测试
└── scripts/ # 脚本(CI / 部署 / 自动化)
4.3 数据流设计
描述核心数据如何流转:用户操作 → 组件 → 状态管理 → API → 数据库 → 返回
Step 5: 写 ADR(架构决策记录)
每项关键技术决策写一条 ADR。格式:
## ADR-{序号}: {决策标题}
- **日期:** YYYY-MM-DD
- **状态:** 已采纳
### 背景
<为什么需要做这个决策?产品需求中的什么约束驱动的?>
### 决策
<我们选择了什么?>
### 备选方案
| 方案 | 优点 | 缺点 | 为什么没选 |
|------|------|------|-----------|
| 方案 B | ... | ... | ... |
| 方案 C | ... | ... | ... |
### 影响
- 正面:<带来什么好处>
- 负面/风险:<失去什么、引入什么风险>
- 缓解:<如何降低风险>
Step 6: 确认与输出
6.1 确认摘要
## 技术架构确认
**产品类型**:<Web/桌面/移动/CLI>
**架构模式**:<SPA 单页应用 / SSR 服务端渲染 / Electron 桌面 / CLI 命令行 / ...>
**核心技术栈**:
| 层级 | 选型 | 理由(一句话) |
|------|------|--------------|
| 前端框架 | | |
| UI 库 | | |
| 状态管理 | | |
| ... | | |
**可复用项目**:
- <项目名> — 覆盖 <功能>,协议 <MIT/Apache>,可省 <N> 个实现任务
**架构决策**:共 <N> 条 ADR
以上方案可以吗?有没有要调整的?
用户确认后写入 Tech-Arch.md。
6.2 输出格式
# <产品名称> — 技术架构
## 1. 架构总览
### 1.1 产品类型与架构模式
### 1.2 架构图(Mermaid 或文字)
### 1.3 技术栈总览
| 层级 | 选型 | 版本 | 选型理由 |
|------|------|------|---------|
| 前端框架 | | | |
| ... | | | |
## 2. 架构决策记录 (ADR)
### ADR-001: <标题>
...
### ADR-002: <标题>
...
## 3. 复用项目清单
| 项目 | 覆盖功能 | 协议 | 复用方式 | 可省任务数 |
|------|---------|------|---------|-----------|
| | | | | |
## 4. 自研模块清单
| 模块 | 原因 |
|------|------|
| | |
## 5. 项目规范约束
> 由 tech-architect 向用户收集后归档。后续所有 skill 强制执行,禁止偏离。
### 5.1 目录规范
### 5.2 命名规范
| 类型 | 规则 | 示例 |
|------|------|------|
| 文件名 | | |
| 目录名 | | |
| 类名 / 组件名 | | |
| 函数名 | | |
| 变量名 | | |
| 常量名 | | |
| 类型 / 接口 | | |
| 枚举 | | |
### 5.3 注释规范
| 类型 | 规则 |
|------|------|
| 公共 API | |
| 复杂逻辑 | |
| 待办标记 | |
| 废弃标记 | |
| 禁止事项 | |
### 5.4 编码规范
| 规则 | 说明 |
|------|------|
| 类型安全 | |
| 错误处理 | |
| 导入顺序 | |
| 文件长度 | |
| 函数长度 | |
| 副作用 | |
| 未使用代码 | |
## 6. 目录结构设计
## 7. 数据流设计
## 8. 风险与应对
| 风险 | 影响 | 应对 |
|------|------|------|
---
> 关联:[Product-Spec.md](./Product-Spec.md) | [Design-Brief.md](./Design-Brief.md)(如有)
6.3 进度 checkpoint
更新 .claude/progress.json:
current_phase: "architecture"
current_skill: "tech-architect"
milestones 追加「技术架构已确定: 条 ADR」
documents.Tech-Arch.md:exists: true
输出
Tech-Arch.md — 技术架构文档(架构总览 + ADR + 复用清单)
Product-Spec-CHANGELOG.md — 追加 新增:技术架构设计与选型,<N> 条 ADR
注意事项
- 每项决策必须列出备选方案 — 不要只写「我推荐 React」,要写「对比了 React/Vue/Svelte,选 React 因为 XXX」
- 搜索证据要具体 — 写版本号、Stars 数、最近 commit 日期,不要「社区很活跃」这种模糊描述
- 没有完美的方案,说清楚代价 — 选 Electron 就牺牲了 Web 的轻量,选纯 Web 就牺牲了系统级 API
- 相关性优先于热度 — Stars 最多的不一定最适合。一个 500 Stars 但完美匹配需求的库 > 5万 Stars 但只能覆盖 30% 需求的库
- ADR 是活的文档 — 如果后续开发中发现某个决策不成立,可以新增 ADR 标记为「已废弃」并指向新决策