【实践案例】蹲坑灵感爆发：用 SOLO 三端协同从零打造一个前端架构 Skill
背景：一个前端开发者的日常痛点
作为一个前端开发者，我经常遇到一个问题：AI 辅助开发时，对于前端架构设计总是差点意思。
今天在公司蹲坑的时候，闲着没事，掏出手机打开 TRAE SOLO 移动端，让 AI 帮我调研了一下现有的前端相关 Skill 都有哪些。
AI 帮我逐一分析了 frontend-design、frontend-skill、shadcn、web-artifacts-builder、web-design-guidelines、vercel-react-best-practices、vercel-composition-patterns 这 7 个 Skill，得出了一个让我意外的结论：
现有的前端 Skill 全都集中在界面设计上，几乎没有关注逻辑架构的。
比如路由设计、状态管理、数据流这些真正影响项目架构的能力，几乎没有 Skill 涉及。
痛点具象化：AI 连路由都不会用
调研完之后，我又跟 AI 讨论了一个具体问题：AI 在前端路由设计上的欠缺。
我发现一个很典型的问题——如果你不显式告诉 AI “用路由”，它会默认用 if/else 来做页面切换：
// AI 的默认做法 ❌
if (page === 'home') return <HomePage />
if (page === 'about') return <AboutPage />
// 应该用路由 ✅
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
这让我意识到：路由设计、状态架构、数据流这些属于前端架构的能力，AI 确实是欠缺的。
于是我心想：能不能做一个 Skill，让 AI 自动根据业务描述推断出完整的前端架构？
蹲坑的这段时间，完成了从"发现问题"到"提出方案"的全过程 
坑位：多轮讨论，逐步完善设计
接下来的工作就是和 AI 一起把这个 Skill 的设计逐步完善。我们讨论了很多关键问题：
1. Skill 应该覆盖哪些架构维度？
从最初的路由、状态、数据、工程 4 个维度，逐步扩展到 7 个：
| 维度 | 触发条件 |
|---|---|
| 路由架构 | 页面数 ≥ 2 |
| 状态架构 | 有全局数据需求 |
| 数据架构 | 有 API 接口 |
| 工程架构 | 所有项目 |
| 安全架构 | 有登录/权限 |
| 测试策略 | 用户提及 |
| 构建部署 | 用户提及 |
2. 用户不知道自己需要什么页面怎么办？
这是讨论最久的一个问题。最终确定的方案是：内置业务模板，AI 根据业务描述自动推断标准页面结构。
比如用户说"企业后台"，AI 自动推断出登录、仪表盘、用户管理、角色权限等标准页面，然后让用户确认或调整。
3. 模板库是硬编码还是可配置？
讨论后决定：内置配置文件 + 用户可扩展。Skill 内置 10 种业务模板作为 YAML 配置，同时支持用户添加自定义模板。
4. 交互方式怎么做？
这里有一个关键的迭代过程。最初我让 AI 测试 Skill，AI 输出的是纯文本"请确认或调整"，用户需要打字回复。我指出这不对——应该像其他 Skill 一样使用 AskUserQuestion 工具提供可交互的选项。于是我们更新了 SKILL.md，加入了明确的交互指引。
5. Skill 本身是怎么工作的？
我们还讨论了一个元问题：Skill 文件本身是怎么被 AI 执行的？通过分析 pptx、shadcn 等 Skill 的源码，我们理解了 Skill 本质上是"给 AI Agent 的操作手册"，AI Agent 读取 SKILL.md 后按指引执行。
回到工位：云端生成代码，桌面端下载测试
设计讨论完成后，我让 AI 开始生成代码文件。
这里有个关键体验：代码是在云端生成的，我用的是默认云端环境，不需要本地配置任何东西。 AI 在云端创建了完整的 Skill 文件：
frontend-architecture/
├── SKILL.md # 核心交互流程（384行）
├── templates/
│ └── default.yaml # 10个业务模板，108个页面
├── rules/
│ ├── routing.md # 路由架构规则
│ ├── state.md # 状态架构规则
│ ├── data.md # 数据架构规则
│ └── engineering.md # 工程架构规则
└── examples/
└── admin-dashboard.md # 完整示例
生成完后，我直接在桌面端下载了压缩包，安装到本地进行测试。
整个流程：
移动端调研 + 讨论 →
云端生成代码 →
桌面端下载测试
测试与迭代
安装 Skill 后，我用"帮我做一个企业级后台管理系统"来测试。
第一次测试发现问题：AI 输出的是纯文本确认，没有交互选项。于是我们更新了 SKILL.md，明确要求使用 AskUserQuestion 工具。
第二次测试成功！AI 弹出了交互选项：
我选择了所有模块 + React 技术栈，并指定 UI 组件库用 Ant Design。AI 随后生成了完整的架构方案，包括 Mermaid 路由图、状态架构图、目录结构和代码模板。
再也不用担心 AI 用 if/else 切换页面了 
三端协同体验总结
移动端（蹲坑场景）
- 随时记录：有灵感随时掏出手机开始讨论
- 碎片时间利用：蹲坑的十几分钟完成了调研 + 方案构思
- 适用场景：需求讨论、方案设计、灵感记录
桌面端（工位场景）
- 任务同步：移动端的对话完整同步过来，无缝衔接
- 云端生成：代码在云端环境生成，不需要本地配置
- 一键下载：生成的文件直接下载到本地测试
- 适用场景：深度讨论、代码验收、测试迭代
三端协同亮点
- 对话上下文完整同步：从手机到电脑，之前的讨论内容全部保留
- 云端生成 + 本地验收：云端跑任务，桌面端下载结果，零配置
- 长任务分段执行：蹲坑讨论设计 → 工位生成代码 → 测试迭代，每个场景做最适合的事
写在最后
这个 Skill 从蹲坑时的灵感到最终完成，全程用 SOLO 三端协同搞定：
SOLO 的三端协同真正做到了"从工位到通勤，AI 不掉线"。
特别是对于这种需要长时间思考、多轮讨论、迭代完善的复杂任务，三端协同的价值非常大。你可以在任何有灵感的时刻开始，在任何方便的地方继续。