AI 驱动的 WordPress 开发：Superpowers + Impeccable 完全指南

通过提示词与 AI 协作，让开发更简单、更专业

开始之前：你需要准备什么

技术基础要求

在阅读本指南前，建议你已经具备：

WordPress 基础：了解主题、插件的基本概念，会安装和使用 WordPress
PHP 语法基础：理解变量、函数、类的基本概念
命令行操作：能在终端中运行简单命令（如 cd、ls）
Git 基础：了解分支、提交的概念（不熟悉也没关系，我们会讲解）

工具准备

你需要一个支持 AI 技能系统的开发工具：

工具	推荐指数	说明
Claude Code	⭐⭐⭐⭐⭐	功能最完整，支持插件市场
Cursor	⭐⭐⭐⭐⭐	集成 IDE，适合日常开发
Gemini CLI	⭐⭐⭐⭐	Google 出品，响应速度快
Codex CLI	⭐⭐⭐⭐	OpenAI 官方，与 GPT-4 深度集成

新手推荐：从 Claude Code 或 Cursor 开始，它们的插件市场让安装最简单。

本节关键概念

AI 开发工具：能理解自然语言并生成代码的智能助手
技能系统（Skills）：让 AI 按照专业流程工作的指令集

认识你的 AI 开发助手

什么是 Superpowers？

Superpowers 是一个帮助 AI 成为专业软件开发者的技能框架。简单说，它让 AI 不再”想到什么写什么”，而是按照工程师的标准流程工作：

传统 AI 开发的问题：

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

使用 Superpowers 后的流程：

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

Superpowers 包含的核心技能：

技能名称	作用	你该怎么跟 AI 说
`brainstorming`	澄清需求、探索方案	“帮我规划这个功能” / ” brainstorm 一下”
`writing-plans`	制定详细实施计划	“制定实施计划” / “规划开发步骤”
`test-driven-development`	测试驱动开发	“用 TDD 方式开发” / “先写测试”
`systematic-debugging`	系统化调试	“帮我调试这个 Bug” / “找出根本原因”
`subagent-driven-development`	子代理并行开发	“并行开发这些任务”

什么是 Impeccable？

Impeccable 是一个让 AI 生成专业级前端设计的技能系统。如果你用过 AI 生成网页，可能会发现它们长得都很像：紫色渐变、圆角卡片、Inter 字体……这叫”AI 风格”（AI slop）。

Impeccable 的作用就是让 AI 停止生成千篇一律的设计，而是根据你的项目特点创建独特的、专业的界面。

Impeccable 的核心命令：

命令	作用	使用场景
`/teach-impeccable`	首次使用，建立设计上下文	新项目开始时
`/audit`	技术质量检查	代码完成后
`/critique`	设计质量评估	界面完成后
`/polish`	最终润色	发布前
`/typeset`	优化排版	文字显示有问题
`/colorize`	优化配色	颜色搭配不协调

两个系统如何配合

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

完整的工作流程：

用 Superpowers 规划后端功能
用 Superpowers 编写代码和测试
用 Impeccable 设计前端界面
用 Impeccable 审查和润色

第一步：安装技能系统

安装 Superpowers

根据你使用的工具，选择对应的安装方式：

Claude Code（推荐）

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

Cursor（推荐）

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

注意：Cursor 需要启用 Agent Skills：

Settings → Beta → 切换到 Nightly channel
Settings → Rules → 启用 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

安装 Impeccable

Impeccable 提供通用安装命令，自动检测你使用的 AI 工具：

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

这会自动在你的项目中创建对应平台的配置文件夹。

Claude Code 插件市场安装

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

Cursor 安装

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

其他平台

对于 Gemini CLI、Codex CLI、OpenCode、Pi 等，通用 npx skills 命令都支持：

npx skills add pbakaus/impeccable

验证安装

安装完成后，你可以通过以下方式验证：

验证 Superpowers：

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

验证 Impeccable：

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

实战示例 1：开发联系表单插件

在这个示例中，我们将从零开始创建一个 WordPress 联系表单插件。重点是展示你与 AI 的对话过程以及每个阶段的交付成果。

场景设定

你想为客户的 WordPress 网站添加一个简单的联系表单功能，需要：

前端显示表单（姓名、邮箱、主题、留言）
数据保存到数据库
后台可以查看留言
邮件通知管理员

第一阶段：需求澄清（Brainstorming）

你输入的提示词：

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

AI 的思考过程（brainstorming 技能自动触发）：

AI 不会立即写代码，而是先问你一系列问题来澄清需求：

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

你的回复：

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

AI 的交付成果：

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

第二阶段：制定计划（Writing Plans）

你输入的提示词：

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

AI 的交付成果：

# 联系表单插件 - 实施计划
## 目标
创建一个完整的 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. 最终提交
**最终交付**：一个完整的、可生产的联系表单插件

第三阶段：测试驱动开发（TDD）

你输入的提示词：

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

AI 的交付成果：

首先，AI 会创建测试文件：

<?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);
}
}

然后运行测试，你会看到：

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

你输入的提示词：

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

AI 的交付成果：

<?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);
}
}

然后更新主插件文件，在激活时调用这个方法。

再次运行测试：

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

你输入的提示词：

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

第四阶段：前端设计（使用 Impeccable）

假设你已经完成了后端逻辑，现在需要美化表单。

你输入的提示词：

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

如果你是第一次使用 Impeccable，AI 会提示：

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

你输入的提示词：

运行 /teach-impeccable

AI 的交付成果：

AI 会询问你的设计偏好：

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

假设你回答：

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

AI 的交付成果（保存到 .impeccable.md）：

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

现在优化表单样式：

你输入的提示词：

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

AI 的交付成果：

/* 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;
}
}

第五阶段：代码审查（Audit）

你输入的提示词：

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

AI 的交付成果：

## 代码审查报告
### 总体评分：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` 支持
- [ ] 考虑使用更独特的颜色组合
### 是否修复？

你输入的提示词：

修复 P1 问题

AI 会更新代码，修复发现的问题。

第六阶段：最终润色（Polish）

你输入的提示词：

运行 /polish 做最终润色

AI 的交付成果：

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

实战示例 2：设计专业前端界面

这个示例展示如何使用 Impeccable 的设计命令来优化现有界面。

场景设定

你有一个现有的 WordPress 主题，但首页的英雄区域（Hero Section）看起来太普通，你想让它更专业。

初始状态

你的现有代码可能是这样：

<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;
}

这就是典型的”AI 风格”：紫色渐变、Inter 字体、圆角按钮。

第一阶段：设计审查（Critique）

你输入的提示词：

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

AI 的交付成果：

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

第二阶段：样式优化（Typeset + Colorize）

你输入的提示词：

运行 /typeset 优化排版

AI 的交付成果：

AI 会询问你的设计上下文（如果还没有 .impeccable.md），然后给出排版建议：

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

你输入的提示词：

运行 /colorize 优化配色

AI 的交付成果：

## 配色优化方案
### 主色调
- 深蓝灰：#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);
}

这个配色避免了”AI 紫”，更专业、独特。

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

基于审查结果，重写英雄区域的 HTML 和 CSS

**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;
}
}

第四阶段：添加动效（Animate）

你输入的提示词：

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

AI 的交付成果：

/* 添加在文件末尾 */
/* 入场动画 */
@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;
}
}

第五阶段：最终审查

你输入的提示词：

运行 /polish 做最终检查

AI 会检查：

像素级对齐
所有交互状态完整
响应式断点正确
无障碍属性完整
性能优化（无布局抖动）

实战示例 3：排查复杂 Bug

这个示例展示如何使用 Superpowers 的调试技能来系统化排查问题。

场景设定

你的联系表单插件在客户网站上出现了一个奇怪的问题：

表单提交后显示”提交成功”，但后台看不到记录
邮件也没有收到
只在某些浏览器上出现
没有报错信息

第一阶段：启动系统化调试

你输入的提示词：

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

AI 的思考过程（systematic-debugging 技能自动触发）：

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

第二阶段：收集信息并诊断

你的回复：

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

AI 的交付成果：

AI 会在关键位置添加诊断代码：

// 在表单提交处理函数中添加日志
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('提交成功');
}

然后 AI 会指导你查看日志：

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

第三阶段：分析日志

假设你提供了日志：

[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

AI 的分析：

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

AI 会添加更多诊断代码来验证假设：

// 检查实际保存的数据
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;
}

第四阶段：发现根本原因

假设新的日志显示：

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

AI 的推理：

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

AI 会生成检查代码：

// 检查表结构
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);
}
}
}

假设发现：

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

AI 的结论：

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

第五阶段：修复并验证

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);
}
}
}

修复后，AI 会指导你验证：

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

第六阶段：总结与预防

AI 的总结报告：

## 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;
}

验证结果

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

术语表

开发术语

术语	解释
AI 开发工具	能理解自然语言并生成代码的智能助手，如 Claude Code、Cursor
技能系统 (Skills)	结构化的指令集合，让 AI 按照专业流程工作
TDD (Test-Driven Development)	测试驱动开发，先写测试再写代码的开发方法
Git Worktree	Git 功能，允许同时在多个分支上工作
Shortcode	WordPress 短代码，如 `[contact_form]`，可以在页面中插入动态内容
Nonce	WordPress 安全机制，防止跨站请求伪造攻击
AJAX	异步 JavaScript，允许不刷新页面的情况下与服务器通信
WP_List_Table	WordPress 提供的表格类，用于后台数据展示

设计术语

术语	解释
AI Slop	AI 生成的千篇一律的设计，如紫色渐变、Inter 字体、圆角卡片
Design Context	设计上下文，保存项目的设计偏好（颜色、字体、风格等）
OKLCH	现代 CSS 颜色表示法，比 RGB/HEX 更符合人眼感知
Modular Scale	模块化比例，用于创建和谐的字体大小关系
Tinted Neutrals	向中性色（灰）添加微量色彩，让设计更温暖
Anti-pattern	反模式，明确告诉 AI 不应该做什么
WCAG	Web 内容可访问性指南，定义可访问性标准

WordPress 术语

术语	解释
Plugin	插件，扩展 WordPress 功能的代码包
Theme	主题，控制 WordPress 网站外观的模板集合
CPT (Custom Post Type)	自定义文章类型，如作品、产品等
Taxonomy	分类法，如分类目录、标签
Meta Box	元框，文章编辑页面的额外信息框
Customizer	主题定制器，可视化编辑主题选项
Gutenberg	古腾堡编辑器，WordPress 5.0+ 的块编辑器
dbDelta	WordPress 函数，用于创建或更新数据库表

常见问题解答

Q1: 技能不触发怎么办？

检查清单：

确认安装成功

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

手动触发
有时候需要明确告诉 AI 使用技能：
```
你：使用 brainstorming 技能来规划这个功能
```
检查平台设置
- Cursor：确保启用了 Nightly channel 和 Agent Skills
- Gemini CLI：确保安装了 preview 版本并启用了 Skills

Q2: 设计出来的界面还是很像”AI 风格”？

解决步骤：

确保运行了 /teach-impeccable
```
你：运行 /teach-impeccable
```

在提示词中明确禁止

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

使用 /audit 检查

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

Q3: 测试无法运行？

WordPress 测试环境设置：

# 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

如果提示找不到数据库，确保：

MySQL 正在运行
用户名和密码正确
可以创建测试数据库

Q4: 提示词应该怎么写？

有效的提示词模式：

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

无效的提示词模式：

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

Q5: 可以同时使用 Superpowers 和 Impeccable 吗？

可以，而且推荐这样做。

典型工作流程：

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

Q6: 代码质量不稳定？

强制流程，不要跳过步骤：

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

每个步骤都要完成后再进入下一步。

Q7: 需要付费吗？

Superpowers：免费开源（MIT 协议）
Impeccable：免费开源（Apache 2.0 协议）

但你使用的 AI 工具（Claude Code、Cursor 等）可能需要付费。

结语

通过本指南，你学习了：

Superpowers 的核心技能：
- brainstorming – 澄清需求
- writing-plans – 制定计划
- test-driven-development – 测试驱动开发
- systematic-debugging – 系统化调试
Impeccable 的核心命令：
- /teach-impeccable – 建立设计上下文
- /audit – 技术审查
- /critique – 设计审查
- /polish – 最终润色
实战示例：
- 联系表单插件开发（从需求到交付）
- 前端界面优化（从 AI slop 到专业设计）
- Bug 排查（系统化根因分析）

下一步：

安装技能系统
从简单的插件开始练习
逐步尝试更复杂的项目
参考 Superpowers GitHub 和 Impeccable GitHub 获取最新信息

祝你开发顺利！

开始之前：你需要准备什么

技术基础要求

工具准备

本节关键概念

认识你的 AI 开发助手

什么是 Superpowers？

什么是 Impeccable？

两个系统如何配合

第一步：安装技能系统

安装 Superpowers

Claude Code（推荐）

Cursor（推荐）

Gemini CLI

Codex CLI

安装 Impeccable

Claude Code 插件市场安装

Cursor 安装

其他平台

验证安装

实战示例 1：开发联系表单插件

场景设定

第一阶段：需求澄清（Brainstorming）

第二阶段：制定计划（Writing Plans）

第三阶段：测试驱动开发（TDD）

第四阶段：前端设计（使用 Impeccable）

第五阶段：代码审查（Audit）

第六阶段：最终润色（Polish）

实战示例 2：设计专业前端界面

场景设定

初始状态

第一阶段：设计审查（Critique）

第二阶段：样式优化（Typeset + Colorize）

第四阶段：添加动效（Animate）

第五阶段：最终审查

实战示例 3：排查复杂 Bug

场景设定

第一阶段：启动系统化调试

第二阶段：收集信息并诊断

第三阶段：分析日志

第四阶段：发现根本原因

第五阶段：修复并验证

第六阶段：总结与预防

验证结果

术语表

开发术语

设计术语

WordPress 术语

常见问题解答

Q1: 技能不触发怎么办？

Q2: 设计出来的界面还是很像”AI 风格”？

Q3: 测试无法运行？

Q4: 提示词应该怎么写？

Q5: 可以同时使用 Superpowers 和 Impeccable 吗？

Q6: 代码质量不稳定？

Q7: 需要付费吗？

结语

Aaron 鸭梨AI创始人

登录后下载