Superpowers 与 everything-claude-code 与 ui-ux-pro-max-skill 这些怎么合并起来一起用

这三个技能包不是互斥的,而是按任务类型分层配合使用。核心原则是:

superpowers 管流程 → everything-claude-code 管领域/框架 → ui-ux-pro-max 管界面设计


1. 三者的定位

技能包 核心作用 什么时候用
superpowers 开发流程骨架 任何有明确目标的开发任务:写计划、执行计划、调试、代码审查、TDD、用 worktree 隔离开发
everything-claude-code 领域/框架/语言血肉 涉及具体技术栈时:React/Next.js、Python/Django、Kotlin、Go、Flutter、数据库、测试等
ui-ux-pro-max 界面与体验设计 需要设计 UI、生成视觉素材、做设计系统、品牌设计、幻灯片时

2. 典型合并工作流

场景 A:开发一个带复杂 UI 的新功能

markdown 复制代码
1. superpowers:brainstorm    → 先脑暴功能范围和实现方案
2. superpowers:write-plan    → 写出开发计划
3. ui-ux-pro-max             → 设计界面原型/交互规范
4. everything-claude-code:frontend-design / :nextjs-turbopack
                             → 按设计稿实现前端代码
5. superpowers:execute-plan  → 按计划逐步执行剩余后端/联调
6. superpowers:verification-before-completion
                             → 验证功能完整性

场景 B:修复一个前端 UI Bug

ruby 复制代码
1. superpowers:systematic-debugging
                             → 系统化定位问题根因
2. everything-claude-code:frontend-patterns / :flutter-dart-code-review
                             → 按对应框架最佳实践修复
3. ui-ux-pro-max             → 确保修复后的 UI 仍符合设计规范
4. superpowers:test-driven-development
                             → 补回归测试

场景 C:从零构建一个设计系统

markdown 复制代码
1. ui-ux-pro-max             → 定义设计 token、组件规范、品牌调性
2. superpowers:write-plan    → 把设计系统拆成可执行的代码计划
3. everything-claude-code:design-system / :frontend-patterns
                             → 用具体框架(React/Tailwind 等)实现组件库
4. superpowers:requesting-code-review
                             → 发起代码审查

3. 使用时的优先级规则

  1. 任务来了先问自己:这是"流程型任务"还是"领域型任务"?

    • 流程型(计划、执行、审查、调试)→ superpowers 优先
    • 领域型(具体语言/框架)→ everything-claude-code 优先
    • 涉及视觉/交互 → ui-ux-pro-max 优先
  2. 同一场景多技能并存时:

    • superpowers 提供怎么做(工作流)
    • everything-claude-code 提供用什么做(技术栈规范)
    • ui-ux-pro-max 提供做成什么样(设计标准)
  3. 实际调用方式:

    • 在 Claude Code 里,你直接用 /skill-name 或 Skill 工具调用
    • 例如:/superpowers:write-plan 写完计划后,计划里某一步需要前端实现,再切到 /everything-claude-code:frontend-design 和 /ui-ux-pro-max

4. 你现在可以尝试的合并命令

如果你要做一个具体的任务,可以这样组合:

bash 复制代码
/superpowers:brainstorm
"我想做一个 [具体功能],技术栈是 [React/Tailwind],需要好看的 UI"

brainstorm 结果出来后:

arduino 复制代码
/superpowers:write-plan
"基于上面的 brainstorm 结果,写出分步实施计划"

执行到前端部分时:

arduino 复制代码
/ui-ux-pro-max
"为这个功能设计界面,输出设计规范"

然后:

bash 复制代码
/everything-claude-code:frontend-design
"按上面的设计规范,用 React + Tailwind 实现"

你当前有一个 MariPa 图标生成脚本 (generate_maripa_icon.py)和一个 PNG。如果你下一步是想围绕这个做一个带 UI 的应用或网页,我可以直接带你走一遍这三个技能的合并 workflow。需要吗?

相关推荐
小呆呆6663 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_5 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒5 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技5 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu6 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
默_笙7 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
zhangzeyuaaa7 小时前
深入理解 Ruby 运算符:本质、分类、坑点与重载实战
开发语言·前端·ruby
一木 之林7 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript