AI-Driven WordPress Development: The Complete Guide to Superpowers + Impeccable

Collaborate with AI through cue words to make development simpler and more professional

Before you start: what you need to prepare

Technology base requirements

Before reading this guide, it is recommended that you already have:

WordPress Basics: Understand the basic concepts of themes, plug-ins, installing and using WordPress
PHP Syntax Basics: Understand the basic concepts of variables, functions, and classes
command-line operation: the ability to run simple commands in the terminal (such as cd、ls）
Git Basics: Understand the concepts of branching, committing (it's okay if you're not familiar with them, we'll explain)

Tool Preparation

You need a development tool that supports the AI skill system:

artifact	recommended index	instructions
Claude Code	⭐⭐⭐⭐⭐	Most complete functionality with plug-in marketplace support
Cursor	⭐⭐⭐⭐⭐	Integrated IDE for everyday development
Gemini CLI	⭐⭐⭐⭐	From Google, very responsive.
Codex CLI	⭐⭐⭐⭐	OpenAI official, deep integration with GPT-4

Recommended for newbies: Start with Claude Code or Cursor, whose plugin marketplaces make installation easiest.

Key concepts in this section

AI development tools: an intelligent assistant that understands natural language and generates code
Skills: A command set to make AI work in a professional way

Meet your AI development assistant

What are Superpowers?

Superpowers AI is a skills framework that helps AIs become professional software developers. Simply put, it allows AI to stop ”writing whatever comes to mind” and work according to the standard process of an engineer:

Problems with Traditional AI Development：

你：帮我写个插件
AI：好的，这是代码（直接开始写）
↓ 结果：代码可能不符合规范，没有测试，难以维护

Flow after using Superpowers：

你：帮我写个插件
AI：先别急，让我了解你的需求（brainstorming）
AI：这是设计方案，你看可以吗？
你：可以
AI：好的，我制定实施计划（writing-plans）
AI：现在开始写代码，先写测试（test-driven-development）
↓ 结果：代码规范、有测试、易于维护

Core skills included in Superpowers：

skill name	corresponds English -ity, -ism, -ization	What do you tell the AI?
`brainstorming`	Clarify needs, explore options	“Help me plan this function.” / ”Brainstorm it.”
`writing-plans`	Develop a detailed implementation plan	“Develop an implementation plan” / “Plan development steps”
`test-driven-development`	Test Driven Development	“Develop with TDD” / “Write tests first”
`systematic-debugging`	Systematic debugging	“Help me debug this bug” / “Find out the root cause”
`subagent-driven-development`	Parallel development of subagents	“Develop these tasks in parallel.”

What is Impeccable?

Impeccable is a skill system that allows AI to generate professional-grade front-end designs. If you've ever used AI to generate web pages, you've probably noticed that they all look alike: purple gradients, rounded cards, Inter fonts ...... It's called ”AI slop”.

Impeccable's role is toGetting AI to stop generating cookie-cutter designsInstead, create unique, professional interfaces based on the characteristics of your project.

Core commands of Impeccable：

command	corresponds English -ity, -ism, -ization	Usage Scenarios
`/teach-impeccable`	First time use to establish design context	At the start of a new project
`/audit`	Technical quality control	After the code is complete
`/critique`	Design quality assessment	When the interface is complete
`/polish`	final touches	pre-publication
`/typeset`	Optimized Typography	Problems with text display
`/colorize`	Optimized color scheme	Color matching is not coordinated

How the two systems work together

后端逻辑开发 → Superpowers
前端界面设计 → Impeccable

Complete workflow:

Planning back-end functions with Superpowers
Code and test with Superpowers
Designing front-end interfaces with Impeccable
Reviewing and touching up with Impeccable

Step 1: Installation of the skills system

Installing Superpowers

Depending on the tool you are using, choose the corresponding installation method:

Claude Code (recommended)

# 第一步：注册 Superpowers 市场
/plugin marketplace add obra/superpowers-marketplace
# 第二步：安装插件
/plugin install superpowers@superpowers-marketplace
# 第三步：验证安装
# 问 AI："do you have superpowers?"
# AI 应该回答确认并列出可用技能

Cursor (recommended)

# 在 Cursor Agent Chat 中输入
/add-plugin superpowers
# 或者在插件市场搜索 "superpowers" 并安装

take note of: Cursor requires Agent Skills to be enabled:

Settings → Beta → switch to Nightly channel
Settings → Rules → Enable Agent Skills

Gemini CLI

# 安装扩展
gemini extensions install https://github.com/obra/superpowers
# 验证
gemini extensions list
# 更新
gemini extensions update superpowers

Codex CLI

# 让 Codex 自动获取安装指南
# 直接告诉 Codex：
Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.codex/INSTALL.md

Installing Impeccable

Impeccable provides generic installation commands that automatically detect which AI tools you are using:

# 推荐方式：一键安装（自动检测平台）
npx skills add pbakaus/impeccable --yes
# 更新到最新版本
npx skills update
# 检查是否有新版本
npx skills check

This will automatically create the configuration folder for the corresponding platform in your project.

Claude Code Plugin Marketplace Installation

# 注册市场
/plugin marketplace add pbakaus/impeccable
# 安装
/plugin install pbakaus/impeccable

Cursor Installation

# 通过插件命令
/plugin
# 在 Discover 标签页搜索 "impeccable" 并安装

Other platforms

For Gemini CLI, Codex CLI, OpenCode, Pi, etc., the generic npx skills commands are supported:

npx skills add pbakaus/impeccable

Verify Installation

Once the installation is complete, you can verify it by:

Verify Superpowers：

你：do you have superpowers?
AI：是的，我已经安装了 Superpowers 技能系统。我可以使用 brainstorming、writing-plans、test-driven-development 等技能来帮助你开发。

Validate Impeccable：

你：/
# 查看是否能列出 /audit、/polish、/teach-impeccable 等命令

Practical Example 1: Developing a Contact Form Plugin

In this example, we will create a WordPress contact form plugin from scratch. The point is to showYour conversation with the AIas well asDeliverables for each phase。

Scene Setting

You want to add a simple contact form feature to your client's WordPress website and need to:

Front-end display forms (name, email, subject, message)
Data saved to database
You can view the message in the background
Email Notification Administrator

Phase I: Needs clarification (Brainstorming)

The cue word you entered：

我想开发一个 WordPress 联系表单插件，帮我规划一下这个功能

AI's thought process(Brainstorming skill triggers automatically):

Instead of writing code immediately, the AI will first ask you a series of questions to clarify requirements:

在开始之前，让我了解一些细节：
1. **功能范围**：
- 需要哪些字段？（建议：姓名、邮箱、主题、留言是标准配置）
- 是否需要文件上传功能？
- 是否需要验证码防垃圾邮件？
2. **数据存储**：
- 是否需要在数据库中保存留言记录？
- 后台是否需要管理界面查看历史记录？
3. **邮件通知**：
- 提交后是否需要发送邮件通知管理员？
- 是否需要自动回复给访客？
4. **前端展示**：
- 使用短代码方式（如 [contact_form]）插入页面？
- 还是做成古腾堡块？
5. **样式需求**：
- 是否需要自定义 CSS 样式？
- 还是使用主题默认样式？
请告诉我你的偏好，我会为你制定详细的开发计划。

Your reply.：

就标准字段（姓名、邮箱、主题、留言），需要保存到数据库，后台可以查看，使用短代码方式，需要基本的样式。邮件通知用 WordPress 默认的 wp_mail。

AI deliverables：

## 联系表单插件 - 需求确认
### 核心功能
- 前端表单：姓名、邮箱、主题、留言字段
- 数据存储：保存到 WordPress 数据库
- 后台管理：查看和删除留言
- 邮件通知：使用 wp_mail 通知管理员
### 技术方案
- 短代码：`[yali_contact_form]`
- 自定义数据库表：`wp_yali_contact_submissions`
- 面向对象编程结构
- AJAX 表单提交（无刷新）
### 交付物清单
1. 主插件文件
2. 数据库操作类
3. 表单处理类
4. 短代码实现
5. 后台管理页面
6. 前端样式和脚本
确认后，我将为你制定详细的实施计划。

Stage 2: Writing Plans

The cue word you entered：

确认需求，请制定详细的实施计划

AI deliverables：

# 联系表单插件 - 实施计划
## 目标
创建一个完整的 WordPress 联系表单插件，包含前端展示、后端处理、数据存储和后台管理。
## 技术栈
- PHP 7.4+
- WordPress 5.8+
- Vanilla JavaScript（原生 JS，不使用 jQuery）
- CSS3
---
## 任务清单
### 任务 1：插件基础结构
**预计时间**：15 分钟
**创建的文件**：
- `yali-contact-form/yali-contact-form.php`（主文件）
- `yali-contact-form/includes/class-plugin.php`（主类）
**步骤**：
1. 创建插件文件头
2. 定义常量（版本号、路径等）
3. 实现插件激活/停用钩子
4. 验证插件可以正常激活
**你的检查点**：插件能在 WordPress 后台正常激活和停用
---
### 任务 2：数据库层（使用 TDD）
**预计时间**：30 分钟
**创建的文件**：
- `yali-contact-form/includes/class-database.php`
- `tests/test-database.php`
**步骤**：
1. 先写测试：验证数据库表是否正确创建
2. 运行测试：确认测试失败（红色）
3. 编写数据库类，实现 `create_tables()` 方法
4. 运行测试：确认测试通过（绿色）
5. 重构代码（如有需要）
6. 提交代码
**你的检查点**：运行测试命令能看到测试通过
---
### 任务 3：表单处理逻辑（使用 TDD）
**预计时间**：45 分钟
**创建的文件**：
- `yali-contact-form/includes/class-form-handler.php`
- `tests/test-form-handler.php`
**步骤**：
1. 写测试：验证表单数据验证逻辑
2. 写测试：验证数据保存功能
3. 写测试：验证邮件发送功能
4. 逐个实现功能，保持红-绿-重构循环
5. 提交代码
**你的检查点**：所有表单处理测试通过
---
### 任务 4：前端表单展示
**预计时间**：30 分钟
**创建的文件**：
- `yali-contact-form/includes/class-shortcode.php`
- `yali-contact-form/templates/form-template.php`
- `yali-contact-form/assets/css/form.css`
- `yali-contact-form/assets/js/form.js`
**步骤**：
1. 注册短代码 `[yali_contact_form]`
2. 创建表单 HTML 模板
3. 添加 CSS 样式
4. 实现 AJAX 提交（JavaScript）
5. 提交代码
**你的检查点**：在页面中插入短代码能看到表单，且样式正常
---
### 任务 5：后台管理界面
**预计时间**：40 分钟
**创建的文件**：
- `yali-contact-form/admin/class-admin.php`
- `yali-contact-form/admin/views/submissions-list.php`
**步骤**：
1. 在 WordPress 后台添加管理菜单
2. 创建留言列表页面（使用 WP_List_Table）
3. 实现查看单条留言功能
4. 实现删除留言功能
5. 提交代码
**你的检查点**：能在后台看到留言列表，能查看和删除
---
### 任务 6：前端设计优化（使用 Impeccable）
**预计时间**：20 分钟
**修改的文件**：
- `yali-contact-form/assets/css/form.css`
**步骤**：
1. 运行 `/teach-impeccable` 建立设计上下文（如首次使用）
2. 使用 `frontend-design` 技能优化样式
3. 运行 `/audit` 检查可访问性和响应式
4. 修复发现的问题
5. 提交代码
**你的检查点**：表单在不同设备上显示正常，符合设计规范
---
### 任务 7：最终审查与润色
**预计时间**：15 分钟
**步骤**：
1. 运行 `/polish` 做最终检查
2. 验证所有功能正常工作
3. 代码清理和优化
4. 最终提交
**最终交付**：一个完整的、可生产的联系表单插件

Phase III: Test-Driven Development (TDD)

The cue word you entered：

开始任务 2：数据库层，使用 TDD 方式

AI deliverables：

First, the AI creates the test file:

<?php
// tests/test-database.php
class Test_Yali_Database extends WP_UnitTestCase {
public function test_table_is_created_on_activation() {
global $wpdb;
$table_name = $wpdb->prefix . 'yali_contact_submissions';
// 先清理，确保表不存在
$wpdb->query("DROP TABLE IF EXISTS $table_name");
// 执行激活钩子
do_action('activate_yali-contact-form/yali-contact-form.php');
// 验证表已创建
$result = $wpdb->get_var("SHOW TABLES LIKE '$table_name'");
$this->assertEquals($table_name, $result);
}
public function test_table_has_required_columns() {
global $wpdb;
$table_name = $wpdb->prefix . 'yali_contact_submissions';
// 确保表存在
Yali_Database::create_tables();
// 获取列信息
$columns = $wpdb->get_results("DESCRIBE $table_name");
$column_names = wp_list_pluck($columns, 'Field');
// 验证必需列存在
$this->assertContains('id', $column_names);
$this->assertContains('name', $column_names);
$this->assertContains('email', $column_names);
$this->assertContains('subject', $column_names);
$this->assertContains('message', $column_names);
$this->assertContains('created_at', $column_names);
}
}

Then run the test and you will see:

运行测试...
✗ test_table_is_created_on_activation - 失败
✗ test_table_has_required_columns - 失败
预期：测试失败（红色阶段）

The cue word you entered：

测试已失败，现在实现功能让测试通过

AI deliverables：

<?php
// yali-contact-form/includes/class-database.php
class Yali_Database {
public static function create_tables() {
global $wpdb;
$charset_collate = $wpdb->get_charset_collate();
$table_name = $wpdb->prefix . 'yali_contact_submissions';
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
id bigint(20) unsigned NOT NULL AUTO_INCREMENT,
name varchar(100) NOT NULL,
email varchar(100) NOT NULL,
subject varchar(200) NOT NULL,
message text NOT NULL,
created_at datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id),
KEY email (email),
KEY created_at (created_at)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
}

Then update the main plugin file to call this method on activation.

Run the test again:

运行测试...
✓ test_table_is_created_on_activation - 通过
✓ test_table_has_required_columns - 通过
预期：测试通过（绿色阶段）

The cue word you entered：

测试通过了，继续下一个任务

Phase 4: Front-end design (using Impeccable)

Let's say you've finished the back-end logic and now need to spruce up the form.

The cue word you entered：

优化联系表单的前端样式，使用 frontend-design 技能

If you are using Impeccable for the first time, AI will prompt:

首次使用 Impeccable，建议先运行 /teach-impeccable 建立设计上下文。
这会让后续的样式生成更符合你的项目风格。
是否现在运行？（推荐）

The cue word you entered：

运行 /teach-impeccable

AI deliverables：

The AI will ask you for your design preferences:

为了给你生成独特的设计，我需要了解一些信息：
1. **目标用户**：这个网站的主要访客是谁？（企业客户、普通消费者、专业人士等）
2. **品牌感觉**：用 3 个形容词描述你希望网站给人的感觉
（如：专业、温暖、现代、稳重、活泼等）
3. **参考网站**：有没有你喜欢的设计参考？
4. **明确避免**：有没有你绝对不想看到的设计元素？
5. **颜色偏好**：有品牌色吗？喜欢深色还是浅色主题？
请回答以上问题，我会保存到 `.impeccable.md` 供后续使用。

Suppose you answer:

目标用户是企业客户；希望感觉专业、可信、现代；参考 stripe.com；避免紫色渐变和圆角卡片；品牌色是深蓝色

AI deliverables(Save to .impeccable.md）：

# 设计上下文
## 品牌定位
- 目标用户：企业客户
- 品牌个性：专业、可信、现代
- 参考网站：stripe.com
## 设计语言
- 主色：深蓝色（#1e3a5f）
- 强调色：琥珀色（#f59e0b）
- 背景：暖白色（#fafaf9）
- 字体：Outfit（标题）、Source Sans Pro（正文）
## 避免的样式
- 紫色渐变
- 圆角卡片套卡片
- Inter 字体
- 弹跳动画
## 布局偏好
- 简洁、大量留白
- 微妙的阴影而非边框
- 清晰的信息层次

Now optimize form styles:

The cue word you entered：

基于 .impeccable.md 的设计上下文，优化表单 CSS

AI deliverables：

/* yali-contact-form/assets/css/form.css */
:root {
--ycf-primary: #1e3a5f;
--ycf-accent: #f59e0b;
--ycf-bg: #fafaf9;
--ycf-text: #1c1917;
--ycf-border: #e7e5e4;
--ycf-focus: #3b82f6;
--ycf-error: #dc2626;
--ycf-success: #16a34a;
}
.yali-contact-form {
max-width: 640px;
margin: 2rem auto;
padding: 2.5rem;
background: var(--ycf-bg);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.yali-form-field {
margin-bottom: 1.75rem;
}
.yali-form-label {
display: block;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.875rem;
color: var(--ycf-text);
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.yali-form-input {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--ycf-border);
border-radius: 4px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1rem;
line-height: 1.5;
background: white;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.yali-form-input:focus {
outline: none;
border-color: var(--ycf-focus);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.yali-form-textarea {
min-height: 150px;
resize: vertical;
}
.yali-form-submit {
background: var(--ycf-primary);
color: white;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 0.9375rem;
padding: 0.875rem 2rem;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.yali-form-submit:hover {
background: #152a45;
transform: translateY(-1px);
}
.yali-form-submit:active {
transform: translateY(0);
}
/* 响应式 */
@media (max-width: 640px) {
.yali-contact-form {
padding: 1.5rem;
margin: 1rem;
}
}

Phase V: Code review (Audit)

The cue word you entered：

运行 /audit 检查表单代码质量

AI deliverables：

## 代码审查报告
### 总体评分：17/20（优秀）
| 维度 | 分数 | 说明 |
|------|------|------|
| 可访问性 (Accessibility) | 4/4 | 所有输入框都有标签，焦点指示器清晰 |
| 性能 (Performance) | 4/4 | CSS 选择器高效，无阻塞资源 |
| 主题一致性 (Theming) | 3/4 | 使用了 CSS 变量，但部分间距仍使用固定值 |
| 响应式 (Responsive) | 3/4 | 移动端适配良好，但触摸目标可以更大 |
| 反模式 (Anti-patterns) | 3/4 | 无 AI slop，但可以更独特 |
### 建议修复（按优先级）
**P1 - 建议修复**
- [ ] 将剩余固定间距改为 CSS 变量
- [ ] 确保所有触摸目标至少 44px
**P2 - 可选优化**
- [ ] 添加 `prefers-reduced-motion` 支持
- [ ] 考虑使用更独特的颜色组合
### 是否修复？

The cue word you entered：

修复 P1 问题

AI will update the code to fix the issues found.

Stage 6: Final touches (Polish)

The cue word you entered：

运行 /polish 做最终润色

AI deliverables：

## 润色检查清单
### 视觉对齐 ✓
- [x] 所有元素像素级对齐
- [x] 间距系统一致（使用 4px 基数）
- [x] 视觉重心平衡
### 排版 ✓
- [x] 层次清晰
- [x] 行长度合适（45-75 字符）
- [x] 字体渲染优化
### 交互状态 ✓
- [x] 默认状态
- [x] 悬停状态（hover）
- [x] 焦点状态（focus）
- [x] 激活状态（active）
- [x] 错误状态
- [x] 加载状态
### 最终交付物
- 完整的联系表单插件
- 包含 PHPUnit 测试
- 符合可访问性标准
- 响应式设计
- 专业的视觉设计

Practical Example 2: Designing a Professional Front-End Interface

This example shows how to use Impeccable's design commands to optimize an existing interface.

Scene Setting

You have an existing WordPress theme, but the Hero Section on the front page looks too plain and you want to make it more professional.

initial state

Your existing code might look like this:

<div class="hero">
<h1>欢迎来到我们的网站</h1>
<p>我们提供最好的服务</p>
<button>了解更多</button>
</div>

.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 100px 20px;
text-align: center;
}
.hero h1 {
font-family: Inter, sans-serif;
color: white;
margin-bottom: 20px;
}
.hero p {
color: #e0e0e0;
margin-bottom: 30px;
}
.hero button {
background: white;
color: #667eea;
padding: 12px 24px;
border-radius: 25px;
}

This is the typical ”AI style”: purple gradient, Inter fonts, rounded buttons.

Phase I: Design Review (Critique)

The cue word you entered：

审视这个英雄区域的设计，给出改进建议

AI deliverables：

## 设计审查报告
### 视觉层次：6/10
- 标题与正文对比度不够强烈
- 按钮不够突出
### 情感共鸣：5/10
- 紫色渐变已被过度使用，缺乏品牌独特性
- Inter 字体过于常见，无法传达品牌个性
### 信息架构：7/10
- 结构清晰，但缺少视觉引导
- 留白使用不够大胆
### 认知负荷：8/10
- 信息简单易懂
### 总体建议
1. **更换配色**：放弃紫色渐变，使用更独特的颜色组合
2. **优化字体**：选择更有特色的字体配对
3. **增强层次**：通过大小、粗细、颜色创造更强烈的视觉层次
4. **大胆留白**：增加呼吸空间
5. **添加动效**：使用微妙的入场动画

Phase 2: Style Optimization (Typeset + Colorize)

The cue word you entered：

运行 /typeset 优化排版

AI deliverables：

The AI will ask you for your design context (if it doesn't already exist) .impeccable.md) and then give typographical suggestions:

## 排版优化方案
### 字体配对
- **标题**：Outfit（几何无衬线，现代感强）
- **正文**：Source Serif Pro（衬线体，增加优雅感）
- **按钮**：Outfit（与标题保持一致）
### 字体比例
使用模块化比例（1.25 比例）：
- 大标题：3.052rem（约 48px）
- 副标题：1.953rem
- 正文：1rem（16px）
- 小字：0.8rem
### 行高
- 标题：1.2
- 正文：1.6

The cue word you entered：

运行 /colorize 优化配色

AI deliverables：

## 配色优化方案
### 主色调
- 深蓝灰：#1a202c（专业、稳重）
- 暖白色：#fafaf9（柔和的背景）
### 强调色
- 琥珀金：#f59e0b（行动号召）
### 文字色
- 主文字：#1c1917（暖黑）
- 次要文字：#57534e（暖灰）
### 使用 OKLCH 颜色函数（现代 CSS）
```css
:root {
--primary: oklch(30% 0.08 250);
--accent: oklch(70% 0.15 80);
--text: oklch(25% 0.02 60);
}

This color scheme avoids the ”AI Purple” and is more professional and unique.

### 第三阶段：生成优化代码
**你输入的提示词**：

Rewrite the HTML and CSS of the hero area based on the results of the review

**AI 的交付成果**：
```html
<section class="hero">
<div class="hero-content">
<span class="hero-eyebrow">专业解决方案</span>
<h1 class="hero-title">
用设计驱动<br>
<span class="hero-title-accent">业务增长</span>
</h1>
<p class="hero-description">
我们帮助企业在数字时代脱颖而出，通过精心设计的用户体验和创新的技术方案，实现可持续增长。
</p>
<div class="hero-actions">
<a href="#contact" class="btn btn-primary">开始合作</a>
<a href="#cases" class="btn btn-secondary">查看案例</a>
</div>
</div>
</section>

.hero {
position: relative;
padding: 8rem 2rem 10rem;
background: var(--color-bg, #fafaf9);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 80%;
height: 200%;
background: linear-gradient(
135deg,
transparent 0%,
rgba(30, 58, 95, 0.03) 50%,
transparent 100%
);
transform: rotate(-15deg);
pointer-events: none;
}
.hero-content {
position: relative;
max-width: 64rem;
margin: 0 auto;
}
.hero-eyebrow {
display: inline-block;
font-family: 'Outfit', sans-serif;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent, #f59e0b);
margin-bottom: 1.5rem;
}
.hero-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.5rem, 5vw, 3.815rem);
font-weight: 700;
line-height: 1.1;
color: var(--color-text, #1c1917);
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero-title-accent {
color: var(--color-primary, #1e3a5f);
}
.hero-description {
font-family: 'Source Serif Pro', serif;
font-size: 1.25rem;
line-height: 1.6;
color: var(--color-text-secondary, #57534e);
max-width: 40rem;
margin-bottom: 2.5rem;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
padding: 0.875rem 1.75rem;
font-family: 'Outfit', sans-serif;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all 0.15s ease;
}
.btn-primary {
background: var(--color-primary, #1e3a5f);
color: white;
}
.btn-primary:hover {
background: #152a45;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
}
.btn-secondary {
background: transparent;
color: var(--color-text, #1c1917);
border: 1px solid var(--color-border, #e7e5e4);
}
.btn-secondary:hover {
background: rgba(0, 0, 0, 0.03);
border-color: var(--color-text-secondary, #57534e);
}
@media (max-width: 640px) {
.hero {
padding: 5rem 1.5rem 6rem;
}
.hero-actions {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
}

Stage 4: Add Animate

The cue word you entered：

运行 /animate 添加有意义的入场动效

AI deliverables：

/* 添加在文件末尾 */
/* 入场动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-eyebrow {
animation: fadeInUp 0.6s ease-out forwards;
}
.hero-title {
animation: fadeInUp 0.6s ease-out 0.1s forwards;
opacity: 0; /* 初始隐藏 */
}
.hero-description {
animation: fadeInUp 0.6s ease-out 0.2s forwards;
opacity: 0;
}
.hero-actions {
animation: fadeInUp 0.6s ease-out 0.3s forwards;
opacity: 0;
}
/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
.hero-eyebrow,
.hero-title,
.hero-description,
.hero-actions {
animation: none;
opacity: 1;
}
}

Phase V: Final review

The cue word you entered：

运行 /polish 做最终检查

AI will check：

pixel alignment
All interaction states are complete
Responsive breakpoints are correct
Accessibility attributes complete
Performance optimization (no layout jitter)

Example 3: Troubleshooting Complex Bugs

This example shows how to use Superpowers' debugging skills to systematically troubleshoot problems.

Scene Setting

You have a strange problem with your contact form plugin on a client's site:

After form submission, it shows ”Submit Successfully”, but the background can't see the record.
I didn't get the e-mail either.
Appears only on some browsers
No error message

Phase I: Initiate systematic commissioning

The cue word you entered：

帮我调试这个 Bug：表单提交显示成功，但后台看不到记录，邮件也没收到。使用 systematic-debugging 技能。

AI's thought process(systematic-debugging skill is automatically triggered):

我会按照系统化调试流程来排查这个问题。首先进入 Phase 1：根本原因调查。
Phase 1: 根本原因调查
━━━━━━━━━━━━━━━━━━━━━━━
步骤 1：稳定复现问题
- 在哪些浏览器上出现？（Chrome、Safari、Firefox？）
- 问题出现的频率？（每次都出现还是偶尔？）
- 特定的表单内容会触发吗？（如特殊字符、长文本？）
步骤 2：检查最近更改
- 最近更新过插件吗？
- WordPress 核心或主题有更新吗？
- 服务器环境有变化吗？
步骤 3：添加诊断日志
我需要查看代码，在关键位置添加日志来追踪数据流。
请先回答上述问题，同时我会准备诊断代码。

Phase II: Information gathering and diagnosis

Your reply.：

只在 Safari 上出现，每次都出现。填任何内容都一样。最近没更新过插件。

AI deliverables：

The AI will add diagnostic codes at key locations:

// 在表单提交处理函数中添加日志
public function handle_submission() {
// 诊断 1：检查是否收到请求
error_log('YCF: Form submission received');
error_log('YCF: POST data: ' . print_r($_POST, true));
// 验证 nonce
if (!wp_verify_nonce($_POST['ycf_nonce'], 'ycf_submit_form')) {
error_log('YCF: Nonce verification failed');
wp_send_json_error('安全验证失败');
return;
}
// 诊断 2：检查数据验证
$data = $this->sanitize_input($_POST);
error_log('YCF: Sanitized data: ' . print_r($data, true));
// 诊断 3：检查数据库保存
$result = $this->save_to_database($data);
error_log('YCF: Database save result: ' . ($result ? 'success' : 'failed'));
// 诊断 4：检查邮件发送
$email_sent = $this->send_notification($data);
error_log('YCF: Email send result: ' . ($email_sent ? 'success' : 'failed'));
wp_send_json_success('提交成功');
}

The AI then guides you through the logs:

请重复提交表单一次，然后查看日志：
1. 如果你使用 WP_DEBUG：
查看 wp-content/debug.log
2. 或者使用 WP-CLI：
wp shell
> error_log('test');
请把日志内容发给我。

Phase III: analyzing logs

Assuming you provide logs:

[28-Mar-2026 10:15:23] YCF: Form submission received
[28-Mar-2026 10:15:23] YCF: POST data: Array ( [name] => 张三 [email] => zhangsan@example.com [message] => 测试留言 [ycf_nonce] => 1234567890 )
[28-Mar-2026 10:15:23] YCF: Database save result: success
[28-Mar-2026 10:15:23] YCF: Email send result: failed

Analysis of AI：

Phase 2: 假设形成
━━━━━━━━━━━━━━━
根据日志发现：
✓ 表单提交被正确接收
✓ 数据验证和清理正常
✓ 数据库保存成功（但后台看不到？）
✗ 邮件发送失败
疑问：为什么数据库保存成功但后台看不到？
假设 1：数据库保存到了错误的表
假设 2：后台查询逻辑有问题
假设 3：数据被保存后立即被删除
让我继续调查。

The AI will add more diagnostic code to validate the hypothesis:

// 检查实际保存的数据
public function save_to_database($data) {
global $wpdb;
$table = $wpdb->prefix . 'yali_contact_submissions';
error_log('YCF: Target table: ' . $table);
// 检查表是否存在
$table_exists = $wpdb->get_var("SHOW TABLES LIKE '$table'");
error_log('YCF: Table exists: ' . ($table_exists ? 'yes' : 'no'));
// 执行插入
$result = $wpdb->insert($table, $data);
error_log('YCF: Insert result: ' . print_r($result, true));
error_log('YCF: Insert ID: ' . $wpdb->insert_id);
// 立即查询验证
$saved = $wpdb->get_row("SELECT * FROM $table WHERE id = {$wpdb->insert_id}");
error_log('YCF: Saved record: ' . print_r($saved, true));
return $result;
}

Stage 4: Discovering root causes

Assuming a new log is displayed:

YCF: Target table: wp_yali_contact_submissions
YCF: Table exists: yes
YCF: Insert result: 1
YCF: Insert ID: 0
YCF: Saved record:

AI reasoning：

Phase 3: 验证假设
━━━━━━━━━━━━━━━
关键发现：
- Insert result: 1（表示插入成功）
- Insert ID: 0（异常！成功插入应该有自增 ID）
- Saved record 为空
这意味着：
数据插入"成功"但没有生成 ID，且查询不到。
可能原因：
1. 数据库表结构问题（如没有自增主键）
2. 数据库事务问题
3. 插件冲突导致数据被回滚
让我检查表结构。

The AI generates check codes:

// 检查表结构
public function check_table_structure() {
global $wpdb;
$table = $wpdb->prefix . 'yali_contact_submissions';
$structure = $wpdb->get_results("DESCRIBE $table");
error_log('YCF: Table structure: ' . print_r($structure, true));
// 检查 id 字段
foreach ($structure as $column) {
if ($column->Field === 'id') {
error_log('YCF: ID field type: ' . $column->Type);
error_log('YCF: ID extra: ' . $column->Extra);
}
}
}

Hypothetical discovery:

YCF: ID field type: bigint(20) unsigned
YCF: ID extra:

Conclusion of AI：

Phase 4: 修复与验证
━━━━━━━━━━━━━━━━━━━
找到根本原因！
问题：id 字段的 Extra 属性为空，说明没有设置 AUTO_INCREMENT。
这意味着：
- 每次插入时，id 都是 0（默认值）
- 或者需要手动指定 id
- 插入"成功"但数据可能被覆盖或冲突
修复方案：
修改数据库表，给 id 字段添加 AUTO_INCREMENT。

Phase 5: Fix and validate

Repair code for AI：

// 修复数据库表
public function fix_database_table() {
global $wpdb;
$table = $wpdb->prefix . 'yali_contact_submissions';
// 修改 id 字段为自增
$wpdb->query("ALTER TABLE $table MODIFY COLUMN id bigint(20) unsigned NOT NULL AUTO_INCREMENT");
// 验证修复
$structure = $wpdb->get_results("DESCRIBE $table");
foreach ($structure as $column) {
if ($column->Field === 'id') {
error_log('YCF: Fixed ID extra: ' . $column->Extra);
}
}
}

After the fix, the AI will guide you through the validation:

修复完成。请测试：
1. 提交一个新表单
2. 检查后台是否能看到记录
3. 查看邮件是否收到
同时，我会在修复代码中添加保护逻辑，防止未来出现类似问题。

Phase VI: Summarization and prevention

AI summary report：

## Bug 修复报告
### 问题描述
表单提交显示成功，但后台看不到记录，邮件未发送。
### 根本原因
数据库表 `wp_yali_contact_submissions` 的 `id` 字段缺少 `AUTO_INCREMENT` 属性。
### 为什么只在 Safari 出现？
经过进一步调查，发现问题与浏览器无关，而是与提交时序有关：
- 在数据量小时，id 冲突不明显
- 当数据累积后，id=0 的冲突导致新数据无法真正保存
### 修复方案
1. 修改数据库表结构，添加 AUTO_INCREMENT
2. 更新插件激活逻辑，确保正确创建表
3. 添加数据验证，确保 insert_id > 0
### 预防措施
```php
// 在保存后验证
if ($wpdb->insert_id === 0) {
error_log('YCF: Failed to get insert ID');
wp_send_json_error('数据保存失败，请稍后重试');
return;
}

Verification results

✓ 表单提交后后台可见
✓ 邮件通知正常发送
✓ 所有浏览器正常工作

glossary

Development Terminology

nomenclature	account for
AI development tools	Intelligent assistants that understand natural language and generate code, such as Claude Code, Cursor
Skills	Structured set of instructions for AI to work according to specialized processes
TDD (Test-Driven Development)	Test-driven development, a development methodology that writes tests before writing code
Git Worktree	Git features to allow working on multiple branches at the same time
Shortcode	WordPress shortcodes such as `[contact_form]`The following is a list of the most popular ways to insert dynamic content into a page.
Nonce	WordPress security mechanism to prevent cross-site request forgery attacks
AJAX	Asynchronous JavaScript, allowing communication with the server without refreshing the page
WP_List_Table	WordPress provides table classes for backend data presentation

Design Terminology

nomenclature	account for
AI Slop	AI-generated one-size-fits-all designs such as purple gradients, Inter fonts, and rounded corners on cards
Design Context	Design Context, which saves the project's design preferences (colors, fonts, styles, etc.)
OKLCH	Modern CSS color representations, more compatible with the human eye than RGB/HEX.
Modular Scale	Modular proportions for creating harmonious font size relationships
Tinted Neutrals	Adding trace color to neutrals (grey) makes the design warmer
Anti-pattern	Anti-patterns that explicitly tell the AI what not to do
WCAG	Web Content Accessibility Guidelines, defining accessibility standards

WordPress Terminology

nomenclature	account for
Plugin	Plugins, code packages that extend WordPress functionality
Theme	Themes, a collection of templates that control the appearance of a WordPress site
CPT (Custom Post Type)	Customized article types such as artwork, products, etc.
Taxonomy	Taxonomy, e.g. categorized directories, labels
Meta Box	Meta box, extra info box on article edit page
Customizer	Theme customizer to visually edit theme options
Gutenberg	Gutenberg Editor, Block Editor for WordPress 5.0+
dbDelta	WordPress Functions for Creating or Updating Database Tables

Frequently Asked Questions

Q1: What if a skill doesn't trigger?

Checklist：

Confirm successful installation

# Claude Code
/plugin list
# 应该能看到 superpowers 和 pbakaus/impeccable

manual trigger
Sometimes the AI needs to be explicitly told to use the skill:
```
你：使用 brainstorming 技能来规划这个功能
```
Check platform settings
- Cursor: Ensure that the Nightly channel and Agent Skills are enabled.
- Gemini CLI: Ensure that the preview version is installed and Skills is enabled.

Q2: Is the designed interface still very much in the ”AI style”?

Workout steps：

Make sure /teach-impeccable is running.
```
你：运行 /teach-impeccable
```

In the cue, it is expressly forbidden to

你：设计这个界面，要求：
- 不要使用 Inter 字体
- 不要使用紫色渐变
- 不要所有内容都用卡片包裹
- 参考 stripe.com 的设计风格

Checking with /audit

你：运行 /audit 检查是否有 AI slop

Q3: The test won't run?

WordPress Testing Environment Setup：

# 1. 确保安装了 WP-CLI
wp --info
# 2. 初始化测试环境
wp scaffold plugin-tests my-plugin
cd my-plugin
bin/install-wp-tests.sh wordpress_test root password localhost latest
# 3. 运行测试
vendor/bin/phpunit

If prompted to find the database, make sure:

MySQL is running
Username and password are correct
Test databases can be created

Q4: What should I write for the prompt?

Effective cue word patterns：

✅ "使用 writing-plans 技能制定实施计划"
✅ "用 TDD 方式开发这个功能"
✅ "运行 /audit 检查代码质量"
✅ "基于 .impeccable.md 设计这个组件"

Invalid cue word patterns：

❌ "帮我写代码"（太模糊）
❌ "修复 bug"（没有说明用调试技能）
❌ "美化页面"（主观，应该用具体命令）

Q5: Can I use Superpowers and Impeccable at the same time?

Yes, and it's recommended.。

Typical workflow:

后端开发（Superpowers）
├── brainstorming
├── writing-plans
├── test-driven-development
└── requesting-code-review
前端设计（Impeccable）
├── /teach-impeccable
├── frontend-design
├── /audit
└── /polish

Q6: Unstable code quality?

Force the process, don't skip steps：

1. brainstorming（需求澄清）
↓
2. writing-plans（制定计划）
↓
3. test-driven-development（测试驱动开发）
↓
4. /audit（技术审查）
↓
5. /critique（设计审查）
↓
6. /polish（最终润色）

Each step should be completed before moving on to the next.

Q7: Do I need to pay?

Superpowers: free and open source (MIT protocol)
Impeccable: free and open source (Apache 2.0 protocol)

But the AI tools you use (Claude Code, Cursor, etc.) may require payment.

concluding remarks

With this guide, you learn:

Superpowers' core skills：
- brainstorming - Clarification of needs
- writing-plans - Developing a plan
- test-driven-development - Test Driven Development
- systematic-debugging - Systematic debugging
Core commands of Impeccable：
- /teach-impeccable - Establishing Design Context
- /audit - Technical review
- /critique - Design review
- /polish - Final touches
real-world example：
- Contact form plugin development (from requirements to delivery)
- Front-end interface optimization (from AI slop to professional design)
- Bug check (systematic root cause analysis)

the next step：

Installation of skills system
Start practicing with simple plug-ins
Progressively try more complex projects
consultation Superpowers GitHub 和 Impeccable GitHub Get the latest information

Good luck with your development!

Before you start: what you need to prepare

Technology base requirements

Tool Preparation

Key concepts in this section

Meet your AI development assistant

What are Superpowers?

What is Impeccable?

How the two systems work together

Step 1: Installation of the skills system

Installing Superpowers

Claude Code (recommended)

Cursor (recommended)

Gemini CLI

Codex CLI

Installing Impeccable

Claude Code Plugin Marketplace Installation

Cursor Installation

Other platforms

Verify Installation

Practical Example 1: Developing a Contact Form Plugin

Scene Setting

Phase I: Needs clarification (Brainstorming)

Stage 2: Writing Plans

Phase III: Test-Driven Development (TDD)

Phase 4: Front-end design (using Impeccable)

Phase V: Code review (Audit)

Stage 6: Final touches (Polish)

Practical Example 2: Designing a Professional Front-End Interface

Scene Setting

initial state

Phase I: Design Review (Critique)

Phase 2: Style Optimization (Typeset + Colorize)

Stage 4: Add Animate

Phase V: Final review

Example 3: Troubleshooting Complex Bugs

Scene Setting

Phase I: Initiate systematic commissioning

Phase II: Information gathering and diagnosis

Phase III: analyzing logs

Stage 4: Discovering root causes

Phase 5: Fix and validate

Phase VI: Summarization and prevention

Verification results

glossary

Development Terminology

Design Terminology

WordPress Terminology

Frequently Asked Questions

Q1: What if a skill doesn't trigger?

Q2: Is the designed interface still very much in the ”AI style”?

Q3: The test won't run?

Q4: What should I write for the prompt?

Q5: Can I use Superpowers and Impeccable at the same time?

Q6: Unstable code quality?

Q7: Do I need to pay?

concluding remarks

Aaron Founder of Duck & Pear AI

Login to download