【AI Agent实战】我是如何用superpowers开发出HTML编辑器的？1个小白可以持续迭代的方法

今年以来，很多文章都在提到使用AI生成HTML文件，相比PPT如何方便和AI原生。然而，办公室里需要的不仅仅是一个设计美观，交互方便的网页，而是一份准确且经得起推敲的内容。只有真正身处其中的同学，才会发现每次AI都还是差那么一点。随着AI越改文件越大，token越耗越多，到最后有种上了AI和HTML的当，迫于汇报时间点硬着头皮接着改的感觉。

因此，在经过了多次“难忘”的经历后，我采用superpowers开发了一个本地的HTML编辑器，经过50多次的迭代，现已在团队内部使用，且正式发布到github了。（https://github.com/louisecxqiu-glitch/html-doc-center）

作为99.7%的没有代码经验的一份子，今天给大家分享我是如何与AI协作，稳定输出的。

一. 准备环境，安装skill

1. 选用AI代码编辑器，如codebuddy，将skill发送给它进行安装

https://github.com/obra/superpowers 安装这个skill

2. 安装好后，让它做个自我介绍

介绍下superpowers，如何使用它进行软件开发

二. 如何使用superpowers进行软件开发

使用superpowers好处：个人认为纪律带来质量保证，和随性的vibe coding相比，一个稳定的工作流程和各环节产生的可审计的记录，最大限度保证了“小白”能长期用它对同一个产品进行迭代。

7步工作流如下：（依次调用了内置的skills）
  
① brainstorming（头脑风暴）
   → 不写代码，先问清需求，探索方案，输出设计文档

② using-git-worktrees（创建隔离工作区）
   → 新分支、干净环境、验证测试基线

③ writing-plans（写实施计划）
   → 拆成 2-5 分钟的小任务，每个任务有文件路径、完整代码、验证步骤

④ subagent-driven-development（子代理驱动开发）
   → 每个任务派一个新子代理执行，两阶段 review（规格合规 + 代码质量）

⑤ test-driven-development（TDD）
   → 强制 RED-GREEN-REFACTOR：写失败测试 → 最小代码通过 → 提交

⑥ requesting-code-review（代码审查）
   → 任务间自动 review，严重问题阻塞进度

⑦ finishing-a-development-branch（收尾）
   → 验证测试、选择 merge/PR/保留/丢弃、清理 worktree

三. 功能迭代实战：为编辑器新增一个图片扫描和查看的功能

下面来看下我实现的V1.15.1版本的演示：编辑器支持md和HTML格式，有用户反馈能不能也支持图片（回答是必须的！）

1）在原项目目录下，提出需求：支持图片格式的扫描和查看

这个时候会调用brainstorming技能，进行澄清，明确需求。

人只需要按照引导确认或者纠正。

2）确认需求后，写实施计划，对需求做进一步拆解，具体到了每个任务Task。

人需要对生产的Plan文件进行审核，有问题提出来做二次更新。

3）确定后启动开发，测试和验证

人需要对更新后的功能进行验收确认，决定是否进行发布。

4）写changelog，发布代码

人需要对Git操作这种“AI不能自动完成”的操作进行授权和确认。

总结

AI毫无疑问赋予了人更多的主观能动性，如何选用正确的方法来一次把事情做对，这个判断及能力仍然尤为稀缺！

想要动手体验“造物”感觉的同学，不妨试一下superpowers。

也欢迎大家体验下我的编辑器，有问题和新需求可随时给我留言。

https://github.com/louisecxqiu-glitch/html-doc-center

持续关注AI前沿，AI Agent实战