UI/UX Pro Max 设计指南：避免AI生成感，打造高级SaaS/着陆页设计原则与实现

ui-ux-pro-max by kimny1143/claude-code-template

3,100 周安装量

GitHub

安装命令

npx skills add https://github.com/kimny1143/claude-code-template --skill 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 哪个都行，看您喜好）
过度装饰 （无意义的渐变、动画）

禁止「感觉不错呢」

完成后也要附上「如果还有改进余地的话～」
被要求做决定时就要做决定（附上理由推荐其中一个）

🇺🇸English

UI/UX Pro Max

UI/UXデザインおよび実装の専門スキル。

核心: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。

対応領域

ランディングページ設計
ダッシュボードUI
SaaSプロダクト
モバイルアプリ（レスポンシブ）

行動原則（5つの鉄則）

1. 作る前に疑え

全要素に「本当に要る？」を問え
答えが曖昧なら、まず無しで作れ

2. 主役を1つ決めろ

各セクションで「一番見せたいもの」を1つだけ決めろ
決まるまでコードを書くな

3. 70点を並べるな

全要素が同じ存在感 = 失敗
1つを120点、残りを60点にしろ

4. 「できます」より「やめましょう」

追加より削除を提案しろ
迷ったら削れ

5. 批判してから作れ

現状の問題点を3つ以上挙げてから改善案を出せ
「いい感じですね」は禁止

AI生成感を避ける

やってはいけないこと

全要素が同じ存在感 （均一な余白、安全な色）
決断の不在 （AとBどちらでも、お好みで）
過剰な装飾 （意味のないグラデーション、アニメーション）

「いい感じですね」禁止

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

高级设计的公式

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 粗体 / ≥ 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-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/

检测到的内容应逐步替换为令牌。

主要行动号召按钮（默认：白底）

<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 的琥珀色等）
每页最多 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%？
是否确认了想要参考的美学水准？
是否匹配了那种克制程度？

问题	回答「No」时的行动
区块内边距 >= 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`	同上	删除
动画斑点背景	分散注意力、性能下降	静态、纯色
颗粒纹理 (`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 安全选择）

禁止模式	问题	替代方案
白底上的紫色渐变	最通用的 AI 选择	纯色深色
`from-violet-600 to-indigo-600`	同上	删除
默认使用 `text-indigo-400`	滥用品牌色	`text-white` 或 `text-white/80`
同色系徽章（indigo on 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%

完成後も「改善の余地があるとすれば〜」を添えよ

決断を求められたら決断せよ（根拠を添えて一つを推奨）

プレミアムデザインの公式

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

大きな画像 - カードの70-85%を画像が占める
大胆な余白 - セクション間112px以上
抑制 - すべての効果に理由が必要

参照ブランド: Spitfire Audio, Native Instruments, iZotope

画像ガイドライン

コンテキスト	画像サイズ	アスペクト比
製品カード	カード面積の70-85%	16:9 or 4:3
ヒーローセクション	フルビューポート幅	可変
ギャラリーグリッド	高さ統一、幅可変	混合

画像の扱い:

画像がコンテンツの主役
テキストは最小限（名前 + 1行説明）
画像上に機能リストを重ねない
高品質なスクリーンショット/レンダリングを使用

トークン	値	用途
`--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;

// プレミアムセクション
<section className="py-28">...</section>

// コンパクトセクション
<section className="py-16">...</section>

グリッドシステム

列数	用途	ギャップ
4列	製品ショーケース	24px (gap-6)
3列	機能カード、価格	32px (gap-8)
2列	ヒーロー、比較	48px (gap-12)

視覚階層チェックリスト

「このセクションの主役は何か」を言語化したか
「削除できる要素はないか」を検討したか
「なぜこの色か」を説明できるか

全要素が同じ存在感になっていないか
視線の流れは意図通りか
背景がコンテンツの邪魔をしていないか

スマホで見て3秒以内に「何をすればいいか」分かるか
「AI生成感」の原因がないか
「ここは削れたのでは」と思う要素がないか

CRITICAL: アクセシビリティ優先

このセクションは最優先事項。デザインの美しさよりもアクセシビリティを優先する。

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>

多言語タイポグラフィ

なぜ必要か: 日本語は同じフォントサイズでも英語より視覚的に重く見える（画数が多いため）。同じサイズだと日本語が窮屈・重く見えるため、1段階小さくして視覚的バランスを取る。

タイポグラフィトークン（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/

検出されたものは順次トークンに置換する。

ボタンスタイル

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

Secondary（枠線のみ）

<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ページに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つ削除」テスト: 各セクションから1要素削除。まだ機能するか？機能するなら不要だった。
Spitfire比較: スクリーンショットをSpitfire.comと並べる。視覚的「重さ」は似ているか？

避けるべきパターン（明示的禁止リスト）

"Claude defaults to safe choices" - 明示的に禁止しないと汎用的な選択に収束する

禁止パターン	問題	代替案
`bg-white/5 backdrop-blur-xl` 多用	「2023テンプレート」感	`bg-black` or `bg-[#0f0f0f]`
`bg-gradient-to-b from-violet-900/20`	装飾的ノイズ	削除
`bg-gradient-to-br from-indigo-500/10`	同上	削除
アニメーションブロブ背景	気が散る、パフォーマンス悪化	静的、単色
グレインテクスチャ (`noise.svg`)	不要な複雑さ	削除
フローティンググローオーブ	2020年代前半のトレンド	削除

禁止パターン	問題	代替案
`shadow-lg shadow-indigo-500/20`	人工的な「ポップ」	影なし or `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列カード（同サイズ）	「全部同じ存在感」	1つを大きく、残りを小さく
`py-12` 以下のセクション間隔	窮屈	`py-28` (112px) 以上
中央寄せのすべて	安全すぎる	左寄せ or 非対称を検討

コンポーネント

禁止パターン	問題	代替案
`hover:scale-105` + `hover:shadow-*`	過剰なホバーエフェクト	`hover:bg-white/10` のみ
`transition-all duration-300`	重い、予測不能	`transition-colors duration-200`
`group-hover:translate-x-2` 矢印	よく見るパターン	削除 or `translate-x-1`
色付きCTAボタン（デフォルト使用）	AI safe choice	白背景 or 白枠線

アニメーション

禁止パターン	問題	代替案
散らばったマイクロインタラクション	統一感なし	1つのページロード演出に集中
`animate-pulse` 多用	気が散る	削除 or 1箇所のみ
`animate-bounce` 常時	同上	ユーザーアクション時のみ
複数要素の同時アニメーション	カオス	staggered delays で順次

色（AI Safe Choices）

禁止パターン	問題	代替案
紫グラデーション on 白背景	最も汎用的なAI選択	単色ダーク
`from-violet-600 to-indigo-600`	同上	削除
`text-indigo-400` をデフォルトに	ブランド色の乱用	`text-white` or `text-white/80`
同系色バッジ（indigo on 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 (大画面)

Pre-Delivery Checklist

Lighthouse アクセシビリティ 100% （最重要）
プロジェクトの globals.css トークンを使用
画像が主役になっているか
セクション間余白 >= 112px (py-28)
ボタンは白/枠線ベースか
背景は単色か
絵文字アイコン不使用（Lucide使用）
ダークモード対応
cursor-pointer on clickables
レスポンシブ対応
パフォーマンス最適化（画像、アニメーション）

コントラスト確認方法

実装後は必ず 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%

UI/UX Pro Max 设计指南：避免AI生成感，打造高级SaaS/着陆页设计原则与实现

🇨🇳中文介绍

UI/UX Pro Max

对应领域

行动原则（5条铁则）

1. 动手前先质疑

2. 确定一个主角

3. 不要排列 70 分

4. 比起「可以做到」，更要「建议停止」

5. 批判之后再制作

避免 AI 生成感

不可做的事情

禁止「感觉不错呢」

🇺🇸English

UI/UX Pro Max

対応領域

行動原則（5つの鉄則）

1. 作る前に疑え

2. 主役を1つ決めろ

3. 70点を並べるな

4. 「できます」より「やめましょう」

5. 批判してから作れ

AI生成感を避ける

やってはいけないこと

「いい感じですね」禁止

相关 Skills

高级设计的公式

图片指南

间距令牌

网格系统

视觉层次检查清单

开始工作前

工作中

工作完成前

关键：优先考虑可访问性

WCAG 2.1 对比度要求

必须：使用项目的 globals.css

徽章・标签的对比度

禁用状态的文本

多语言排版

排版令牌（在 globals.css 中定义）

使用方法

响应式对应

适用对象

设计令牌遵守规则

圆角（Border Radius）

颜色

令牌违规检查

按钮样式

主要行动号召按钮（默认：白底）

次要按钮（仅边框）

品牌特定按钮（有限使用）

禁用状态

背景样式

使用的背景

避免的装饰

卡片样式

图片中心卡片（默认）

毛玻璃卡片（有限使用）

指令升级协议

实现检查清单

实现前检查

实现中检查

实现后检查

应避免的模式（明确禁止列表）

背景・装饰

阴影・辉光

布局

组件

动画

颜色（AI 安全选择）

图标

响应式断点

交付前检查清单

对比度确认方法

プレミアムデザインの公式

画像ガイドライン

余白トークン

グリッドシステム

視覚階層チェックリスト