是什么 → 用在哪 → 由什么组成 → 技术架构怎样

每次接到陌生需求/技术选型/新项目，在 Claude Code 中按这四步问，1-2 小时建立 70% 领域认知，然后再动手。

问	目的	前端工程师重点关注
是什么	定位，排除伪需求	这东西是不是我该做的？有没有更简单的解法？
用在哪	理解优先级	结合实际业务场景，先做什么后做什么
由什么组成	功能拆解	哪些组件/模块是必须的，可以直接拆成开发任务
技术架构	支撑技术选型	结合现有技术栈，选什么库、怎么设计数据结构

---

Demo 1：接手后台管理系统，要加「工作流编排」模块

第一问：是什么

工作流编排在后台管理系统中是什么？它解决什么问题？
和审批流有什么区别？和低代码平台的"流程编排"有什么区别？

第二问：用在哪

企业后台系统里，工作流编排最常见的使用场景是什么？
哪些场景是刚需（没有就不行），哪些是锦上添花？
以我们的系统为例（电商/CRM/内部运营——替换成你实际的），优先级怎么排？

第三问：由什么组成

一个工作流编排模块，前端需要哪些子功能？
- 画布拖拽？节点配置面板？连线规则？条件分支？
哪些是 MVP 必须的，哪些可以二期做？
给我一个功能清单，标注优先级。

第四问：技术架构

前端实现工作流编排，主流方案有哪些？
对比 React Flow、X6(AntV)、LogicFlow 的优劣，
结合我们项目用的是 Vue 3 + TypeScript + Vite，推荐哪个？为什么？
数据结构（节点/边/条件）一般怎么设计？给我一个 TypeScript 类型定义示例。

四问跑完后的产出

• 清楚了工作流 ≠ 审批流，定位准确

• 知道先做「顺序执行 + 条件分支」，并行网关二期

• 功能清单有优先级，可以直接拆 task

• 技术选型有结论（比如 Vue Flow），数据结构有 TypeScript 定义

---

Demo 2：项目引入微前端（qiankun/wujie/Module Federation）

第一问：是什么

微前端是什么？它解决什么具体问题？
什么情况下不需要微前端？（帮我排除伪需求）

第二问：用在哪

我们的场景是：主应用 Vue3，有两个存量子应用（一个 Vue2 一个 React），
还有一个团队要独立开发新模块。
微前端在这个场景下解决的核心痛点是什么？
如果不用微前端，有没有更简单的替代方案？

第三问：由什么组成

微前端方案由哪些部分组成？
主应用需要做什么？子应用需要改什么？共享层（样式/状态/路由）怎么处理？
列出必须解决的问题清单和可选的增强项。

第四问：技术架构

对比 qiankun、wujie、Module Federation 5（Webpack/Vite）：
- 接入成本
- 子应用隔离程度
- 对 Vite 的支持
- 通信机制
结合我们的技术栈（Vue3 + Vite + pnpm monorepo），给出推荐方案和理由。
给我一个最小 POC 的目录结构。

---

Demo 3：「富文本编辑器」选型

第一问：是什么

富文本编辑器在 Web 端解决什么问题？
L1（基础编辑）、L2（结构化文档）、L3（协同编辑）三个层级分别对应什么能力？
我们需要到哪个层级？（需求：内部运营人员编辑活动页文案，支持图片/表格/模板变量）

第二问：用在哪

我们的场景：运营后台编辑营销文案，需要插入商品卡片组件、模板变量（如{{用户名}}），
最终输出 HTML 给 C 端渲染。不需要协同编辑。
这个场景的核心需求是什么？哪些是必须的能力？

第三问：由什么组成

满足上面需求，编辑器需要哪些模块？
- 工具栏配置？自定义 Block？变量插入？图片上传？输出格式化？
哪些开箱即有，哪些需要自己开发？

第四问：技术架构

对比 TipTap、Plate(Slate)、Lexical、WangEditor：
- 自定义扩展能力
- Vue3 支持程度
- 自定义 Block/Node 的开发体验
- 社区活跃度和文档质量
给结论，附一个最小可运行的 Vue3 + TipTap（或你推荐的）代码示例。

---

Demo 4：组件库从 Element Plus 迁移到自研 Design System

第一问：是什么

Design System 和组件库的区别是什么？
我们现在用 Element Plus 做业务开发，什么情况下需要自研？
自研的本质解决的是什么问题——是设计一致性、还是定制能力、还是包体积？

第二问：用在哪

我们有 3 个前端项目共用 Element Plus，痛点是：
- 业务组件重复封装（每个项目都有自己的 SearchForm、ProTable）
- 设计师给的规范和 Element 默认样式差异大，覆盖 CSS 成本高
- 需要支持主题切换（品牌色/暗色模式）
这些痛点用哪种方案解决成本最低？一定要自研吗？

第三问：由什么组成

如果决定做，一个 Design System 需要哪些层次？
- Token 层（颜色/间距/字体）
- 基础组件层（Button/Input/Modal）
- 业务组件层（ProTable/SearchForm/DetailPage）
- 文档站
哪些可以基于 Element Plus 二次封装，哪些必须从头写？
给我一个分层架构图和 MVP 范围。

第四问：技术架构

前端 Design System 的技术实现方案：
- monorepo 结构怎么组织（packages 划分）
- 样式方案选什么（CSS Variables / UnoCSS / Tailwind / CSS-in-JS）
- 构建产物格式（ESM/CJS/UMD）和打包工具选择
- 文档站用什么（Storybook / VitePress / Histoire）
结合 Vue3 + TypeScript + pnpm workspace，给我推荐方案和目录结构。

---

Demo 5：首次接手 SSR/同构渲染需求

第一问：是什么

SSR（服务端渲染）是什么？和 CSR、SSG、ISR 的区别是什么？
它解决的核心问题是 SEO 还是首屏性能？还是两者都有？

第二问：用在哪

我们的场景：电商 C 端商品详情页，要求：
- 搜索引擎能抓取商品信息
- 首屏加载 < 1.5s（移动端弱网）
- 页面有动态数据（价格/库存实时变化）
SSR 在这个场景下是最优解吗？有没有 SSG + 客户端水合 能解决的部分？

第三问：由什么组成

Vue3 SSR 方案需要哪些部分？
- 服务端入口 / 客户端入口怎么分
- 数据预取（asyncData）怎么做
- 状态序列化和客户端水合
- 路由同构
- 错误处理和降级策略
哪些 Nuxt3 已经封装好了，哪些需要自己处理？

第四问：技术架构

对比方案：
1. Nuxt3（全功能框架）
2. Vite SSR 手动搭建（vite-plugin-ssr / vike）
3. 仅对关键页面做 SSG，其余保持 CSR

结合我们的情况（已有 Vue3 SPA 项目，只有商品页和营销落地页需要 SEO），
哪种迁移成本最低？给出推荐方案和渐进式迁移路径。

---

使用要点

提问原则

1. 带上你的实际约束 — 技术栈、团队规模、时间节点、已有代码，不要泛泛而问

2. 每问追到可执行 — 第三问结束要有功能清单，第四问结束要有技术选型结论

3. 敢于质疑前提 — 第一问就可以问"我是不是根本不需要这个东西"

四问之后的下一步

四问完成
  ├── 功能清单（第三问产出）→ 拆 task / 写排期
  ├── 技术选型结论（第四问产出）→ 写 ADR 或直接开工
  └── 可选：沉淀为 Skill（如果这类需求会重复出现）

递归使用

四问不是一次性的。开发过程中遇到子问题，对子问题再跑一轮四问：

大四问：工作流编排模块怎么做
  └── 子四问：画布拖拽状态管理怎么设计
       └── 孙四问：undo/redo 用什么方案实现

粒度越细，决策越准。

与 Skill 结合

当你发现某类四问会反复出现（比如每次接新第三方 SDK 都要跑一遍），把四问模板写成 Skill：

# .claude/skills/tech-evaluation.md

# Skill: 技术选型四问

触发方式：当用户说"评估 XX 技术"、"XX 选型"、"要不要用 XX"时按此流程推进。

## Step 1 — 是什么（定位）
- 这个技术/方案解决什么问题？
- 和我们当前的方案相比，核心差异是什么？
- 什么情况下不需要它？

> 产出：一句话定位 + 适用/不适用场景

## Step 2 — 用在哪（场景匹配）
- 结合用户描述的业务场景，分析是否匹配
- 列出核心痛点和该方案的对应能力
- 如果有更简单的替代方案，主动提出

> 产出：场景匹配度判断 + 替代方案对比

## Step 3 — 由什么组成（工作量评估）
- 引入该方案需要哪些改动？
- 哪些是必须做的，哪些是可选增强？
- 对现有代码的侵入程度如何？

> 产出：功能清单（标注优先级和工作量）

## Step 4 — 技术架构（落地方案）
- 具体用什么库/工具？
- 目录结构怎么组织？
- 给出最小可运行的代码示例

> ⚠ 等待用户确认：技术方案确认后再进入实现阶段

> 产出：技术选型结论 + POC 代码

---

反模式（别这么问）

错误问法	问题	正确姿势
"微前端是什么"	太泛，没有约束	"我们的场景是 XX，微前端能解决什么"
"帮我对比所有状态管理方案"	没有场景，对比无意义	"Vue3 项目，跨组件共享用户信息+购物车，用什么"
"XX 技术好不好"	没有好不好，只有适不适合	"我们的约束是 XX，XX 技术在这个约束下合适吗"
只问前两问就开工	没搞清楚组成和架构就写代码	四问跑完再动手，磨刀不误砍柴工