适配 (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 源码

1. 访问 GitHub 仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
2. 点击 Code → Download ZIP 下载源码包
3. 解压后得到文件夹 ui-ux-pro-max-skill-main

---

二、安装步骤（Windsurf 识别配置）

Windsurf 对自定义 Skill 的目录结构有严格要求，按以下步骤操作即可 100% 识别：

1. 创建 Windsurf 配置目录

在你的项目根目录（即 package.json 所在的文件夹），创建以下层级目录：

bash

运行

# Mac/Linux 终端直接执行（自动创建层级）
mkdir -p .windsurf/skills

Windows 用户可手动创建：

1. 新建 .windsurf 文件夹（带前面的点，会自动变成隐藏文件夹）
2. 在 .windsurf 内新建 skills 文件夹

2. 放置并整理 Skill 文件

1. 把解压后的 ui-ux-pro-max-skill-main 文件夹，完整复制到 .windsurf/skills/ 目录下
2. （可选）将文件夹重命名为 ui-ux-pro-max（简化调用命令）
3. 确认目录结构：

   text

   你的项目根目录/
   ├── .windsurf/
   │   └── skills/
   │       └── ui-ux-pro-max/       ← 你的Skill文件夹
   │           ├── skill.json       ← Windsurf识别的核心文件
   │           ├── src/
   │           └── ...（其他文件）
   ├── src/                          ← 你的Vue项目代码
   └── package.json
   

3. 验证安装是否成功

1. 重启 Windsurf（让它重新扫描项目目录）
2. 打开右下角的聊天框，输入命令：

   plaintext

   /skill list
   

3. 成功的标志：聊天框会列出已安装的 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组件的原生写法，不新增无意义的自定义class

3. 场景二：无 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 味：

1. 安装：/skill install anthropics/frontend-design
2. 启用命令：/use ui-ux-pro-max frontend-design
3. 效果：ui-ux-pro-max 负责全局规范，frontend-design 负责审美优化，双重约束效果更佳。