# 使用指南

本 Skill 面向 **Vue 3 + win-design-next** 页面开发。

## 推荐 Prompt

```
使用 win-design-next（w- 组件），Vue 3 script setup。
先读 design-patterns/tokens.md（--w3-* 颜色变量）、scenes/list-page.md；
组件 API 查 components/by-name/，禁止编造属性；自定义样式用 .w3-* class。
```

## 知识边界

1. **仅 win-design-next**，禁止 element-plus / ant-design-vue
2. **API 白名单**：`component-index.md` + `components/by-name/`
3. **Vue 3**：`v-model`、Composition API、按需 import
4. **日期时间一律 Pro**：`w-date-picker-pro` / `w-time-picker-pro`，见 [date-time-advanced.md](date-time-advanced.md)
5. **设计约束**：`design-patterns/` 定视觉；`scenes/` 定代码骨架
6. **命名空间**：默认 `w3`（class/变量），组件标签仍为 `w-*`
7. **勿混用** win-design（Vue 2 旧版）

## 二次定制

- 优先 props / 插槽
- 勿 hack `.w3-*` 内部 DOM
- 间距 8px 网格，色值用 `var(--w3-*)`（见 `tokens.md`）

## 工作流

认场景 → 认组件 → 查 by-name API → 对 tokens/配方 → 输出前对照 `forbidden.md`
