适配 (Vue3 + Ant Design Vue 项目）
前言
很多前端开发者用 Windsurf + Claude 开发时，都会遇到一个痛点：AI 生成的页面要么风格飘移、配色混乱，要么就是千篇一律的 "AI 味" 设计（过度对称、夸张渐变、留白失控），哪怕只有原型图也没有统一的设计规范。
本文将带你从零开始，配置 ui-ux-pro-max 设计规范 Skill，让 AI 生成的页面实现全站 UI 统一，同时彻底去除 "廉价 AI 感"，适配你的 Vue3 + Ant Design Vue 项目。
一、环境与准备
1. 工具与项目环境
- IDE：Windsurf（已配置 Claude 4.7 模型）
- 项目技术栈：Vue3 + TypeScript + Ant Design Vue
- 目标效果：无 UI 稿时自动生成统一设计系统、统一样式、去除 AI 味
2. 下载 ui-ux-pro-max 源码
- 访问 GitHub 仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- 点击
Code → Download ZIP下载源码包 - 解压后得到文件夹
ui-ux-pro-max-skill-main
二、安装步骤（Windsurf 识别配置）
Windsurf 对自定义 Skill 的目录结构有严格要求，按以下步骤操作即可 100% 识别：
1. 创建 Windsurf 配置目录
在你的项目根目录 （即 package.json 所在的文件夹），创建以下层级目录：
bash
运行
# Mac/Linux 终端直接执行（自动创建层级）
mkdir -p .windsurf/skillsWindows 用户可手动创建：
- 新建
.windsurf文件夹（带前面的点，会自动变成隐藏文件夹） - 在
.windsurf内新建skills文件夹
2. 放置并整理 Skill 文件
-
把解压后的
ui-ux-pro-max-skill-main文件夹，完整复制 到.windsurf/skills/目录下 -
（可选）将文件夹重命名为
ui-ux-pro-max（简化调用命令） -
确认目录结构： text
你的项目根目录/ ├── .windsurf/ │ └── skills/ │ └── ui-ux-pro-max/ ← 你的Skill文件夹 │ ├── skill.json ← Windsurf识别的核心文件 │ ├── src/ │ └── ...（其他文件） ├── src/ ← 你的Vue项目代码 └── package.json
3. 验证安装是否成功
-
重启 Windsurf（让它重新扫描项目目录）
-
打开右下角的聊天框，输入命令： plaintext
/skill list -
成功的标志：聊天框会列出已安装的 Skill，包含
ui-ux-pro-max，并显示版本号、功能介绍（如 67 种 UI 风格、161 套配色等）。
三、核心使用方法（适配 Vue3 + Ant Design Vue）
1. 会话开头一键启用模板
每次新开 Windsurf 会话，先复制这段指令，让 Claude 加载规范并扫描项目：
plaintext
/use ui-ux-pro-max
/audit
当前项目为 Vue3 + TypeScript + Ant Design Vue 技术栈，请严格遵循 ui-ux-pro-max 设计规范开发，约束如下：
1. 间距系统：所有内边距/外边距统一使用 4/8/16/24/32 的8px栅格倍数，禁止自定义随机间距
2. 色彩系统：基于Ant Design Vue默认主题色，生成统一的主色/辅助色/中性色，禁止使用夸张渐变、高饱和紫色等AI常见配色
3. 组件规范：保持Ant Design Vue原生组件质感，统一按钮、卡片、表格的圆角、阴影层级与hover状态，不写冗余自定义CSS
4. 布局与留白：克制留白，优先采用符合B端后台的专业布局，避免AI味重的完全对称网格设计
5. 一致性要求：所有页面的字体层级、行高、边框样式、交互反馈必须和项目现有页面保持统一2. 场景一：优化现有页面（以预警审批页为例）
针对已开发的页面，让 Claude 按规范优化样式，直接复制指令：
plaintext
请使用 ui-ux-pro-max 规范，优化当前 `warningApproval/index.vue` 页面，要求如下：
1. 统一所有间距、圆角、阴影，符合8px栅格系统
2. 优化表格样式：行高、hover高亮、边框、分页组件样式与项目其他页面保持一致
3. 调整筛选栏、按钮组的布局，减少AI味的冗余留白
4. 不修改TypeScript类型定义和业务逻辑，仅优化样式与布局
5. 保持Ant Design Vue组件的原生写法，不新增无意义的自定义class3. 场景二：无 UI 稿时生成新页面
只有原型描述，让 Claude 按规范生成高保真页面：
plaintext
请基于ui-ux-pro-max规范，为我开发一个「设备管理列表页」，适配Vue3 + Ant Design Vue：
1. 页面包含：顶部筛选栏（设备编号、状态、所属部门）、数据表格（含操作列）、批量操作按钮
2. 严格遵循当前项目已有的色彩、间距、组件规范，和预警审批页保持风格统一
3. 表格状态：包含正常/故障/维修三种状态标签，样式与项目现有标签保持一致
4. 响应式适配：兼容1920px和1366px两种屏幕尺寸，避免AI常见的溢出问题
5. 去除AI味设计：不使用过度对称布局、不添加无关动效、保持B端后台的克制专业质感四、常见问题与避坑指南
1. /skill list 识别不到 Skill
- 排查点 1：目录层级错误，确认
skill.json直接位于.windsurf/skills/你的Skill文件夹/下，没有嵌套额外层级 - 排查点 2：文件夹名称不要有中文、空格，简化为
ui-ux-pro-max即可 - 排查点 3：修改目录后必须重启 Windsurf，让 IDE 重新扫描项目
2. Claude 不遵循规范，依然有 AI 味
-
解决方法 1：在会话开头必须执行
/audit，让 Claude 先扫描项目现有样式，建立全局规范 -
解决方法 2：在指令中明确 "禁止行为"，比如 "禁止使用紫色渐变、禁止过度对称、禁止自定义随机间距"
-
解决方法 3：如果命令加载失效，可手动粘贴
skill.json内容，让 Claude 直接读取配置：plaintext
我已安装ui-ux-pro-max设计规范，以下是配置文件内容，请从现在开始严格遵循： [粘贴skill.json的完整内容]
3. 样式和 Ant Design Vue 冲突
- 解决方法：指令中明确 "优先使用 Ant Design Vue 原生组件的 API 配置样式，如
size、shape、class-name，不写全局覆盖样式"，避免破坏框架原生主题。
五、效果对比与总结
表格
| 未使用规范 | 使用 ui-ux-pro-max 规范 |
|---|---|
| 配色混乱，随机使用高饱和颜色 | 基于项目主题色生成统一色板，全站一致 |
| 间距、圆角、阴影无规律 | 严格遵循 8px 栅格系统，组件样式统一 |
| 过度对称、夸张动效，AI 味重 | 克制留白、专业布局，符合 B 端产品质感 |
| 多页面风格飘移 | 基于全局设计系统，所有页面风格统一 |
ui-ux-pro-max 不是简单的 "美化滤镜"，而是给 Claude 提供了一套完整的 B 端设计系统约束，让 AI 在无 UI 稿的情况下，也能输出专业、统一、无 AI 味的页面，非常适合用 Windsurf 开发中后台项目的开发者。
补充：进阶用法（可选）
搭配 anthropics/frontend-design 官方 Skill 一起使用，进一步去除 AI 味：
- 安装：
/skill install anthropics/frontend-design - 启用命令：
/use ui-ux-pro-max frontend-design - 效果：
ui-ux-pro-max负责全局规范，frontend-design负责审美优化，双重约束效果更佳。