architecture-design

Name: architecture-design
Author: echoVic

554stars48forks

How to install architecture-design?

echovic/boss-skill/architecture-design

$npx -y skills add echoVic/boss-skill --skill architecture-design

Installs into the current project.

Summary

系统架构设计方法论，包含架构模式选择、系统分层、目录结构设计

Files · 1

View on GitHub

SKILL.md

1	# 系统架构设计方法论
2
3	## 适用场景
4
5	基于技术调研结论，设计完整的系统架构，包括：
6	- 架构模式选择（单体/前后端分离/微服务）
7	- 系统分层和模块划分
8	- 目录结构设计
9	- 数据模型设计
10	- API设计
11
12	## 架构设计流程
13
14	### 1. 架构模式选择
15
16	根据项目规模、团队规模、业务复杂度选择合适的架构模式：
17
18	\| 架构模式 \| 适用场景 \| 优点 \| 缺点 \| 团队规模 \|
19	\|----------\|----------\|------\|------\|----------\|
20	\| 单体应用 \| 小型项目、快速迭代、MVP \| 简单、开发快、易部署 \| 扩展性差、耦合高 \| 1-3人 \|
21	\| 前后端分离 \| 中型项目、团队协作、多端支持 \| 职责清晰、并行开发、技术独立 \| 部署复杂、接口管理 \| 3-10人 \|
22	\| 微服务 \| 大型项目、独立部署、高可用 \| 独立扩展、技术异构、故障隔离 \| 复杂度高、运维成本高 \| 10+人 \|
23	\| Serverless \| 事件驱动、弹性伸缩、按需付费 \| 免运维、自动扩展、成本优化 \| 冷启动、供应商锁定 \| 任意 \|
24
25	选择决策树：
26
27	```
28	项目规模？
29	├─ 小型（< 10个页面）
30	│ └─ 单体应用或前后端分离（简化版）
31	├─ 中型（10-50个页面）
32	│ └─ 前后端分离
33	└─ 大型（> 50个页面）
34	├─ 业务模块独立？
35	│ ├─ 是 → 微服务
36	│ └─ 否 → 前后端分离
37	└─ 流量波动大？
38	└─ 是 → Serverless
39	```
40
41	### 2. 系统分层设计
42
43	#### 经典三层架构
44
45	```
46	┌─────────────────────────────────┐
47	│ 表现层 (Presentation) │ ← 用户界面、API接口
48	├─────────────────────────────────┤
49	│ 业务层 (Business) │ ← 业务逻辑、流程控制
50	├─────────────────────────────────┤
51	│ 数据层 (Data Access) │ ← 数据库访问、ORM
52	└─────────────────────────────────┘
53	```
54
55	#### 前后端分离架构
56
57	```
58	┌──────────────┐
59	│ 前端应用 │ ← React/Vue/Angular
60	└──────┬───────┘
61	│ HTTP/WebSocket
62	┌──────▼───────┐
63	│ API网关 │ ← 路由、认证、限流
64	└──────┬───────┘
65	│
66	┌──────▼───────┐
67	│ 后端服务 │ ← 业务逻辑
68	└──────┬───────┘
69	│
70	┌──────▼───────┐
71	│ 数据库 │ ← PostgreSQL/MongoDB
72	└──────────────┘
73	```
74
75	#### 微服务架构
76
77	```
78	┌──────────┐
79	│ 前端应用 │
80	└────┬─────┘
81	│
82	┌────▼─────┐
83	│ API网关 │
84	└────┬─────┘
85	│
86	├─────┬─────┬─────┐
87	│ │ │ │
88	┌────▼┐ ┌─▼──┐ ┌▼───┐ ┌▼────┐
89	│用户 │ │订单│ │商品│ │支付 │
90	│服务│ │服务│ │服务│ │服务 │
91	└────┘ └────┘ └────┘ └─────┘
92	│ │ │ │
93	└──────┴──────┴───────┘
94	│
95	┌────▼────┐
96	│ 数据库 │
97	└─────────┘
98	```
99
100	### 3. 系统架构图
101
102	使用 Mermaid 绘制系统架构图：
103
104	前后端分离架构示例：
105
106	```mermaid
107	graph TB
108	subgraph 客户端
109	Web[Web 应用]
110	Mobile[移动端]
111	end
112
113	subgraph 接入层
114	CDN[CDN]
115	LB[负载均衡]
116	end
117
118	subgraph 应用层
119	subgraph 前端服务
120	FE[前端应用]
121	end
122
123	subgraph 后端服务
124	API[API 网关]
125	Auth[认证服务]
126	BIZ[业务服务]
127	end
128	end
129
130	subgraph 数据层
131	DB[(主数据库)]
132	Cache[(缓存)]
133	MQ[消息队列]
134	end
135
136	subgraph 基础设施
137	Log[日志系统]
138	Monitor[监控告警]
139	end
140
141	Web --> CDN
142	Mobile --> LB
143	CDN --> LB
144	LB --> FE
145	FE --> API
146	API --> Auth
147	API --> BIZ
148	BIZ --> DB
149	BIZ --> Cache
150	BIZ --> MQ
151	BIZ --> Log
152	```
153
154	### 4. 目录结构设计
155
156	重要原则：
157	1. 遵循框架惯例：使用检测到的框架的标准目录结构
158	2. 关注点分离：业务逻辑、数据访问、API层清晰分离
159	3. 测试并置：测试文件与源码在同层或专用tests目录
160	4. 配置集中：环境配置统一管理
161
162	#### Next.js App Router 项目结构
163
164	```
165	project/
166	├── app/ # Next.js App Router
167	│ ├── (auth)/ # 路由组：认证相关页面
168	│ │ ├── login/
169	│ │ └── register/
170	│ ├── (dashboard)/ # 路由组：仪表板
171	│ │ ├── layout.tsx
172	│ │ └── page.tsx
173	│ ├── api/ # API Routes
174	│ │ ├── auth/
175	│ │ └── users/
176	│ ├── layout.tsx # 根布局
177	│ └── page.tsx # 首页
178	├── components/ # React组件
179	│ ├── ui/ # UI组件
180	│ └── features/ # 功能组件
181	├── lib/ # 工具库
182	│ ├── db.ts # 数据库连接
183	│ ├── auth.ts # 认证逻辑
184	│ └── utils.ts # 工具函数
185	├── prisma/ # Prisma ORM
186	│ └── schema.prisma
187	├── public/ # 静态资源
188	├── tests/ # 测试
189	└── package.json
190	```
191
192	#### Express + React 前后端分离结构
193
194	```
195	project/
196	├── client/ # 前端
197	│ ├── src/
198	│ │ ├── components/
199	│ │ ├── pages/
200	│ │ ├── hooks/
201	│ │ └── App.tsx
202	│ ├── public/
203	│ └── package.json
204	├── server/ # 后端
205	│ ├── src/
206	│ │ ├── routes/ # 路由
207	│ │ ├── controllers/ # 控制器
208	│ │ ├── services/ # 业务逻辑
209	│ │ ├── models/ # 数据模型
210	│ │ ├── middleware/ # 中间件
211	│ │ └── app.ts # 入口
212	│ ├── tests/
213	│ └── package.json
214	├── shared/ # 共享代码
215	│ └── types/ # TypeScript类型
216	└── docker-compose.yml
217	```
218
219	#### Python FastAPI 项目结构
220
221	```
222	project/
223	├── app/
224	│ ├── api/ # API路由
225	│ │ ├── v1/
226	│ │ │ ├── endpoints/
227	│ │ │ └── router.py
228	│ │ └── deps.py # 依赖注入
229	│ ├── core/ # 核心配置
230	│ │ ├── config.py
231	│ │ └── security.py
232	│ ├── models/ # 数据模型
233	│ ├── schemas/ # Pydantic schemas
234	│ ├── services/ # 业务逻辑
235	│ └── main.py # 入口
236	├── tests/
237	├── alembic/ # 数据库迁移
238	├── requirements.txt
239	└── pyproject.toml
240	```
241
242	#### Go 标准项目结构
243
244	```
245	project/
246	├── cmd/ # 主程序入口
247	│ └── api/
248	│ └── main.go
249	├── internal/ # 私有代码
250	│ ├── handler/ # HTTP处理器
251	│ ├── service/ # 业务逻辑
252	│ ├── repository/ # 数据访问
253	│ └── model/ # 数据模型
254	├── pkg/ # 公共库
255	│

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

architecture-design

554stars48forks

View on GitHub

How to install architecture-design?

echovic/boss-skill/architecture-design

$npx -y skills add echoVic/boss-skill --skill architecture-design

Installs into the current project.

Summary

系统架构设计方法论，包含架构模式选择、系统分层、目录结构设计

Files · 1

View on GitHub

SKILL.md

1	# 系统架构设计方法论
2
3	## 适用场景
4
5	基于技术调研结论，设计完整的系统架构，包括：
6	- 架构模式选择（单体/前后端分离/微服务）
7	- 系统分层和模块划分
8	- 目录结构设计
9	- 数据模型设计
10	- API设计
11
12	## 架构设计流程
13
14	### 1. 架构模式选择
15
16	根据项目规模、团队规模、业务复杂度选择合适的架构模式：
17
18	\| 架构模式 \| 适用场景 \| 优点 \| 缺点 \| 团队规模 \|
19	\|----------\|----------\|------\|------\|----------\|
20	\| 单体应用 \| 小型项目、快速迭代、MVP \| 简单、开发快、易部署 \| 扩展性差、耦合高 \| 1-3人 \|
21	\| 前后端分离 \| 中型项目、团队协作、多端支持 \| 职责清晰、并行开发、技术独立 \| 部署复杂、接口管理 \| 3-10人 \|
22	\| 微服务 \| 大型项目、独立部署、高可用 \| 独立扩展、技术异构、故障隔离 \| 复杂度高、运维成本高 \| 10+人 \|
23	\| Serverless \| 事件驱动、弹性伸缩、按需付费 \| 免运维、自动扩展、成本优化 \| 冷启动、供应商锁定 \| 任意 \|
24
25	选择决策树：
26
27	```
28	项目规模？
29	├─ 小型（< 10个页面）
30	│ └─ 单体应用或前后端分离（简化版）
31	├─ 中型（10-50个页面）
32	│ └─ 前后端分离
33	└─ 大型（> 50个页面）
34	├─ 业务模块独立？
35	│ ├─ 是 → 微服务
36	│ └─ 否 → 前后端分离
37	└─ 流量波动大？
38	└─ 是 → Serverless
39	```
40
41	### 2. 系统分层设计
42
43	#### 经典三层架构
44
45	```
46	┌─────────────────────────────────┐
47	│ 表现层 (Presentation) │ ← 用户界面、API接口
48	├─────────────────────────────────┤
49	│ 业务层 (Business) │ ← 业务逻辑、流程控制
50	├─────────────────────────────────┤
51	│ 数据层 (Data Access) │ ← 数据库访问、ORM
52	└─────────────────────────────────┘
53	```
54
55	#### 前后端分离架构
56
57	```
58	┌──────────────┐
59	│ 前端应用 │ ← React/Vue/Angular
60	└──────┬───────┘
61	│ HTTP/WebSocket
62	┌──────▼───────┐
63	│ API网关 │ ← 路由、认证、限流
64	└──────┬───────┘
65	│
66	┌──────▼───────┐
67	│ 后端服务 │ ← 业务逻辑
68	└──────┬───────┘
69	│
70	┌──────▼───────┐
71	│ 数据库 │ ← PostgreSQL/MongoDB
72	└──────────────┘
73	```
74
75	#### 微服务架构
76
77	```
78	┌──────────┐
79	│ 前端应用 │
80	└────┬─────┘
81	│
82	┌────▼─────┐
83	│ API网关 │
84	└────┬─────┘
85	│
86	├─────┬─────┬─────┐
87	│ │ │ │
88	┌────▼┐ ┌─▼──┐ ┌▼───┐ ┌▼────┐
89	│用户 │ │订单│ │商品│ │支付 │
90	│服务│ │服务│ │服务│ │服务 │
91	└────┘ └────┘ └────┘ └─────┘
92	│ │ │ │
93	└──────┴──────┴───────┘
94	│
95	┌────▼────┐
96	│ 数据库 │
97	└─────────┘
98	```
99
100	### 3. 系统架构图
101
102	使用 Mermaid 绘制系统架构图：
103
104	前后端分离架构示例：
105
106	```mermaid
107	graph TB
108	subgraph 客户端
109	Web[Web 应用]
110	Mobile[移动端]
111	end
112
113	subgraph 接入层
114	CDN[CDN]
115	LB[负载均衡]
116	end
117
118	subgraph 应用层
119	subgraph 前端服务
120	FE[前端应用]
121	end
122
123	subgraph 后端服务
124	API[API 网关]
125	Auth[认证服务]
126	BIZ[业务服务]
127	end
128	end
129
130	subgraph 数据层
131	DB[(主数据库)]
132	Cache[(缓存)]
133	MQ[消息队列]
134	end
135
136	subgraph 基础设施
137	Log[日志系统]
138	Monitor[监控告警]
139	end
140
141	Web --> CDN
142	Mobile --> LB
143	CDN --> LB
144	LB --> FE
145	FE --> API
146	API --> Auth
147	API --> BIZ
148	BIZ --> DB
149	BIZ --> Cache
150	BIZ --> MQ
151	BIZ --> Log
152	```
153
154	### 4. 目录结构设计
155
156	重要原则：
157	1. 遵循框架惯例：使用检测到的框架的标准目录结构
158	2. 关注点分离：业务逻辑、数据访问、API层清晰分离
159	3. 测试并置：测试文件与源码在同层或专用tests目录
160	4. 配置集中：环境配置统一管理
161
162	#### Next.js App Router 项目结构
163
164	```
165	project/
166	├── app/ # Next.js App Router
167	│ ├── (auth)/ # 路由组：认证相关页面
168	│ │ ├── login/
169	│ │ └── register/
170	│ ├── (dashboard)/ # 路由组：仪表板
171	│ │ ├── layout.tsx
172	│ │ └── page.tsx
173	│ ├── api/ # API Routes
174	│ │ ├── auth/
175	│ │ └── users/
176	│ ├── layout.tsx # 根布局
177	│ └── page.tsx # 首页
178	├── components/ # React组件
179	│ ├── ui/ # UI组件
180	│ └── features/ # 功能组件
181	├── lib/ # 工具库
182	│ ├── db.ts # 数据库连接
183	│ ├── auth.ts # 认证逻辑
184	│ └── utils.ts # 工具函数
185	├── prisma/ # Prisma ORM
186	│ └── schema.prisma
187	├── public/ # 静态资源
188	├── tests/ # 测试
189	└── package.json
190	```
191
192	#### Express + React 前后端分离结构
193
194	```
195	project/
196	├── client/ # 前端
197	│ ├── src/
198	│ │ ├── components/
199	│ │ ├── pages/
200	│ │ ├── hooks/
201	│ │ └── App.tsx
202	│ ├── public/
203	│ └── package.json
204	├── server/ # 后端
205	│ ├── src/
206	│ │ ├── routes/ # 路由
207	│ │ ├── controllers/ # 控制器
208	│ │ ├── services/ # 业务逻辑
209	│ │ ├── models/ # 数据模型
210	│ │ ├── middleware/ # 中间件
211	│ │ └── app.ts # 入口
212	│ ├── tests/
213	│ └── package.json
214	├── shared/ # 共享代码
215	│ └── types/ # TypeScript类型
216	└── docker-compose.yml
217	```
218
219	#### Python FastAPI 项目结构
220
221	```
222	project/
223	├── app/
224	│ ├── api/ # API路由
225	│ │ ├── v1/
226	│ │ │ ├── endpoints/
227	│ │ │ └── router.py
228	│ │ └── deps.py # 依赖注入
229	│ ├── core/ # 核心配置
230	│ │ ├── config.py
231	│ │ └── security.py
232	│ ├── models/ # 数据模型
233	│ ├── schemas/ # Pydantic schemas
234	│ ├── services/ # 业务逻辑
235	│ └── main.py # 入口
236	├── tests/
237	├── alembic/ # 数据库迁移
238	├── requirements.txt
239	└── pyproject.toml
240	```
241
242	#### Go 标准项目结构
243
244	```
245	project/
246	├── cmd/ # 主程序入口
247	│ └── api/
248	│ └── main.go
249	├── internal/ # 私有代码
250	│ ├── handler/ # HTTP处理器
251	│ ├── service/ # 业务逻辑
252	│ ├── repository/ # 数据访问
253	│ └── model/ # 数据模型
254	├── pkg/ # 公共库
255	│

People who liked this also viewed

6 picks

Type