Stats
Actions
Tags
From fe-dev
生成/更新前端详细设计文档，服务于技术评审和 AI 执行参考。触发词: "feat design", "详细设计", "设计文档", "feat-design"
How this skill is triggered — by the user, by Claude, or both
Slash command
/fe-dev:feat-designThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
> 共享约定: `<skill-path>/references/feat-utils.md`
共享约定:
<skill-path>/references/feat-utils.md文档模板:<skill-path>/templates/design-template.md
生成/维护前端详细设计文档，同时服务于两类读者：
文档是可选步骤。复杂功能（新建页面、跨端协作、改造优化、性能/架构）推荐走；简单改动（bug 修复、小样式调整）跳过即可，直接 feat-gen。
| 命令 | 用途 |
|---|---|
/fe-dev:feat-design [name] | 生成新设计文档 |
/fe-dev:feat-design [name] update | 评审反馈后迭代修改 |
/fe-dev:feat-design [name] check | 按模板末尾自检清单检查文档质量 |
/fe-dev:feat-design [name] - 生成设计文档未指定 name 则从 git branch --show-current 获取（遵循 getFeatName 约定）。
不在 feat 分支且未指定 name → 提示用户切换到功能分支或手动指定。
ls docs/features/feat-{name}/index.md
/fe-dev:feat-new检测需求与设计稿：
ls docs/features/feat-{name}/requirements/*.md 2>/dev/null | grep -v links.md
ls docs/features/feat-{name}/ui/specs/*-analysis.md 2>/dev/null
feat-req sync / 取消输出路径：docs/features/feat-{name}/design/design.md
design-v{mtime}.md 后重新生成update 子命令做增量）通过 AskUserQuestion 询问功能性质（决定章节重心和组织方式）：
| 选项 | 说明 | 详细设计组织方式 | 七、改动说明 |
|---|---|---|---|
| 🆕 新建功能/页面 | 从 0 到 1 的新页面/新流程 | 按模块组织 | 删除本章 |
| 🔧 改造/优化 | 现有系统改动 | 按关键问题组织 | 必填 |
| 🔀 跨端协作 | 前后端/多端重点对齐 | 按关键问题 + 强化接口章节 | 按需 |
| ⚡ 性能/架构升级 | 瓶颈优化、架构重构 | 按关键问题 | 必填 |
| 🏗️ 新模块/新系统 | 新建模块或子系统 | 按模块 | 删除本章 |
自动建议：先扫描 requirements/ 文件名和内容关键词（"优化"/"改造"/"新增"/"性能"），给出推荐选项让用户确认而非从头选。
为生成提供项目背景：
| 文件 | 用途 | 不存在时 |
|---|---|---|
docs/features/feat-{name}/index.md | 功能元信息（变量替换源） | 报错退出 |
docs/features/feat-{name}/requirements/*.md | 原始需求（排除 links.md） | 步骤 2 已处理 |
docs/features/feat-{name}/requirements/extra.md | 追加需求（有则合并） | 跳过 |
docs/features/feat-{name}/ui/specs/*-analysis.md | UI 分析笔记 | 跳过 |
CLAUDE.md（项目根） | 项目开发规范 | 跳过 |
package.json | 技术栈 | 跳过 |
检查 superpowers:brainstorming 是否可用。
不可用时通过 AskUserQuestion 提示：
superpowers 插件未安装。安装后可生成更高质量的设计文档。
安装方式：
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace
选项：
1. 继续使用简化版生成（无需安装）
2. 取消，安装后重新运行
如果 superpowers:brainstorming 可用（推荐）：
按顺序调用：
superpowers:brainstorming — 传入需求全文 + UI 分析 + 项目上下文 + 选定场景，要求：
<skill-path>/templates/design-template.md 的骨架组织superpowers:writing-plans（可选）— 如果用户后续不用 feat-gen 生成独立 plan.md，把"九、实施计划"一节也补上。否则此步跳过。
否则（兜底）：
AI 直接生成。读取 <skill-path>/templates/design-template.md，按以下规则：
变量替换（优先从 docs/features/feat-{name}/index.md 提取）：
| 变量 | 值来源 |
|---|---|
{name} | feat 名称（步骤 1 获取） |
{description} | index.md 的「功能描述」字段 |
{createdAt} | 当前时间（如 date '+%Y-%m-%d %H:%M'） |
{author} | git config user.name |
{branchFull} | git branch --show-current（通常为 feat/{name}） |
{requirementDoc} | index.md 的「需求文档」字段，无则留空 |
{prototypeUrl} | index.md 的「原型地址」字段，无则留空 |
按场景裁剪章节（参考步骤 4 表格）
内容密度约束（严格遵守）：
无论哪条路径：
check 子命令用）目录不存在则创建：
mkdir -p docs/features/feat-{name}/design
写入 docs/features/feat-{name}/design/design.md。
输出摘要：
✅ 设计文档已生成
📁 路径: docs/features/feat-{name}/design/design.md
🎯 场景: 🔧 改造/优化
📊 章节统计: 7/9（删除 "七、改动说明" 和 "九、实施计划"）
📝 关键决策数: 5
⚠️ 建议: 评审前 AskUserQuestion 让作者补充 "五、关键决策" 的方案对比
🔗 依赖 Superpowers: 是/否（降级模式）
/fe-dev:feat-design [name] update - 评审反馈迭代评审后基于反馈修改 design.md。
若不存在 → 提示先运行 /fe-dev:feat-design [name]。
AskUserQuestion：
在文档顶部的"变更记录"表格追加一行：
| {today} | v1.0.1 | 评审反馈：{摘要} | {author} |
版本号规则：patch +1（v1.0.0 → v1.0.1）；若涉及重大方案调整（如更换技术选型）→ minor +1（v1.0.0 → v1.1.0）。
✅ 设计文档已更新（v1.0.1）
📝 修改章节: 四、接口设计（4.2.1 新增字段）、六、异常与边界（新增 CORS 失败场景）
🔗 原版本已保留在 Git 历史
/fe-dev:feat-design [name] check - 文档自检对已有 design.md 按模板收尾的自检清单逐项检查。
| 项 | 检查方式 |
|---|---|
| 是否删除了无内容的章节 | 扫描章节正文，识别 < 3 行或只有注释的节 |
| 每节是否有决策/经验/契约 | 检测是否只有描述性内容（无"决定"/"理由"/"因为"等关键字） |
| 是否避免了重复 PRD | 对比 requirements/*.md，标记疑似重复段落 |
| 决策是否都带理由 | "五、关键决策"下每条要有"理由"子项 |
| 代码路径/方法签名是否精确 | 识别形如 src/xxx/yyy.ts 的路径，检查文件存在性 |
| 异常矩阵是否覆盖主路径 | 比对"二、整体设计"的流程节点，看"六、异常与边界"是否都有对应项 |
📋 设计文档自检报告
✅ 通过: 4 项
⚠️ 建议: 2 项
- 章节 5.2 "MVP 取舍" 未写理由
- 章节 4.2.1 引用的 src/api/material.ts 文件不存在
❌ 未通过: 0 项
是否打开文档定位问题？ [y/N]
| skill | 联动方式 |
|---|---|
feat-new | 创建 feat 目录时不强制生成 design 目录；feat-design 首次运行时按需创建 |
feat-req | design 的输入源之一，feat-design 运行前建议先 sync |
ui-add | design 的辅助输入，UI 分析结果会被读入 |
feat-gen | 强联动：feat-gen 运行前检测 design.md 是否存在，存在则优先作为输入（而不只依赖 requirements/） |
feat-update | 需求变更时，feat-update 应提示"design.md 可能需要同步更新"，但不自动改 |
feat-exec | 间接通过 plan.md 使用；feat-exec 不直接读 design.md |
📝 需求采集中 的延伸步骤npx claudepluginhub twoer/skills --plugin fe-devGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.