AI 辅助开发三件套：OpenSpec + Superpowers + OpenPencil 集成实战

1
{
2
  "$schema": "https://opencode.ai/config.json",
3
  "instructions": [
4
    "AGENTS.md",
5
    "doc/"
6
  ],
7
  "permission": {
8
    "skill": {
9
      "*": "allow"
10
    }
11
  },
12
  "agent": {
13
    "plan": {
14
      "permission": {
15
        "skill": {
16
          "*": "allow"
17
        }
18
      }
19
    }
20
  }
21
}

1
# 项目指南
2

3
## 语言要求
4
- 所有输出请用中文
5

6
## 技术栈
7
Spring Boot 3.3.0 + MyBatis-Plus + JDK 17 + MySQL + Redis（替换为你的技术栈）
8

9
## OpenSpec 工作流
10
| 命令 | 说明 |
11
|------|------|
12
| /opsx:new | 创建变更 |
13
| /opsx:ff | 快速生成所有文档 |
14
| /opsx:apply | 执行实现 |
15
| /opsx:verify | 验证一致性 |
16
| /opsx:archive | 归档 |
17

18
## 开发规范
19
- 使用 Given/When/Then 格式描述测试场景
20
- 变更必须包含回滚方案
21
- 标注影响的模块和数据库表

1
schema: spec-driven
2

3
context: |
4
  项目：你的项目名称
5
  输出语言：中文
6
  技术栈：Spring Boot + MySQL
7
  业务模块：用户管理、订单系统
8

9
rules:
10
  proposal:
11
    - 必须使用中文输出
12
    - 必须包含回滚方案
13
    - 标注影响的模块范围
14
  specs:
15
    - 使用中文描述测试场景
16
    - 标注涉及的表和 API

1
{
2
  "$schema": "https://opencode.ai/config.json",
3
  "plugin": [
4
    "superpowers@git+https://github.com/obra/superpowers.git"
5
  ],
6
  "instructions": [
7
    "AGENTS.md",
8
    "doc/"
9
  ],
10
  "permission": {
11
    "skill": {
12
      "*": "allow"
13
    }
14
  },
15
  "agent": {
16
    "plan": {
17
      "permission": {
18
        "skill": {
19
          "*": "allow"
20
        }
21
      }
22
    }
23
  }
24
}

1
## OpenSpec + Superpowers 协同规则
2

3
### 规划阶段
4
- 创建变更时指定 schema：`/opsx:new 任务名 --schema superpowers-bridge`
5
- 自动调用 `superpowers:brainstorming`
6

7
### 实现阶段
8
- `/opsx:apply` 自动调用 `superpowers:subagent-driven-development`
9
- 每个任务强制 TDD：RED → GREEN → REFACTOR
10
- 代码审查：两阶段 subagent 审查
11

12
### 验证阶段
13
- 5 项检查：结构验证、任务完成、Delta Spec 同步、设计/规格一致性、实现信号

1
{
2
  "$schema": "https://opencode.ai/config.json",
3
  "plugin": [
4
    "superpowers@git+https://github.com/obra/superpowers.git"
5
  ],
6
  "mcp": {
7
    "openpencil": {
8
      "type": "remote",
9
      "url": "http://127.0.0.1:3100/mcp"
10
    }
11
  },
12
  "instructions": [
13
    "AGENTS.md",
14
    "doc/"
15
  ],
16
  "permission": {
17
    "skill": {
18
      "*": "allow"
19
    }
20
  },
21
  "agent": {
22
    "plan": {
23
      "permission": {
24
        "skill": {
25
          "*": "allow"
26
        }
27
      }
28
    }
29
  }
30
}

1
- id: design-ui
2
  generates: design-ui/
3
  description: UI 设计稿（OpenPencil 格式），从 design.md 前端章节生成
4
  template: design-ui.md
5
  instruction: |
6
    使用 OpenPencil 生成 UI 设计稿。
7
    从 design.md 的 §Frontend Architecture 和 §UI Design Tokens 提取信息。
8
    为 specs/ 中的每个 capability 生成对应的 .op 设计文件。
9
    使用 MCP 工具或 op CLI 创建设计。
10
    输出目录：design-ui/<capability-name>.op
11
  requires:
12
    - design

1
# UI 设计稿
2

3
## 概述
4
本目录包含变更相关的 UI 设计稿，使用 OpenPencil 格式（.op 文件）。
5

6
## 关联 Capabilities
7
| Capability | 设计文件 | 说明 |
8
|------------|----------|------|
9
| {name} | {name}.op | {description} |
10

11
## 设计规范
12
从 design.md 提取的样式要求：
13
- 主色：{primary-color}
14
- 辅助色：{secondary-color}
15
- 背景色：{background-color}
16

17
## 组件清单
18
- Header：顶部导航栏
19
- Content：主内容区域
20
- Footer：底部信息区
21

22
## 使用说明
23
1. 使用 OpenPencil 打开 .op 文件
24
2. 参考设计稿进行代码实现
25
3. 可导出为 PNG 或代码（React/Vue）

1
## OpenPencil 协同规则
2

3
### 集成阶段
4
- **specs 阶段**：定义功能需求，含前后端 Requirement 分类
5
- **design 阶段**：在 §Frontend Architecture 和 §UI Design Tokens 确定前端架构
6
- **design-ui 阶段**：从 design.md 提取信息，生成 .op 文件
7
- **tasks 阶段**：前端任务引用 .op 设计稿
8

9
### 设计文件位置
10
`openspec/changes/<change-name>/design-ui/`
11

12
### MCP 工具
13
- `openpencil_design`：生成 UI 设计
14
- `openpencil_export`：导出设计稿