SKILL.md
readonly只读
name
ui-ux-pro-max
description
UI/UX 设计智能。规划、构建、设计、实现、审查、改进 UI/UX 代码。风格：图片优先、编辑设计、极简主义、深色模式、响应式。项目：着陆页、仪表盘、SaaS、移动应用。
UI/UX Pro Max
UI/UX 设计与实现的专业技能。
核心：「全部认真做」是 AI 生成感的本质。「舍弃什么」才是设计。
覆盖领域
- 着陆页设计
- 仪表盘 UI
- SaaS 产品
- 移动应用（响应式）
行动原则（5 条铁律）
1. 动手前先质疑
- 对每个元素问「真的需要吗？」
- 答案模糊时，先在没有它的情况下构建
2. 确定一个主角
- 每个部分只确定一个「最想展示的东西」
- 确定之前不要写代码
3. 不要并列 70 分
- 所有元素存在感相同 = 失败
- 让一个达到 120 分，其余 60 分
4. 说「我们放弃吧」而不是「可以」
- 建议删除而非添加
- 犹豫时就删掉
5. 先批评再构建
- 列出当前问题的 3 个以上要点，再提出改进方案
- 禁止说「感觉不错」
避免 AI 生成感
禁止事项
- 所有元素存在感相同（均匀的留白、安全的颜色）
- 缺乏决断（A 和 B 都可以，随你喜欢）
- 过度装饰（无意义的渐变、动画）
禁止说「感觉不错」
- 完成后也要附上「如果还有改进空间的话〜」
- 被要求决断时就要决断（附上依据推荐一个）
高级设计公式
Premium = (图片质量 × 尺寸) + (留白) - (装饰)
三大支柱：
- 大图片 - 图片占据卡片面积的 70-85%
- 大胆的留白 - 区块间距 112px 以上
- 克制 - 所有效果必须有理由
参考品牌： Spitfire Audio, Native Instruments, iZotope
图片指南
| 上下文 | 图片尺寸 | 宽高比 |
|---|---|---|
| 产品卡片 | 卡片面积的 70-85% | 16:9 或 4:3 |
| 英雄区 | 全视口宽度 | 可变 |
| 画廊网格 | 高度统一，宽度可变 | 混合 |
图片处理：
- 图片是内容的主角
- 文字最少（名称 + 一行说明）
- 不要在图片上叠加功能列表
- 使用高质量截图/渲染
留白令牌
| 令牌 | 值 | 用途 |
|---|---|---|
--space-section |
112px | 区块之间 |
--space-group |
64px | 相关内容之间 |
--space-element |
24px | 元素之间 |
区块内边距：
/* 高级区块 */
padding-top: 112px; /* py-28 */
padding-bottom: 112px;
/* 紧凑区块 */
padding-top: 64px; /* py-16 */
padding-bottom: 64px;
Tailwind 对应：
// 高级区块
<section className="py-28">...</section>
// 紧凑区块
<section className="py-16">...</section>
网格系统
| 列数 | 用途 | 间距 |
|---|---|---|
| 4 列 | 产品展示 | 24px (gap-6) |
| 3 列 | 功能卡片、定价 | 32px (gap-8) |
| 2 列 | 英雄区、对比 | 48px (gap-12) |
视觉层次检查清单
开始前
- [ ] 是否已明确「这个区块的主角是什么」
- [ ] 是否考虑过「有没有可以删除的元素」
- [ ] 能否解释「为什么用这个颜色」
进行中
- [ ] 所有元素是否存在感相同
- [ ] 视线流动是否符合预期
- [ ] 背景是否干扰了内容
完成前
- [ ] 在手机上 3 秒内能否知道「该做什么」
- [ ] 是否存在「AI 生成感」的原因
- [ ] 是否有「这里其实可以删掉」的元素
关键：无障碍优先
本节是最高优先级。无障碍优先于设计美观。
WCAG 2.1 对比度要求
| 文字大小 | 最小对比度 |
|---|---|
| 普通文字 (< 18px) | 4.5:1 |
| 大文字 (≥ 18px bold / ≥ 24px) | 3:1 |
| UI 组件和图标 | 3:1 |
必须：使用项目的 globals.css
不要直接使用 Tailwind 默认颜色。 优先使用项目 globals.css 中定义的令牌。
// 错误：直接使用 Tailwind 默认值
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>
// 正确：使用项目令牌
<p className="text-muted">...</p>
<p className="text-subtle">...</p>
实现前务必检查 app/globals.css，了解已定义的令牌。
徽章/标签的对比度
同色系组合危险：
// 错误：同色系对比度不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">开发中</span>
// 正确：确保足够对比度
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">开发中</span>
禁用状态的文字
// 错误：太淡导致对比度不足
<button className="text-white/50" disabled>...</button>
// 正确：禁用时仍可读
<button className="text-white/70" disabled>...</button>
多语言排版
为什么需要： 日文在相同字号下比英文视觉上更重（笔画多）。相同字号下日文显得拥挤沉重，因此缩小一级以平衡视觉效果。
排版令牌（已在 globals.css 中定义）
| 令牌 | 用途 | 英文 (桌面) | 日文 (桌面) |
|---|---|---|---|
.text-hero |
着陆页主标题 | 96px | 80px |
.text-section |
区块标题（h2） | 48px | 40px |
.text-headline |
功能标题、产品标题 | 30px | 24px |
.text-subhead |
标语、导语 | 24px | 20px |
使用方法
// 错误：直接指定 Tailwind（无语言调整）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>
// 正确：使用令牌（自动适配语言）
<h1 className="text-hero text-white">...</h1>
响应式适配
令牌已包含移动端、平板、桌面的响应式尺寸。无需额外指定断点。
// 错误：冗余的断点指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>
// 正确：仅使用令牌
<h1 className="text-hero">...</h1>
适用范围
- 着陆页标题（h1, h2）
- 区块标题
- 产品名、功能名
- 标语、导语
注意： 不适用于正文（p 元素的长文）。正文使用 text-white/80 等常规样式。
设计令牌遵守规则
原则： 不直接使用 Tailwind 默认值，使用 globals.css 中定义的设计令牌。
圆角（Border Radius）
| 令牌 | 值 | 用途 |
|---|---|---|
--radius-sm |
8px | 小徽章、标签 |
--radius-md |
12px | 按钮、输入框 |
--radius-lg |
16px | 卡片、模态框 |
--radius-full |
999px | 药丸按钮、头像 |
// 错误：直接指定 Tailwind
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>
// 正确：使用令牌
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>
颜色
// 错误：直接使用 Tailwind 颜色
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>
// 正确：使用项目令牌
<p className="text-muted">...</p>
<div className="bg-muted-bg">...</div>
令牌违规检查
实现后通过以下命令检查违规：
# 搜索直接指定圆角的 Tailwind
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/
# 搜索直接指定颜色的 Tailwind
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/
检测到的内容依次替换为令牌。
按钮样式
主要 CTA（默认：白色背景）
<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
Download Now
</button>
次要（仅边框）
<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
Learn More
</button>
品牌专属（有限使用）
彩色按钮使用条件：
- 仅限品牌专属区块（如 MUEDear amber）
- 每页最多 1-2 处
- 不作为默认样式
// MUEDear 用：amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
Download App
</button>
禁用状态
<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
Disabled
</button>
背景样式
使用的背景
// 高级：仅纯色
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>
避免的装饰
| 模式 | 问题 | 替代方案 |
|---|---|---|
| 浮动发光球 | 分散注意力 | 删除 |
bg-gradient-to-b from-violet-900/20 |
装饰性噪音 | 纯色 |
| 颗粒纹理 | 不必要的复杂 | 删除 |
| 动画背景 | 性能下降 | 静态 |
卡片样式
图片中心卡片（默认）
<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
{/* 图片：卡片面积的 70-85% */}
<div className="aspect-video">
<Image src="..." alt="..." fill className="object-cover" />
</div>
{/* 文字：最少 */}
<div className="p-6">
<h3 className="text-white text-lg font-medium">产品名</h3>
<p className="text-white/60 text-sm">一行说明</p>
</div>
</div>
玻璃卡片（有限使用）
注意： 玻璃拟态仅用于特定上下文（定价表、功能对比等）。不作为默认样式。
<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
<h3 className="text-white font-semibold">Title</h3>
<p className="text-white/80">Description</p>
</div>
使用玻璃卡片时的注意：
- 文字使用
text-white或text-white/80以上 - 不要使用
text-slate-*或text-gray-* - 背景半透明，对比度计算复杂
指令升级协议
根据用户表达调整响应级别：
| 用户表达 | 解释 | 所需响应 |
|---|---|---|
| 「Spitfire 级别」「Native Instruments 级别」 | 全面视觉改造 | 不是微调而是完全重新设计 |
| 「更高级」 | 实质性变更 | 删除效果，增加留白 |
| 「干净点」 | 中等程度清理 | 删除 30% 装饰元素 |
| 「调整」「微调」 | 小修改 | 仅 CSS 变更 |
重要规则： 如果提到了参考品牌，在提出建议前将当前实现与该品牌进行比较。
实现检查清单
实现前检查
- [ ] 是否有高质量的产品截图？
- [ ] 文字能否减少 50%？
- [ ] 是否确认了想要参考的美学标准？
- [ ] 是否匹配了相应的克制程度？
实现中检查
| 问题 | 如果「否」则采取行动 |
|---|---|
| 区块内边距 >= 100px？ | 增加到 py-28 以上 |
| 图片占卡片面积 60% 以上？ | 放大图片 |
| 按钮是白色或仅边框？ | 从彩色改为白色/边框 |
| 背景是纯色（无渐变）？ | 删除装饰元素 |
实现后检查
- 眯眼测试： 眯眼看。能否识别产品？如果效果占主导则减少。
- 「删除一个」测试： 从每个区块删除一个元素。是否仍能工作？如果能，说明它是不必要的。
- Spitfire 对比： 将截图与 Spitfire.com 并排比较。视觉「重量」是否相似？
应避免的模式（明确禁止列表）
"Claude defaults to safe choices" - 如果不明确禁止，就会收敛到通用选择
背景和装饰
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
大量使用 bg-white/5 backdrop-blur-xl |
「2023 模板」感 | bg-black 或 bg-[#0f0f0f] |
bg-gradient-to-b from-violet-900/20 |
装饰性噪音 | 删除 |
bg-gradient-to-br from-indigo-500/10 |
同上 | 删除 |
| 动画 blob 背景 | 分散注意力、性能下降 | 静态、纯色 |
颗粒纹理 (noise.svg) |
不必要的复杂 | 删除 |
| 浮动发光球 | 2020 年代早期趋势 | 删除 |
阴影和发光
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
shadow-lg shadow-indigo-500/20 |
人为的「弹出」 | 无阴影或 shadow-sm shadow-black/20 |
shadow-xl shadow-violet-500/30 |
同上 | 同上 |
shadow-2xl shadow-amber-500/25 |
同上 | 同上 |
hover:shadow-*-500/40 |
悬停时发光强调 | 使用 hover:bg-white/10 等克制效果 |
drop-shadow-[0_0_*px_rgba()] |
自定义发光 | 删除 |
布局
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
| 带图标的 3 列功能网格 | 通用 SaaS 设计 | 大图片 + 最少文字 |
| 均匀的 3 列卡片（同尺寸） | 「所有元素存在感相同」 | 一个放大，其余缩小 |
py-12 以下的区块间距 |
拥挤 | py-28 (112px) 以上 |
| 全部居中 | 过于安全 | 考虑左对齐或不对称 |
组件
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
hover:scale-105 + hover:shadow-* |
过度的悬停效果 | 仅 hover:bg-white/10 |
transition-all duration-300 |
沉重、不可预测 | transition-colors duration-200 |
group-hover:translate-x-2 箭头 |
常见模式 | 删除或 translate-x-1 |
| 彩色 CTA 按钮（默认使用） | AI 安全选择 | 白色背景或白色边框 |
动画
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
| 分散的微交互 | 缺乏统一感 | 集中在一个页面加载效果 |
大量使用 animate-pulse |
分散注意力 | 删除或仅一处 |
持续 animate-bounce |
同上 | 仅在用户操作时 |
| 多个元素同时动画 | 混乱 | 使用 staggered delays 依次进行 |
颜色（AI 安全选择）
| 禁止模式 | 问题 | 替代方案 |
|---|---|---|
| 紫色渐变 on 白色背景 | 最通用的 AI 选择 | 纯色深色 |
from-violet-600 to-indigo-600 |
同上 | 删除 |
默认使用 text-indigo-400 |
滥用品牌色 | text-white 或 text-white/80 |
| 同色系徽章（indigo on indigo） | 对比度不足 | 白色背景 + 黑色文字 |
图标
- 使用的库： Lucide Icons
- 禁止： 不要使用 emoji 作为图标
import { Music, Brain, Sparkles, Check, X } from 'lucide-react';
响应式断点
/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */
应验证的屏幕宽度：
- 320px (最小移动端)
- 768px (平板)
- 1024px (桌面)
- 1440px (大屏)
交付前检查清单
- [ ] Lighthouse 无障碍 100%（最重要）
- [ ] 使用项目的 globals.css 令牌
- [ ] 图片是否成为主角
- [ ] 区块间距 >= 112px (py-28)
- [ ] 按钮是否基于白色/边框
- [ ] 背景是否纯色
- [ ] 不使用 emoji 图标（使用 Lucide）
- [ ] 深色模式支持
- [ ] 可点击元素添加 cursor-pointer
- [ ] 响应式适配
- [ ] 性能优化（图片、动画）
对比度确认方法
实现后务必使用 Lighthouse 检查无障碍：
# 本地检查
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view
# 查看详细失败项
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'
目标：Lighthouse Accessibility Score 100%
