设计规范 Skill 方案¶
打造一套跨 AI 编辑器通用的设计规范 Skill，统一团队的设计风格、菜单结构和页面展示。
为什么需要这个 Skill？¶
现状问题¶
1. 设计风格不统一 公司多个产品经理各自出原型，每个人的设计风格都不一样。同一个系统里，页面 A 和页面 B 看起来像是两个不同团队做的。
2. 设计规范不一致 有的用 Material Design、有的按自己习惯来、有的干脆没有规范可言。不同人定义的菜单命名、按钮位置、表单布局天差地别。
3. 能力水平参差不齐 产品经理的专业背景和经验不同，设计出来的东西质量和效率差别很大。新手出图慢、老手出图随意，没有一套标准约束。
4. 开发评审成本高 前端开发拿到原型后，每个人都要额外花时间理解设计意图。同一个功能反复沟通对齐，浪费大量时间。
解决方案¶
通过这套 design-skills 设计规范，将设计标准沉淀为 AI 可读的规范文件。团队中任何人——不管用什么 AI 编辑器（Claude Code / Cursor / Trae / Copilot）、不管用什么写法描述需求——
只要在提示词末尾引用 design-skills 规范，AI 生成出来的 UI 就是同一套风格。
目标¶
在任何支持 AI 编码的工具（Claude Code、Codex、Trae、Cursor 等）中都能使用，生成风格统一的 Vue 3 + Element Plus 界面。
核心思路：纯 Markdown + SKILL.md 入口，不绑定任何编辑器生态。
存放位置¶
放在灵思阁项目内，design-skills/ 目录。
目录结构¶
design-skills/
├── SKILL.md ← 入口，AI 工具自动识别
├── 01-设计Token.md ← 8px 网格、色彩、字体、间距、圆角、阴影、交互状态
├── 02-组件规范.md ← 按钮、表单、表格、弹窗、标签等 Element Plus 使用规范
├── 03-菜单体系.md ← 三级菜单命名树 + 路由命名规范
├── 04-页面布局.md ← 标准页面骨架模板 + 布局间距规范
├── 05-命名规则.md ← 功能命名、路由命名、Vue 代码命名、文件命名
├── 06-图标规范.md ← 图标库、尺寸、风格、使用规范
├── 07-状态与反馈.md ← Loading、空状态、错误态、成功/失败反馈
├── 08-可访问性规范.md ← 色彩对比度、键盘操作、语义化、触控目标
├── 09-响应式与布局网格.md ← 屏幕断点、栅格系统、布局适配
├── 10-动效规范.md ← 动效时长、缓动函数、过渡规则
├── 11-提示词规范.md ← 如何写 AI 提示词生成风格统一的界面 + 示例
└── code/
└── variables.css ← 可直接引入的 CSS 设计 Token
配套资源¶
| 资源 | 说明 | 位置 |
|---|---|---|
| Vue 3 空项目模板 | 含 design-skills 的开箱即用项目 | vue-template/ |
| CSS 设计 Token | 可引入项目的 CSS 变量 | design-skills/code/variables.css |
| AI 编辑器配置 | Claude Code / Cursor 自动读取 | .claude.md / .cursorrules |
技术选型¶
| 项目 | 选择 | 说明 |
|---|---|---|
| 技术栈 | Vue 3 + Element Plus + Vite | 主流选择 |
| 设计方法论 | Atomic Design + Material Design 3 Token | 业界公认标准 |
| 规范格式 | 纯 Markdown | 任何工具/编辑器可读 |
| 代码示例 | Vue 模板 + CSS 变量 | 可直接复制使用 |
| 教学方式 | 正反例对比 | ✅ 正确示例 / ❌ 错误示例 |
对照检查报告¶
参考标准¶
- Atomic Design（Brad Frost）— 组件层级方法论
- Material Design 3（Google）— 设计 Token 标准体系
- Lightning Design System（Salesforce）— 企业级后管最佳实践
- Spectrum（Adobe）— 内容层级与状态规范
- WCAG 2.1 AA — 可访问性标准
逐项对照¶
✅ 设计 Token（01-设计Token.md）¶
对标：Material Design 3 Token / Spectrum
| 检查项 | 状态 |
|---|---|
| 8px 网格基准 | ✅ |
| 色彩主色/功能色/中性色 | ✅ |
| 背景色层分级（surface 层级） | ✅ |
| 阴影 5 层 Elevation | ✅ |
| 字体粗细 4 级 | ✅ |
| 交互状态定义（hover/active/focus/disabled） | ✅ |
| 文字无障碍对比度标注 | ✅ |
✅ 组件规范（02-组件规范.md）¶
对标：Atomic Design Molecules + Organisms
| 检查项 | 状态 |
|---|---|
| 按钮类型/大小/场景 | ✅ |
| 表单布局/校验/内联 | ✅ |
| 表格 + 分页完整模板 | ✅ |
| 弹窗宽度/关闭策略/按钮 | ✅ |
| 标签状态映射（5 色） | ✅ |
✅ 菜单体系（03-菜单体系.md）¶
对标：企业级 SaaS 通用导航
| 检查项 | 状态 |
|---|---|
| 三级层级结构 | ✅ |
| 5 个通用菜单模板 | ✅ |
| 路由命名 ↔ 组件路径映射 | ✅ |
✅ 页面布局（04-页面布局.md）¶
对标：Atomic Design Templates + Pages
| 检查项 | 状态 |
|---|---|
| 标准页面骨架 | ✅ |
| 完整 Vue 3 模板代码 | ✅ |
| 布局间距/对齐规范 | ✅ |
✅ 命名规则（05-命名规则.md）¶
对标：Lightning Design System BEM 理念
| 检查项 | 状态 |
|---|---|
| 功能/菜单命名统一 | ✅ |
| 路由 kebab-case | ✅ |
| Vue 3 代码命名 | ✅ |
| 文件目录结构 | ✅ |
✅ 图标规范（06-图标规范.md）¶
对标：Material Design Iconography / Spectrum
| 检查项 | 状态 |
|---|---|
| 图标库选择 | ✅ Element Plus + @element-plus/icons-vue |
| 图标尺寸 12~80px 映射 | ✅ |
| 线性风格 + currentColor | ✅ |
| 同义异构禁止原则 | ✅ |
✅ 状态与反馈（07-状态与反馈.md）¶
对标：Material Design Feedback / Spectrum
| 检查项 | 状态 |
|---|---|
| Loading 4 级（表格/按钮/页面/骨架屏） | ✅ |
| 空状态 4 级文案 | ✅ |
| 错误处理（请求/校验/全局） | ✅ |
| 反馈方式分级（message/notify/confirm） | ✅ |
✅ 可访问性规范（08-可访问性规范.md）¶
对标：WCAG 2.1 AA / Lightning A11y
| 检查项 | 状态 |
|---|---|
| 色彩对比度 3:1 / 4.5:1 / 7:1 | ✅ |
| 键盘焦点 Tab / Enter / Esc | ✅ |
| 语义化 HTML + ARIA | ✅ |
| 触控目标 PC 24px / 触屏 44px | ✅ |
✅ 响应式与布局网格（09-响应式与布局网格.md）¶
对标：Material Design Breakpoints
| 检查项 | 状态 |
|---|---|
| 屏幕断点 xs/sm/md/lg/xl | ✅ |
| 后管系统断点行为 | ✅ |
| 24 栅格场景分配表 | ✅ |
✅ 动效规范（10-动效规范.md）¶
对标：Material Design Motion / Spectrum
| 检查项 | 状态 |
|---|---|
| 持续时间 100ms~300ms 映射 | ✅ |
| 缓动函数推荐 | ✅ |
| Element Plus 保持默认原则 | ✅ |
| 避免过度动效 | ✅ |
✅ 提示词规范（11-提示词规范.md）¶
对标：提示工程 + Design System 结合
| 检查项 | 状态 |
|---|---|
| 万能引用句式 | ✅ |
| 5 个业务场景示例 | ✅ |
| 提示词要素定义 | ✅ |
| 不同人写法不同 → 风格统一 | ✅ |
| AI 编辑器全局配置方案 | ✅ |
评分¶
| 维度 | 得分 |
|---|---|
| 方法依据 | 9/10 |
| 维度覆盖 | 10/10 |
| 可操作性 | 9/10 |
| 代码可复用 | 8/10 |
| 团队上手度 | 9/10 |
综合评分：★★★★☆ (9/10)
后续可迭代¶
- 可访问性自动化检测（axe-core）
- 提炼为可复用组件库
- Figma 设计 Token 同步
- Stylelint / ESLint 自动校验
用户手册¶
一、整体流程¶
① git clone 灵思阁 → ② cd vue-template → ③ npm install → ④ npm run dev → ⑤ 打开 AI 编辑器写提示词
二、获取项目¶
git clone https://gitee.com/zhuo-jiyun/lingsige.git my-project
cd my-project/vue-template
npm install
npm run dev # 默认 http://localhost:8080
三、项目结构¶
vue-template/
├── design-skills/ ← 设计规范（已内置）
│ ├── SKILL.md ← AI 自动读取入口
│ ├── 01-设计Token.md ~ 11-提示词规范.md
│ └── code/variables.css ← CSS 设计 Token
├── src/
│ ├── api/user.js ← API 示例
│ ├── views/
│ │ ├── dashboard/index.vue ← 首页
│ │ └── user/index.vue ← 用户管理空模板
│ ├── router/index.js
│ ├── utils/request.js
│ ├── App.vue
│ └── main.js ← 已引入 CSS 变量
├── .claude.md ← Claude Code 开箱即用
├── .cursorrules ← Cursor 开箱即用
├── index.html
├── vite.config.js
├── package.json
└── README.md
四、AI 编辑器配置¶
项目已自带配置文件，无需手动配置。
| 编辑器 | 配置方式 | 状态 |
|---|---|---|
| Claude Code | 自动读取 .claude.md |
✅ 开箱即用 |
| Cursor | 自动读取 .cursorrules |
✅ 开箱即用 |
| Trae | 提示词末尾加引用句式 | 手动操作 |
| Windsurf / Copilot Chat | 提示词末尾加引用句式 | 手动操作 |
五、写提示词生成页面¶
帮我生成一个用户管理模块，包括列表、搜索、新增、编辑、删除功能。
Vue 3 + Element Plus。
功能要求：
- 用户列表：用户名、手机号、邮箱、角色、状态、创建时间
- 搜索：按姓名和状态筛选
- 新增/编辑：弹窗表单
- 删除：需二次确认
- 状态用 el-tag 展示
---
**设计约束**：严格遵循 design-skills/ 中的设计规范。
AI 生成的代码直接复制到 src/views/ 下即可。
六、CSS 变量¶
src/main.js 已引入，项目中直接使用：
.my-card {
padding: var(--spacing-md);
border-radius: var(--radius-base);
box-shadow: var(--shadow-sm);
font-size: var(--font-size-base);
color: var(--text-primary);
}
七、更新规范¶
cd lingsige
git pull origin master
# design-skills/ 直接更新，其余代码不受影响
八、FAQ¶
不同编辑器生成结果能统一吗？ 能。Claude Code / Cursor / Trae 都引用同一套规范，结果风格一致。
团队成员必须用同一个编辑器吗？ 不用。甲用 Claude Code、乙用 Cursor、丙用 Trae，各自习惯不变，结果一致。
不用 Vue 可以吗？
把 design-skills/ 复制到自己项目中，提示词中改技术栈即可。
九、快速参考¶
| 操作 | 命令 |
|---|---|
| 克隆 | git clone https://gitee.com/zhuo-jiyun/lingsige.git |
| 启动 | cd vue-template && npm install && npm run dev |
| 生成页面 | AI 对话框写提示词，代码放 src/views/ |
| 更新规范 | git pull origin master |
版本：v1.0 | 技术栈：Vue 3 + Element Plus + Vite | 更新日期：2026-04-30