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どちらでも、お好みで）
• 過剰な装飾（意味のないグラデーション、アニメーション）

「いい感じですね」禁止

• 完成後も「改善の余地があるとすれば〜」を添えよ
• 決断を求められたら決断せよ（根拠を添えて一つを推奨）

---

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

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

3つの柱:

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

参照ブランド: 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;

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生成感」の原因がないか
• 「ここは削れたのでは」と思う要素がないか

---

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">
how to use ui-ux-pro-max
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use ui-ux-pro-max on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add ui-ux-pro-max
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/kimny1143/claude-code-template --skill ui-ux-pro-maxcopy
The skills CLI fetches ui-ux-pro-max from GitHub repository kimny1143/claude-code-template and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/ui-ux-pro-max
Reload or restart Cursor to activate ui-ux-pro-max. Access the skill through slash commands (e.g., /ui-ux-pro-max) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?