V1.0.0
WinDesign A2UI Vue

AI Skills 介绍 ​

win-design-a2ui-vue Skill 是一套面向 AI Agent / 大模型的知识包，帮助模型在 不手写 Vue 模板 的前提下，生成可被 win-design-a2ui-vue 渲染器正确解析的 A2UI v0.9 JSON。

项值
Skill 版本1.1.0
包版本1.0.0
协议版本A2UI v0.9
组件数量67 个
JSON Schema68 个（含 pango-editor）

如何获取与配置 ​

从 WinCode Skills 安装 win-design-a2ui-vue Skill，在 Cursor / Claude Code 等支持 Skill 的 IDE 中启用。

这个 Skill 解决什么问题？ ​

在 AI 驱动 UI 的场景里，模型很容易：

  • 输出 Vue 模板冒充 JSON
  • 把组件 内联嵌套 而不是扁平 id 引用
  • 臆造 catalog / Schema 中不存在的组件名或属性

Skill 通过 SPO 框架（Scope → Process → Output）和 JSON Schema 权威源，把生成过程约束在 A2UI v0.9 协议之内。

用户需求
   │
   ▼
AI Agent + win-design-a2ui-vue Skill
   │  读 protocol / schemas / scenes
   ▼
A2UI v0.9 JSON 消息流
   │
   ▼
win-design-a2ui-vue 渲染器 → Vue 页面

双模式 ​

模式适用场景Skill 参考
① 生成 A2UI JSON（主）AI Agent 推流、后端返回 JSON 描述页面protocol/、schemas/、scenes/
② Vue 接入渲染器（次）用户要 SFC / 集成代码而非纯 JSON对应本站 快速上手、Processor API

SPO 工作流 ​

S — Scope（范围） ​

  • 协议：A2UI v0.9 四种消息 — createSurface / updateComponents / updateDataModel / deleteSurface（详见 JSON 消息格式）
  • 组件白名单：67 个内置组件（详见 组件参考）
  • 属性权威源：references/schemas/*.json（非 Vue props 文档）
  • 禁止：Vue 模板冒充 JSON、内联嵌套、无 root、Schema 外属性

P — Process（流程） ​

生成 JSON（默认）

  1. 读协议基础 → 确认组件名
  2. 打开 schemas/{组件}.json，仅使用 Schema 声明的属性
  3. 按场景读 scenes/ 或 protocol/components/
  4. 对照 validation 规则
  5. 输出前检查 forbidden 清单

Vue 接入（用户要代码时）

  1. 安装 win-design-a2ui-vue → 快速上手
  2. 调用 processMessages / processMessages2 → Processor API
  3. 监听 action.event → Window 事件监听

O — Output（输出清单） ​

生成 JSON 时，Skill 要求模型自检：

  • [ ] 每条消息含 version: "v0.9"
  • [ ] 存在 id: "root" 组件
  • [ ] 扁平结构，children / child 仅为 id 字符串
  • [ ] 每个组件字段均来自对应 JSON Schema
  • [ ] WButton 文案通过 Text / WText child 引用
  • [ ] 交互组件的 action.event.name 已定义
  • [ ] 未使用 catalog / schema 外的组件

推荐 Prompt ​

生成 A2UI JSON

生成 A2UI v0.9 JSON，使用 WButton/WForm/WTable 等组件。
先读 protocol/protocol-basics.md、protocol/guidelines.md；
组件名查 component-catalog.md，属性必须对照 references/schemas/{组件}.json，禁止编造字段；
禁止内联嵌套、禁止 Vue 模板。

JSON Schema 驱动

根据用户需求，先查 schema-index.md 定位组件，
读取 schemas/ 下对应 JSON Schema，按 properties 生成 updateComponents 消息流。
每条消息 version: v0.9，必须有 id:root。

Skill 目录结构 ​

Skill 源码位于仓库根目录 win-design-a2ui-vue/：

win-design-a2ui-vue/
├── SKILL.md                 # Skill 入口（SPO 框架）
├── skill.config.json        # 版本与元数据
├── version.json
└── references/
    ├── schema-index.md      # Schema 入口（生成 JSON 必读）
    ├── schemas/             # 组件 JSON Schema（Draft-07）
    ├── protocol/            # 协议规则、分类配方、示例
    ├── component-catalog.md # 67 组件白名单
    ├── json-format.md       # 消息 / action / loadEventHandler 格式
    ├── processor-api.md     # Vue 渲染 API
    ├── event-listener.md
    ├── scenes/              # JSON 场景骨架（表单、表格等）
    └── forbidden.md         # 禁用清单

Design by UED