# WinDesign SKILL 技能 🎉

WinDesign SKILL 是一套面向 AI 编程助手 与 研发同学 的知识包，帮助在写页面时：

只用 win-design 组件，杜绝 Element UI / Ant Design 等跑偏
精准查 125 个组件 API（模板写法为 kebab-case，如 disabled-right）
符合 UED 设计规范（布局、表单、表格、弹窗等）

版本

当前 Skill V1.1.1，适配组件库 win-design 2.6.35。

# 能力概览

层级	内容	说明
代码层	125 组件 API	`references/components/by-name/{组件名}.md`，每组件独立文档
场景层	列表 / 表单 / 弹窗 / 布局 / 消息	`references/scenes/`，可直接套用页面骨架
设计规范层	核心 Token + 业务配方	`references/design-patterns/`
防漂移	禁用清单	禁止 `el-` / `a-` / `n-` 标签及其他组件库

# 📦 获取方式

仅支持以下两种方式：

# 方式一：WinCode 技能库（推荐）

进入 WinCode Skills，搜索 WinDesign 并下载 Skill。

# 方式二：下载压缩包

下载 Skill 压缩包（win-design-vue-v1.1.1.zip），解压得到 win-design-vue/ 目录。

安装后

将 win-design-vue/ 配置到 AI 编程助手（如 Cursor 技能目录）即可使用。开发 WinDesign 页面时建议 @win-design 引用本 Skill。

# 📁 目录结构

win-design-vue/
├── SKILL.md                     # 主入口：硬约束、工作流、索引
└── references/
    ├── setup.md                 # 安装、全量/按需引入、WiNEX
    ├── global-api.md            # Vue.use 配置、$Message 等全局 API
    ├── forbidden.md             # 禁用清单与 Element 对照表
    ├── usage-guide.md           # 集团研发必读：防跑偏、二次定制
    ├── component-index.md       # 125 组件速查索引
    ├── form-advanced.md         # 高级表单
    ├── table-advanced.md        # 高级表格 / TablePro
    ├── select-advanced.md       # 高级选择器
    ├── i18n.md                  # 国际化
    ├── components/
    │   ├── by-name/             # 每组件独立 API（125 个）
    │   └── *.md                 # 按分类索引
    ├── design-patterns/         # 业务配方（Token、表单、表格、壳）
    └── scenes/                  # 场景配方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 🧀 使用方法

AI 代理按 SPO 工作流 执行（详见 Skill 内 SKILL.md）：

阶段	内容
S — Scope	版本边界、硬约束、复杂场景触发表
P — Process	需求识别 → 组件选型 → 查 by-name API → 对设计规范
O — Output	完整可运行代码 + 回归检查清单

研发同学请先阅读 Skill 内 references/usage-guide.md（防跑偏、Prompt 模板、二次定制）。

# AI 代理工作流

阅读 SKILL.md（SPO 工作流）
识别场景 → references/scenes/{场景}.md
对 Token / 视觉 → design-patterns/tokens.md + 对应 form/table/login/shell
查组件 API → component-index.md → components/by-name/{组件名}.md
校验设计 → design-patterns/tokens.md + 对应业务配方
输出前自检 → forbidden.md + SKILL 回归清单

# 研发同学

在 Cursor / WinCode 等工具中挂载本 Skill
写页面时 @win-design 显式引用，需求中注明场景（如「B 端列表页」）
在已有代码上改需求时，粘贴原代码并说明「基于 WinDesign 二次修改」
生成后对照 forbidden.md 自检，核心页面人工 Review

# 防跑偏要点

原则	说明
组件白名单	仅用 `component-index.md` 中 125 个 `w-*` 组件
API 有据可查	每个 prop/事件须来自 `by-name/{组件}.md`，禁止 AI 臆造
不用其他库经验	w-modal 无 ok 事件，须用 slot="footer"
场景是骨架	`scenes/` 定结构，业务字段可改，组件库不可换
二次定制	优先插槽与文档内 props，见 `usage-guide.md`

# ⛔ 硬约束（违反即错误）

规则	正确	错误
组件库	仅 `win-design`	element-ui、ant-design-vue、naive-ui
标签前缀	`w-button`、`w-table-pro`	`el-button`、`a-button`
弹窗	`w-modal`	`el-dialog`
Loading	`v-win-loading`	`v-loading`
全局消息	`$Message`、`$Confirm`	`$message`、`$confirm`
按钮危险色	`type="error"`	`type="danger"`
默认尺寸	`size="medium"`	随意省略或混用
大数据表格	`w-table-pro`	普通 `w-table` 硬撑万级数据
属性写法	`disabled-right`（kebab-case）	`disabledRight`（仅用于源码 props）

完整对照见 Skill 内 references/forbidden.md。

# 🔍 组件 API 查阅

推荐路径：

component-index.md  →  components/by-name/{组件名}.md

示例：

需求	查阅文件
按钮	`by-name/button.md`
表单项	`by-name/form-item.md`
虚拟表格列	`by-name/table-pro-column.md`
穿梭框	`by-name/transfer.md`

属性命名

文档与模板中统一使用 kebab-case（如 button-texts、disabled-right），不要使用 camelCase 写法。

# 🎨 设计规范

业务 Token 与配方（Skill 内优先读）：
- design-patterns/tokens.md — 色、字、间距、布局
- design-patterns/form.md / table.md / shell.md — 对应页面类型
完整 UED 规范：设计规范（官网）

写页面时：先 tokens.md，再按页面类型读对应配方，并遵循 scenes/ 骨架。

# 常见问题

Q：Skill 能保证 AI 100% 不写错吗？

不能。Skill 是「说明书」不是「执法者」。建议显式 @skill，并对照 forbidden.md 自检，关键页面人工 Review。

Q：属性名应该怎么写？

模板与文档中统一使用 kebab-case，如 disabled-right、button-texts。

Q：与 Element UI 迁移有什么关系？

参见从 WinDesign 1.x 迁移。Skill 的 forbidden.md 提供 Element → WinDesign 对照表。