企业官网建设流程全解析

用过Claude Code的小伙伴应该有所了解，Claude Code经常会需求没理清就开始写代码，报告任务完成时不做测试。今天给大家分享一款插件superpowers，内置20款工作方法论，从头脑风暴到代码审查，从TDD到调试，让你的AI编程工具真正会干活！

superpowers简介

superpowers是目前最火的AI编程skill框架，可以为AI编程工具提供系统化的工作方法论，目前在Github上已有20w star！

superpowers中包括如下14个skill。

还有一个中文社区版项目superpowers-zh，除了包括上述skill外，还包括6个中国特色的skill。

安装

这里以Claude Code为例，介绍下superpowers-zh的安装。

• 我们可以使用npm命令来安装，这里使用项目级别的安装方式；

# 先进入你的项目目录，不要在主目录（~）下运行cd/your/project# 安装中文版superpowersnpx superpowers-zh

• 安装完成后会自动在项目目录下创建.claude目录，并生成对应的skill文件；

• 如果你想卸载的话，可以使用如下命令。

npx superpowers-zh@latest--uninstall

这或许是一个对你有用的开源项目，mall项目是一套基于 SpringBoot3 + Vue3 的电商系统（Github标星60K），后端支持多模块和微服务架构，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！

• Boot项目：https://github.com/macrozheng/mall
• Cloud项目：https://github.com/macrozheng/mall-swarm
• 文档网站：https://www.macrozheng.com

项目演示：

使用

这里以开发一个前后端分离的Markdown编辑器为例，介绍下superpowers的使用。

• 首先输入提示词：我想开发一个Markdown编辑器，Claude Code会调用brainstormingskill来帮助你理清需求；

• 这里有一个提供视觉伴侣的功能非常有意思，会开启一个页面服务，访问可以选择编辑器的布局；

• 选择好布局之后，Claude Code会让你选择编辑器运行在什么平台上；

• 之后会问你偏好哪种前端解决方案；

• 之后是让你选择功能边界，例如这个Markdown编辑器的主要用途是什么；

• 之后是数据存储的位置；

• 之后是让你选择你偏好的后端技术栈；

• 之后是让你选择你必须的Markdown编辑器功能；

• 需求明确之后，Claude Code还会问你一些关键问题，例如是否需要用户登陆注册功能；

• 之后还会让你选择技术方案，这里Claude Code提供了三种技术方案；

• 根据你选的技术方案，Claude Code还会通过视觉伴侣提供项目的整体架构图；

• 以及数据模型设计图；

• 还有前端页面布局图；

• 以及REST API设计；

• 还有项目结构与路由设计；

• 整体设计完成后，Claude Code还会编写完整的设计文档；

• 之后会调用writing-plansskill来创建实现计划；

• 具体实现计划如下，共拆分成了28个小任务，非常详细；

• 实现计划编写完成后，会让你选择是使用subagent-driven-developmentskill来进行功能开发，还是使用executing-plansskill；

• 经过一段时间的编码之后，Claude Code完成了整个实现计划；

• 如果你让Claude Code来运行前后端，并且安装了chrome-devtools的MCP的话，它还会帮你跑一遍页面测试；

• 最终开发完成的Markdown编辑器效果如下，还是挺炫酷的！

注意点

• 在整个开发过程中Claude Code使用了superpowers中的三个skill；

• test-driven-development并没有显式调用，只是在开发计划里有部分TDD的使用；

• 还有就是为什么要通过subagent-driven-development开启subagent来开发功能，主要是为了上下文隔离。

总结

今天给大家分享了Claude Code+superpowers的使用，superpowers确实功能非常强大，一句话的需求，经过brainstorming之后，给我们把需求整理得清清楚楚。它的视觉伴侣功能很不错，能直观描述系统的架构，大家可以对比下不装superpowers的开发体验，确实不一样了！

项目地址

• 原版：https://github.com/obra/superpowers
• 中文版：https://github.com/jnMetaCode/superpowers-zh