Design Range

Design Range は何をしますか？

デフォルトのままでは、Claude はすべてのプロダクトを同じようにデザインしてしまいます。Inter や Geist、インディゴ/バイオレットのグラデーション、中央揃えのヒーローに2つのボタン、アイコン付きの3つのフィーチャーカード、rounded-2xl のすべて、柔らかいグレーの影。悪くはありませんが、他のAIサイトと見分けがつきません。このスキルは、そのパターンを意図的に壊すために存在します。

核となる考え方はシンプルです。スタイルを自分で選ばず、サイコロを振る。 「スタイルを選んで」と指示されたモデルは毎回同じ選択肢に落ち着くため、選択をスクリプトに委ねます。スクリプトは一貫性のある方向性のライブラリからサンプリングし、このプロジェクトで最近使用されたものを避けます。あなたの仕事は、その方向性に完全にコミットし、技術を駆使して実行することです。

ワークフロー

1. 状況を把握する

• 何を構築するのか？ 製品タイプにマッピングします: marketing（ランディングページ、サイト、ポートフォリオもここ）、saas（人が作業するアプリ画面）、dashboard（分析、管理、監視）、ecommerce（ストア、製品・カテゴリページ）、mobile（ネイティブまたはモバイルファーストのアプリ画面）、portfolio。
• 既存のブランドやデザインシステムはあるか？ プロジェクトに既に確立されたトークンや design-direction.md がある場合、またはユーザーが既存アプリ内の機能を依頼している場合は、その方向性を維持します。バラエティは新しいプロジェクト、リデザイン、ユーザーが何か違うものを求めた場合に使います。1つのプロダクト内の一貫性は機能であり、プロダクト間の同一性が問題です。
• ユーザーは雰囲気を指定したか？ （「高級感」「遊び心」「ダークでテクニカル」など）。それをフィルター（--energy、--mode）または特定の --show <id> に変換します。ただし、具体的でない限りは代替案も表示します。
• テイストファイル。 references/taste.md に内容があれば、それを読んでください。そこにはユーザーの好き嫌いが書かれており、ライブラリと競合する場合はそれを上書きします。exclude: と favor: の行はロールスクリプトが自動的に適用します。残りのお気に入りのフォント、色、気に入った動きは、どの方向性が構築された場合でもあなたが引き継ぎます。

2. 方向性をロールする

python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

プロジェクトルートから実行します。これは2つの履歴、プロジェクトの .design-history.json とすべてのプロジェクトをカバーする共有の ~/.claude/design-range-history.json を読み取り、両方から遠ざけるため、次のプロダクトが前と同じ外観にならないようにします。また、アクセントカラーを広げます。各オプションのパレットは、そのアクセント色相が他のオプションや最近使用されたアクセントから遠くなるように選択されるため、「バラエティ」が異なるフォントの1つの色ファミリーに崩れるのを防ぎます。3つの対照的なオプションを出力します。それぞれが完全な概要です: ムード、CSS URL付きフォント、名前付きパレット、レイアウトアーキタイプ、シェイプランゲージ、モーション、シグネチャームーブ、避けるべきもの、Tailwind v4 @theme ブロック。

その他のコマンド: --list（すべての方向性）、--show <id> --product <type>（1つの方向性を完全に表示、オプションで --font N --palette N --layout <id>）。

3. ユーザーに選んでもらう（ユーザーがいる場合）

オプションをコンパクトに提示します。各オプションを1つの短いブロックで: 名前、1行のムード、フォントペア、パレット（16進数値）、レイアウトのアイデア。どれかを尋ね、ミックス（「オプション2のフォントとオプション3のパレット」）やロールし直しが可能であることを伝えます。

ユーザーが「とにかく作って」と言った場合、または人間の介入なしで実行している場合は、あなたが選択し、適合性を基準に選びます。ランダム性はあなたの習慣を壊すためのものであり、ディナープランナーにナイトクラブの美学を適用するためのものではありません。各オプションについて自問してください: このブランドの顧客はその中に自分自身を認識できるか？ムードは製品の目的に合っているか（ウェルネスやお金には落ち着いた、スポーツやナイトライフにはエネルギッシュ、データには正確、食べ物や家には暖かみ）？最も適したオプションを選んでください。どれも合わない場合は、一度ロールし直し（--count 4、または --energy/--mode でフィルター）、新しいセットから選びます。驚きのある選択は、それが製品に合う理由を1文で説明できる場合にのみ良い選択です。その一文を、どの方向性を使用したかを報告するときに述べてください。誰も決めない選択を待って構築を遅らせないでください。

4. 記録して方向性ファイルを作成する

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>

これにより、プロジェクト履歴と共有履歴の両方が書き込まれます。次に、選択した概要をプロジェクトルートに design-direction.md として保存します。将来のセッション（および1時間後のあなた）がこのプロダクト内で一貫性を保つためにそれを読み、共有履歴によって次のプロダクトが同じ外観にならないようにします。

5. 構築する

構築する前に、一致するプラットフォームリファレンスを読んでください。各製品タイプには独自の作成ルールがあるからです:

製品	読むもの
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

スタック: デフォルトで React + Tailwind（下記「スタック設定」を参照）。次に:

• 最初にトークンを接続する。 フォントを読み込み、@theme ブロックを貼り付け、セマンティック名（bg-bg、bg-surface、text-text、text-muted、border-border、bg-accent、font-display）でスタイルを適用します。スクリプトは既にコントラストをチェックしています。アクセントカラーのテキストが bg または surface 上にある場合は text-accent-ink を使用し（アクセントが既に読みやすい場合はアクセントと同じ）、アクセントで塗りつぶされたボタンやバッジのラベルには text-on-accent を使用します。概要に Contrast 行が表示されている場合、調整された内容が示されます。indigo-500 や slate-100 のような生の Tailwind パレットクラスは、デフォルトの見た目が再び現れる経路なので、コンポーネントからは遠ざけてください。

• 方向性にコミットする。 そのシグネチャームーブの少なくとも2つを目に見える形で使用し、「避ける」リストを厳格な制約として扱います。控えめに適用された方向性（正しいフォント、その他はデフォルト）は、一般的な外観に戻ってしまいます。概要が radius 0 と言えば、何も丸めません。ハードオフセットシャドウと言えば、ぼかしシャドウはありません。

• レイアウトアーキタイプにページを形成させる。 ロールされたレイアウト（例: sticky-scroll-story、three-pane、hub-and-sheet）は、中央揃えのヒーロー＋3枚のカードという骨格を壊すためのものです。それを中心に構築します。

• パレットを拡張し、置き換えない。 ホバー、アクティブ、微妙なティントが必要になります。与えられた色から派生させます（color-mix(in oklch, var(--color-accent) 85%, black) や bg-accent/10 のような不透明度修飾子を使用）。新しい色相に手を伸ばしてはいけません。

• 実際のコンテンツ。 製品に対してもっともらしく、具体的なコピーを書きます。Lorem ipsum や「Feature One」では、デザインが実際に機能するかどうかがわかりません。

• 動きをつける。 静的なページはテンプレートのように感じられ、ユーザーのテイストファイルはすべてのビルドにモーションを求めます。各ビルドには、以下の4つすべてを、その方向性独自の motion パーソナリティで表現します（ブルータリズムやスポーツはスナッピー、トイボックスはスプリング、シネマティックはスローでフィルム的、オーガニックはジェントル、レトロOSはステップ）:

  1. ロード時の入場振り付け: ヒーローの要素が短い連続シーケンスで到着します（見出し、次にコピー、次にアクション、60〜120ms間隔）。一度にすべてではなく、1つのゆっくりしたフェードでもありません。
  2. クリック可能なものすべてに対するホバーとプレスフィードバックを、方向性のスタイルで: ハードシャドウのプレス、スプリングのようなスケール、下線のスライド、グロー、ワブル。
  3. 概要の motion または signature フィールドから取った1つのシグネチャーアニメーション（きらめき、回転するグリフ、変形するブロブ、ケンバーンズ、タイプライター、マーキー、回転するシェイプ）。それが人々が覚える瞬間なので、目に見える場所に配置します。
  4. 折り畳みより下のセクションに適したスクロールリビール（IntersectionObserver またはフォールバック付きの CSS animation-timeline: view()）。

  スムーズな動きを保つために transform と opacity をアニメーションさせ、UIフィードバックは約300ms未満に抑え、装飾的なものはすべて @media (prefers-reduced-motion: no-preference) の後ろに配置し（または reduce でオフにする）、モーションをオフにした人でも落ち着いた完全なページが表示されるようにします。

6. 完成前に同一性チェック

構築したものを見て、方向性が明示的に要求している場合を除き、以下のいずれかを修正します:

• Inter、Roboto、Arial、または system-ui を表示用フォントとして使用
• パープル/インディゴ/ブルーからバイオレットへのグラデーションがどこかに存在
• 中央揃えのヒーロー、見出し＋サブ見出し＋2つのボタン、その後ろに3列のアイコンカードグリッド
• すべてのコンテナが rounded-xl/2xl で shadow-md/lg
• パステルカラーの塗りつぶされた円の中にアイコン
• Gray-50 のページに白いカードという全体のビジュアルアイデア
• すべてのテキストが同じいくつかのサイズで、タイポグラフィにコントラストがない
• 見出しにグラデーションテキスト（Y2K Chrome または Glass Aurora でない限り）

次に、簡単なクラフトパス: テキストのコントラストが WCAG AA（本文4.5:1、大テキスト3:1; パレットが背景で不合格の場合は muted を調整）、すべてのインタラクティブ要素にホバー、focus-visible、無効状態があり、375px幅で機能し、アニメーションが prefers-reduced-motion を尊重することを確認します。

スタック設定

Tailwind v4（デフォルト）: フォントの <link> を index.html に配置し（または next/font / @import url(...) をCSSの先頭に）、ロールされた @theme ブロックをメインCSSファイルの @import "tailwindcss"; の後に配置します。bg-accent、font-display、text-muted のようなクラスが自動的に機能します。

Tailwind v3: tailwind.config.js の theme.extend.colors と theme.extend.fontFamily に同じ名前で同じ値を配置します。

Next.js: Googleフォントには next/font/google を推奨します（同じ名前、スペースはアンダースコア）。CSS変数にマッピングします。FontshareフォントはCSS URLを通じて読み込みます。

React Native / Expo（mobile 用）: NativeWind を使用し、tailwind.config.js にパレットを配置し、@expo-google-fonts/<font-name> または expo-font でフォントを読み込みます。Fontshareフォントは assets/fonts にフォントファイルをダウンロードする必要があります。ユーザーが単に見た目のモックアップを希望する場合、モバイルサイズのReactウェブページ（390x844フレーム）で十分であり、はるかに高速です。不明な場合は確認してください。

単一ファイルプレビュー: まだプロジェクトがなく、ユーザーが単に見たいだけの場合、Tailwind CDN（v3設定では <script src="https://cdn.tailwindcss.com"></script>、v4ではインライン <style type="text/tailwindcss">@theme {...}</style> 付きの @tailwindcss/browser@4）とESM経由のReactを含む単一のHTMLファイルで許容されます。

ユーザーがさらに幅を求める場合

• ロールし直し: スクリプトを再度実行します。最近の選択は既に避けられます。
• リミックス: ある方向性のタイプと別の方向性のパレットを組み合わせます。結果が一貫して感じられるか確認してください（ピクセルフォントと高級パレットの組み合わせはジョークになります。それが意図的であれば問題ありません）。
• 新しい方向性: ライブラリにない外観をユーザーが説明した場合、同じ形式で assets/directions.json に追加し、将来のロールに参加できるようにします。そのフォントが Google Fonts または Fontshare に存在することを確認します。
• テイスト: ユーザーが好き嫌いを言った場合（「セリフフォントは使わない」「ブルータリズムが大好き」）、それを references/taste.md に追加する提案をし、毎回適用されるようにします。