ckw-design

デザイン（エントリー）

ユーザーがコンポーネント、ページ、ダッシュボード、ランディングページ、React/Vue/HTML-CSS レイアウトなどの Web UI の構築やスタイリングを依頼した場合、またはフロントエンドインターフェースを求めた場合に、このスキルを使用します。目標は、ありきたりな AI 風のデザインを避けた、個性のあるプロダクション品質の成果物です。

デザインを「完了」と報告する前に、必ずレンダリングし、別の評価者に画像を批評してもらってください（コードの評価でも、自分での評価でもありません）。design-spatial §1 を参照してください。ブラインド生成では、自分の出力にある衝突を認識できません。これは空間デザインに限らず、すべてのデザイン出力に適用されます。

必須の横方向オーバーフローチェック — Web UI を「完了」とする前に必ず実施します。 狭い幅（約390pxと約1024px）で、このターン中に document.documentElement.scrollWidth - document.documentElement.clientWidth を測定し、結果が 0 であることを確認してください。この 問題はデスクトップ幅では見えず、ヘッダー、ナビゲーション、 ツールバーなどの行に項目を追加するたびに再発するため、何度も見逃されます。ヘッダーやツールバーの行には、まず flex-wrap:wrap と body{overflow-x:clip} を設定し、水平の行に要素を追加するたびに再測定してください。手順の全文と再発するケースについては design-spatial §4 を参照してください。 狭い幅で測定していない場合、作業は完了していません。完了したと主張しないでください。

サブスキル（関連する場合に読み込む）

• design-thinking — すべてのデザインタスクで読み込みます。目的、トーン、分野、色彩の世界観、レビュー基準、分野横断的な視点（映画、建築、マーケティング、UX、自動車、工業デザイン）を定義します。design-thinking/SKILL.md を参照してください。
• design-system — 実装時に読み込みます。トークン、タイポグラフィ、モーション、色の意味、背景を扱います。コンポーネント、ページ、デザインシステムの構築に使用します。design-system/SKILL.md を参照してください。
• design-spatial — レイアウトを構成する際に読み込みます。明示的なグリッドと8ポイントの間隔制約、視覚的な重み／バランス／配置、レンダリング後に批評するビジョンループを扱います。「空間の理解がおかしい」問題、つまり中央にまとまりすぎている、配置がずれている、特定の幅で崩れるといった生成レイアウトを解決します。design-spatial/SKILL.md を参照してください。
• design-ux — 見た目だけでなく、使いやすさを監査する際に読み込みます。「なんだかしっくりこない」「使いにくい」、習得が難しい、説明が長々と必要になる UI や、リリース前のインタラクティブなツール／エディター／アプリが対象です。Nielsenの10項目とインタラクションのヒューリスティクスを基に、レンダリングされた UI を別の、先入観のない評価者が採点し、優先順位を付けた修正リストを作成します。使いやすさと美しさは別のものです。design-ux/SKILL.md を参照してください。
• design-philosophy — コンセプト重視の制作、キャンペーン、またはユーザーがビジュアル哲学、マニフェスト、ひと目で分かる芸術的な美学を求めている場合に読み込みます。design-philosophy/SKILL.md を参照してください。

ビジュアルアセット — 生成または入手

design-thinking によってビジュアルアセット（ロゴ、アイコン、ヒーロー画像、テクスチャ、背景）が必要だと判断された場合：

1. 生成する → 画像生成モデルまたは API を使って、合成／ブランド用アセットを作成します。
2. 実物／アーカイブ画像を入手する → 無料のストック画像やアーカイブ画像を検索します。多くの場合、生成するより安価で、より本物らしさがあります。
3. design-thinking の出力（トーン、分野、色彩の世界観）を使って、プロンプト／検索クエリを作成します。
4. デザイン哲学に照らして評価し、改善してから制作物に組み込みます。

LLM を活用した作業 — モデルとコストを必ず明記する

デザイン作業で LLM を実行する場合（生成アセット、VLM 分析、レイアウトの批評、プロンプト生成など）：

• 実行前： 使用するモデルと推定コストを明記します（例：「gpt-4o-mini · 画像あたり約 $0.005」または「FLUX v1 · 生成 1 回あたり約 $0.006」）。
• 結果の後： 使用したモデル、推定と異なる場合は実際のコスト、主要なパラメーター（シード、プロンプト、設定）を出力に注記します。コストはログに埋もれさせず、ユーザーから見える場所（メッセージ、コンタクトシートのヘッダー、アセットのキャプション）に記載します。
• 理由： ユーザーはコストと品質のトレードオフに見合う価値があるかを判断しています。コストを記載しなかったり、見えないところに隠したりすると、最も重要な判断材料が隠れてしまいます。このルールは、生成アセットに関する media-attribution-rule を踏襲し、デザインワークフローにおけるあらゆる LLM 操作に適用範囲を広げたものです。

例：

• 「8 件のデザインで gpt-4o-mini によるレイアウト批評を実行中 · 合計約 $0.04 の見込み」（実行前）。
• コンタクトシートのヘッダー：「FLUX v1 · 合計 $0.48（6 回の生成 × $0.08）」（実行後）。
• アセットのキャプション：「hero_banner_flux-dev_seed3891.jpg」（シードにより再現性を確保できます）。
• 不確実性スライダーの結果：「46,978 枚の画像を VLM でトリアージ · gpt-4o-mini · 約 $9.40」（実行前）；「✓ 完了：12,447 枚の画像を分類 · gpt-4o-mini · $7.62」（実行後）。

アルゴリズム／モデルの解説 — 方程式を示し、各項に注釈を付ける

UI でアルゴリズムやモデルをユーザーに提示する場合（「ⓘ 仕組みについて」 パネル、モデルの内訳、手法の注記など）は、実際の方程式を組版し、 主要な項に注釈を付けて含めます。文章だけで済ませてはいけません。 スコアラーを「選択した色がどれくらい含まれているかで順位付けする」といった 言葉だけで説明しても、検証できない曖昧な説明にすぎません。各項にラベルを付けた 式 score = Σ fracᵢ · max(0, 1 − ΔEᵢ/τ) を示せば、ユーザーに調整項目の 働きを正確に伝え、背後で実際に数式が使われているという信頼につながります。

適用方法：

• アルゴリズムごとに、中心となるわかりやすい方程式を 1 つ示します。細部をすべて 並べるのではなく、「要」となる部分を示してください。適切な記法を使います： シグモイド関数には σ、総和には Σ、ノルムには ‖·‖、 上付き文字、ΔE、∇² を使い、等幅フォントまたはセリフ体の数式ブロックで本文と 区別します。
• すべての記号に直下で注釈を付けます：e_x、w、τ、Q がそれぞれ何を 表すかを、1 行ずつ説明します。説明のない方程式は飾りですが、ラベル付きなら仕様です。
• 依存関係は最小限にします。スタイルを設定した HTML／Unicode 数式で問題なく、オフラインでも動作します。式が本当に複雑な場合に限り、 KaTeX／MathJax を使用してください。
• スコアとともに判定ルールも示します（例：「P ≥ 0.55 なら個人用」）。
• これは上記のモデルとコストの注記と組み合わせて使えます。方程式は何を計算するかを示し、モデルとコストの行はどのモデルが、いくらで実行したかを示します。

例（ロジスティックヘッド）：

P(personal │ x) = σ(w·eₓ + b), σ(z) = 1 / (1 + e⁻ᶻ) • eₓ — 画像の 768 次元埋め込み · w, b — あなたのラベルから学習した重み · 判定：P ≥ 0.55 なら個人用、P ≤ 0.40 なら参考用。

「すべて選択」には必ず「選択解除」を用意し、行き詰まる選択をなくす

「すべて選択」の操作には、必ず選択を解除する方法を用意してください。できれば同じボタンを使い、すべて選択済みの場合はラベルを切り替えます（「すべて選択」⇄「すべて選択解除」）。選択解除の手段がない「すべて選択」は罠です。ユーザーが選びすぎたり、反射的に押してしまったりすると、元に戻すには項目を一つずつクリック解除するか、ページを再読み込みするしかありません。その負担はすぐには見えず、間違った項目を選んでしまったあとで初めて発生します。

適用方法：

• 同じボタンを切り替える（最もシンプルで、操作部品も最少です）：表示されている項目がすべて選択されている場合、ボタンの表示を「すべて選択解除」にして選択を解除し、それ以外の場合は「すべて選択」にします。操作部品は一つで、行き詰まることもありません。
• または、選択項目が一つでもある場合は、別の「クリア／選択解除」ボタンを表示します。
• 選択解除の対象範囲は、「すべて選択」と同じ範囲にしてください（表示中のすべて、フィルター適用後のすべて、このページのすべてなど）。「すべて選択」では500件選べるのに、「クリア」では画面上の50件しか解除できない、ということがないようにします。
• この考え方は一般化できます。選択、すべて展開、すべてミュート、すべてチェックなど、元に戻せる一括切り替え操作には、ワンタップで使える逆の操作が必要です。操作の対称性については、restr​aint-rule（タスクの途中でユーザーを行き詰まらせない）を参照してください。