메뉴
UI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: image-first, editorial design, minimalism, dark mode, responsive. Projects: landing page, dashboard, SaaS, mobile app.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
kimny × Claude（AI）のインタビュー形式でnote記事を作成するスキル。 品質ゲート（発見・外部アンカー・1文テスト）による公開判断、AIO最適化、対話フォーマットルールを定義。 使用タイミング: (1) note記事の作成・リライト (2) インタビュー形式の記事構成 (3) 過去会話からの記事化 (4) 記事の品質チェック。 トリガー例: 「記事にしたい」「noteに書きたい」「インタビュー形式で」 「これ記事にならない？」「記事のリライト」「品質ゲート通して」 「AIO最適化」「note記事」
note連載記事の有料/無料切り分け戦略を設計するスキル。 連載全体の無料回・有料回の配置、1記事内の有料ライン設計、価格設定、マガジン構成を扱う。 使用タイミング: (1) noteで有料記事を書きたい時 (2) 連載の課金設計 (3) 有料ラインの位置決め (4) マガジン構成の検討 (5) 価格設定の相談。 トリガー例: 「noteで有料にしたい」「連載の課金設計」「どこから有料にする？」 「noteで稼ぎたい」「マガジン構成どうする」「有料ライン」「価格設定」 ai-interview-articleスキルと併用可能。
経営部4課 (template/conductor/freee/cowork) → 5/18 cognitive load v3 rollout で全14課に展開された CLAUDE.md 共通block管理 skill (20 blocks)。 source of truth: blocks/*.md、各課CLAUDE.mdへ marker-bounded section置換でdistribute。 使用タイミング: (1) 共通block仕様変更時 (2) 14課横断 policy 同期時 (3) cognitive load v3 trial期間 (5/19-5/29) で各 peer marker 挿入 PR 完納時。
承認済みモックと UI 実装を「1ミリもずらさず同一」にするための忠実性照合の規律・手順。 native/plugin UI で反復した「承認 mock ≠ 実装（雰囲気移植で "近い" 止まり）」事故の再発防止機構。 使用タイミング: (1) 新規 UI 面・re-skin・視覚的再設計を実装する時 (2) 承認モックから実装する時 (3) 完了報告に render×mock の diff を添付する時 (4) conductor がモック忠実性を vet する時。 トリガー例: 「モック通りに実装」「UI をモックと同一に」「pixel-diff」「overlay で照合」 「mock に合わせて」「忠実性チェック」「これモックと違う」「1ミリもずらさず」 ※既存実装の微修正（コピー1行・padding・バグ修正）は対象外。
freee API を MCP 経由で操作するスキル。会計・人事労務・請求書・工数管理・販売の詳細APIリファレンスと使い方ガイドを提供。
セッションの区切りで durable 層（status.md・git・memory）を現在形に保つ 3 手順。発火点＝handoff / compaction 直前・idle 化の直前・長時間離席の前。
| name | ui-ux-pro-max |
| description | UI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: image-first, editorial design, minimalism, dark mode, responsive. Projects: landing page, dashboard, SaaS, mobile app. |
UI/UXデザインおよび実装の専門スキル。
核心: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。
Premium = (画像の質 × サイズ) + (余白) - (装飾)
3つの柱:
参照ブランド: Spitfire Audio, Native Instruments, iZotope
| コンテキスト | 画像サイズ | アスペクト比 |
|---|---|---|
| 製品カード | カード面積の70-85% | 16:9 or 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) |
このセクションは最優先事項。デザインの美しさよりもアクセシビリティを優先する。
| テキストサイズ | 最小コントラスト比 |
|---|---|
| 通常テキスト (< 18px) | 4.5:1 |
| 大きいテキスト (≥ 18px bold / ≥ 24px) | 3:1 |
| UI コンポーネント・アイコン | 3:1 |
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段階小さくして視覚的バランスを取る。
| トークン | 用途 | 英語 (デスクトップ) | 日本語 (デスクトップ) |
|---|---|---|---|
.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>
注意: 本文テキスト（p要素の長文）には適用しない。本文は text-white/80 等の通常スタイルを使用。
原則: Tailwindのデフォルト値を直接使用せず、globals.css で定義されたデザイントークンを使用する。
| トークン | 値 | 用途 |
|---|---|---|
--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/
検出されたものは順次トークンに置換する。
<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
<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>
注意: 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変更のみ |
重要ルール: 参照ブランドが名指しされたら、提案前に現在の実装をそのブランドと比較すること。
| 質問 | 「No」の場合のアクション |
|---|---|
| セクションパディング >= 100px？ | py-28以上に増加 |
| 画像がカード面積の60%以上？ | 画像を拡大 |
| ボタンは白または枠線のみ？ | 色付きから変更 |
| 背景は単色（グラデーションなし）？ | 装飾要素を削除 |
"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 で順次 |
| 禁止パターン | 問題 | 代替案 |
|---|---|---|
| 紫グラデーション on 白背景 | 最も汎用的なAI選択 | 単色ダーク |
from-violet-600 to-indigo-600 | 同上 | 削除 |
text-indigo-400 をデフォルトに | ブランド色の乱用 | text-white or text-white/80 |
| 同系色バッジ（indigo on indigo） | コントラスト不足 | 白背景 + 黒テキスト |
import { Music, Brain, Sparkles, Check, X } from 'lucide-react';
/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */
検証すべき画面幅:
実装後は必ず 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%