ck:frontend-design

このスキルでは、ありきたりな「AI 生成らしい」見た目を避け、独自性のある本番品質のフロントエンドインターフェースを作成します。美的な細部や創造的な工夫に細心の注意を払い、実際に動作するコードを実装してください。

重要：以下の「デザイン思考」「フロントエンドの美的ガイドライン」「アセットと分析の参照資料」「アンチパターン（AI 生成らしさ）」の各セクションに必ず従ってください。これらのルールを省略しないでください。

ワークフローの選択

入力の種類に応じて、ワークフローを選択してください。

入力	ワークフロー	参照先
スクリーンショット	正確に再現	./references/workflow-screenshot.md
動画	アニメーションを含めて再現	./references/workflow-video.md
スクリーンショット／動画（説明のみ）	開発者向けに文書化	./references/workflow-describe.md
3D／WebGL のリクエスト	Three.js による没入型体験	./references/workflow-3d.md
簡単なタスク	迅速に実装	./references/workflow-quick.md
複雑なタスク／受賞品質	没入型のフル実装	./references/workflow-immersive.md
既存プロジェクトのアップグレード	再設計の監査	./references/redesign-audit-checklist.md
ゼロからの作成	以下のデザイン思考	-

すべてのワークフロー：デザインの知見を得るため、最初に ck:ui-ux-pro-max スキルを有効にしてください。

優先順位： 以下のアンチスロップルールが ck:ui-ux-pro-max の推奨事項（例：Inter フォント、AI パープルの配色、Lucide アイコンのみの使用）と競合する場合、ユーザーが競合する選択を明示的に指定していない限り、./references/anti-slop-rules.md の代替案を使用してください。

スクリーンショット／動画の再現（クイックリファレンス）

1. 分析 — ck:ai-multimodal スキルを使い、色、フォント、間隔、エフェクトを抽出します
2. 計画 — ui-ux-designer サブエージェントを使い、段階的な実装計画を作成します
3. 実装 — 元の内容に正確に合わせます
4. 検証 — 元の内容と比較します
5. 文書化 — 承認された場合は ./docs/design-guidelines.md を更新します

詳しい手順は、各ワークフローのファイルを参照してください。

デザインダイヤル

デザイン上の判断を左右する、設定可能な3つのパラメーターです。セッション開始時に既定値を設定するか、チャットでユーザーが変更できるようにします。

ダイヤル	既定値	範囲	低（1～3）	高（8～10）
DESIGN_VARIANCE	8	1～10	完全な対称性、中央揃えのレイアウト、均等なグリッド	非対称、メイソンリー、大きな余白、CSS Grid の端数指定
MOTION_INTENSITY	6	1～10	CSS のホバー／アクティブ状態のみ	Framer Motion によるスクロール時の表示、バネ物理、絶え間なく続くマイクロアニメーション
VISUAL_DENSITY	4	1～10	アートギャラリー — 大きな余白、高級感／清潔感	コックピット — ごく狭いパディング、1px の区切り線、あらゆる場所に等幅フォントの数字

使い方： これらの値は具体的なルールに反映されます。DESIGN_VARIANCE > 4 の場合、中央揃えのヒーローは使われすぎているため、画面を分割するレイアウトか左揃えのレイアウトを優先してください。MOTION_INTENSITY > 5 の場合、絶え間なく続くマイクロアニメーションを組み込んでください。VISUAL_DENSITY > 7 の場合、ありきたりなカードをなくし、間隔や区切り線を使用してください。

ダイヤルに応じた SaaS ダッシュボードの実装については、./references/bento-motion-engine.md を参照してください。

デザイン思考

コーディングを始める前に、大胆な美的方向性を決めましょう。

• 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底したミニマリズム、マキシマリストな混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／無骨、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用的など、選択肢はたくさんあります。これらをインスピレーションとして活用しつつ、美的方向性に忠実なデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：何がこのデザインを忘れられないものにしますか？見る人の記憶に残るものは何ですか？

重要：明確なコンセプトの方向性を選び、精度高く形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強度ではなく、意図があることです。

次に、以下の要件を満たす実用的なコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番環境に適した、実際に動作するコード
• 目を引き、記憶に残るビジュアル
• 明確な美的視点を持つ、一貫性のあるデザイン
• 細部まで丁寧に磨き上げられていること

フロントエンドの美学に関するガイドライン

以下の点に注力してください。

• タイポグラフィ：美しく、独自性があり、興味深いフォントを選びましょう。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める、個性的で意外性のあるフォントを選んでください。印象的なディスプレイフォントと洗練された本文用フォントを組み合わせましょう。
• 色とテーマ：一貫性のある美的方向性を貫きましょう。一貫性を保つために CSS 変数を使いましょう。控えめで均等に配分された配色よりも、主役となる色に鮮やかなアクセントを効かせるほうが効果的です。
• モーション：アニメーションを使って効果やマイクロインタラクションを生み出しましょう。HTML では CSS のみで実装できる方法を優先してください。React で Motion ライブラリが利用できる場合は使いましょう。効果の高い瞬間に注力してください。段階的に表示するアニメーション（animation-delay）を使ってページ読み込み時の演出をよく練り上げるほうが、散発的なマイクロインタラクションよりも喜びを生み出します。スクロール時の演出や、意外性のあるホバー状態も活用しましょう。
• 空間構成：予想外のレイアウトを取り入れましょう。非対称、重なり、斜めの流れ、グリッドからはみ出す要素。広々とした余白、または制御された密度を活用しましょう。
• 背景とビジュアルの細部：単色に頼るのではなく、雰囲気と奥行きを作り出しましょう。全体のデザインに合った効果や質感を加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、透明度を重ねたレイヤー、ドラマチックな影、装飾的な境界線、カスタムカーソル、粒子のオーバーレイなど、独創的な表現を取り入れましょう。

よくあるフォントファミリー（Inter、Roboto、Arial、システムフォント）、使い古された配色（特に白背景に紫のグラデーション）、ありきたりなレイアウトやコンポーネントのパターン、文脈に即した個性のない型どおりのデザインなど、ありがちな AI 生成風の美学は絶対に避けてください。

創造的に解釈し、文脈に合った、本当にデザインされたと感じられる意外性のある選択をしてください。デザインが同じものばかりにならないようにしましょう。ライトテーマとダークテーマ、異なるフォント、さまざまな美的方向性を使い分けてください。生成のたびにありがちな選択肢（たとえば Space Grotesk）へ収束することは絶対に避けてください。

重要：実装の複雑さを美的ビジョンに合わせましょう。マキシマリストなデザインには、豊富なアニメーションや効果を備えた手の込んだコードが必要です。ミニマルまたは洗練されたデザインには、抑制、精度、そして余白やタイポグラフィ、さりげない細部への入念な配慮が求められます。優雅さは、ビジョンをうまく形にすることで生まれます。

覚えておいてください：Claude は並外れた創造性を発揮できます。遠慮せず、既成概念にとらわれず、独自のビジョンを徹底して追求したときに生み出せるものを見せてください。

アセット：ck:ai-multimodal で画像を生成し、ck:media-processing で処理します。

アセットと分析の参考資料

タスク	参考資料
アセットの生成	./references/asset-generation.md
品質の分析	./references/visual-analysis-overview.md
ガイドラインの抽出	./references/design-extraction-overview.md
最適化	./references/technical-overview.md
アニメーション	./references/animejs.md
Magic UI（80以上のコンポーネント）	./references/magicui-components.md
スロップを防ぐ禁止パターン	./references/anti-slop-rules.md
再設計の監査チェックリスト	./references/redesign-audit-checklist.md
プレミアムデザインのパターン	./references/premium-design-patterns.md
パフォーマンスのガードレール	./references/performance-guardrails.md
Bento モーションエンジン（SaaS）	./references/bento-motion-engine.md

クイックスタート：./references/ai-multimodal-overview.md

アンチパターン（AI スロップ）

LLM がデフォルトで選びがちなこれらの表現は、できるだけ避けて別の方法を選んでください。ルールの全文はこちら：./references/anti-slop-rules.md

タイポグラフィ — Inter／Roboto／Arial は避けてください。代わりに、ベトナム語に対応した人気上昇中の Google Fonts、Geist、Outfit、Cabinet Grotesk、Satoshi を使用してください（最適な候補を検索してください）。

フォントサイズ — モバイル端末でズームが発生しないよう、入力フィールドには必ず 16px より大きいフォントサイズを使用してください。

色 — AI らしい紫／青のグラデーション、純粋な #000000、彩度が高すぎるアクセントは避けてください。ニュートラルなベースカラーに、慎重に選んだアクセントカラーを 1 色合わせてください。

レイアウト — 3 列均等のカード型機能一覧、極端にばらつきのある中央揃えのヒーロー、h-screen は避けてください。非対称グリッド、分割画面、min-h-[100dvh] を使い、モバイルファーストを必須としてください。

コンテンツ — 「John Doe」「Acme Corp」、切りのよい数字、AI らしい定型句（「Elevate」「Seamless」「Unleash」）は避けてください。現実味のある名前、自然なデータ、平易で具体的な表現を使ってください。

エフェクト — ネオンや外側のグロー、カスタムカーソル、見出しのグラデーションテキスト（依頼された場合を除く）は避けてください。色味を加えた内側のシャドウや、スプリング物理を使ってください。

コンポーネント — スタイル未設定の shadcn のデフォルト、Lucide のみのアイコン、高密度なカード・枠線・シャドウのパターンは避けてください。必ずカスタマイズし、Phosphor／Heroicons を試し、カードより余白を活用してください。

クイックチェック： デザインを提出する前に、./references/anti-slop-rules.md の「AI の兆候」チェックリストを確認してください。

パフォーマンス： アニメーションとぼかしのルールは ./references/performance-guardrails.md を確認してください。

忘れないでください。Claude は並外れた創造的な仕事を成し遂げる力を備えています。独自のビジョンを徹底的に追求してください。