ui-ux-pro-max

UI/UX Pro Max

UI/UX 设计与实现的专业技能。

核心：所谓的「AI 生成感」，源自「什么都做得面面俱到」；设计的关键在于「舍弃什么」。

适用领域

• 落地页设计
• 仪表板 UI
• SaaS 产品
• 移动应用（响应式）

---

行为准则（5 条铁律）

1. 动手前先质疑

• 对每个元素都问一句「真的需要吗？」
• 如果答案含糊不清，就先不加

2. 确定一个主角

• 每个区块只确定一个「最想展示的内容」
• 确定之前，不要写代码

3. 别让所有元素都只有 70 分

• 所有元素存在感相同 = 失败
• 让一个元素达到 120 分，其余达到 60 分

4. 与其说「可以」，不如说「别这么做」

• 与其提议增加，不如提议删减
• 犹豫时就删掉

5. 先批判，再动手

• 先列出 3 个以上现有问题，再提出改进方案
• 禁止说「感觉不错」

---

避免 AI 生成感

不该做的事

• 所有元素存在感相同（间距均匀、配色保守）
• 缺乏决断（A 和 B 都可以，随你喜欢）
• 过度装饰（毫无意义的渐变、动画）

禁止说「感觉不错」

• 完成后也要补充「如果说还有改进空间的话……」
• 如果对方要求你做决定，就果断决定（附上依据，并推荐一个选项）

---

高级设计公式

Premium = (画像の質 × サイズ) + (余白) - (装飾)

三大支柱：

1. 大图 - 图片占卡片面积的 70-85%
2. 大胆留白 - 区块之间至少间隔 112px
3. 克制 - 每种效果都必须有其理由

参考品牌： 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 中定义的令牌。

// NG: Tailwind デフォルトをそのまま使用
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK: プロジェクトトークンを使用
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

实现前务必检查 app/globals.css，了解已定义的令牌。

徽章、标签的对比度

相近色组合很危险：

// NG: 同系色でコントラスト不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>

// OK: 十分なコントラストを確保
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>

禁用状态文本

// NG: 薄すぎてコントラスト不足
<button className="text-white/50" disabled>...</button>

// OK: 無効でも読める濃さ
<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

使用方法

// NG: Tailwind直接指定（言語による調整なし）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>

// OK: トークン使用（自動で言語対応）
<h1 className="text-hero text-white">...</h1>

响应式适配

令牌包含移动端、平板端和桌面端的响应式尺寸。无需额外指定断点。

// NG: 冗長なブレークポイント指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>

// OK: トークンのみ
<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	药丸形按钮、头像

// NG: Tailwind直接指定
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>

// OK: トークン使用
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

颜色

// NG: Tailwind色を直接使用
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>

// OK: プロジェクトトークン使用
<p className="text-muted">...</p>
<div className="bg-mued-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>

Glass Card（限定使用）

**注意：**Glassmorphism 仅用于特定场景（如价格表、功能对比），不要将其设为默认样式。

<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>

使用 Glass Card 时的注意事项：

• 文本颜色至少为 text-white 或 text-white/80
• 不要使用 text-slate-* 或 text-gray-*
• 背景为半透明，因此对比度计算较复杂

---

指示升级协议

根据用户的措辞调整响应级别：

用户的措辞	解读	所需响应
“Spitfire 级别”“Native Instruments 级别”	全面视觉改造	完全重新设计，而不是微调
“更有高级感”	实质性修改	移除特效，增加留白
“更简洁”	中度清理	移除 30% 的装饰元素
“调整”“微调”	小幅修改	仅修改 CSS

**重要规则：**如果用户点名了参考品牌，提出建议前必须将当前实现与该品牌进行比较。

---

实现检查清单

实现前检查

• 是否有高质量的产品截图？
• 能否将文本减少 50%？
• 是否确认了要参考的美学水准？
• 是否符合该克制程度？

实现中检查

问题	如果回答“No”则采取的操作
区块内边距 >= 100px？	增加到 py-28 或更大
图片是否占卡片面积的 60% 以上？	放大图片
按钮是否为白色或仅有边框？	将彩色按钮改为白色或仅有边框
背景是否为纯色（无渐变）？	移除装饰元素

实现后检查

1. **眯眼测试：**眯起眼睛观察，能否识别产品？如果特效过于突出，就减少特效。
2. **“移除一项”测试：**从每个区块移除一个元素。页面仍然有效吗？如果有效，该元素就不需要。
3. **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()]	自定义光晕	移除

布局

禁止模式	问题	替代方案
带图标的三列功能网格	通用 SaaS 设计	使用大图 + 最少文本
大小相同的均匀三列卡片	“所有内容都同等显眼”	突出其中一项，其余缩小
区块间距不超过 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 的安全选项）

禁止模式	问题	替代方案
白色背景上的紫色渐变	最常见的 AI 选择	使用纯色深色背景
from-violet-600 to-indigo-600	同上	移除
默认使用 text-indigo-400	滥用品牌色	使用 text-white 或 text-white/80
同色系徽章（indigo 背景配 indigo 前景）	对比度不足	使用白色背景 + 黑色文本

---

图标

• **使用的库：**Lucide Icons
• **禁止：**不要使用表情符号作为图标

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）
• 按钮是否以白色或边框为主
• 背景是否为纯色
• 不使用表情符号作为图标（使用 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%