ss-setup

このワークフローの前に、セッションごとに一度、更新前の事前確認を行ってください。

StyleSeed のセットアップ

StyleSeed のセットアップでは、模倣したいお気に入りのブランドではなく、成果物のデザイン手法を選びます。 /ss-resolve --list（Claude Code）または $ss-resolve --list（Codex）を使うと、ハンドブック全体を読み込まずに、サポートされている文法、アダプター、ドメイン、ページ、レシピ、パレット、プロファイルの ID を確認できます。

使用しない場合

• プロジェクトに有効な STYLESEED.md がすでにある → /ss-update を使います。
• 組み込みの文法に反映されていない参考資料がユーザーから提供された → セットアップの前に /ss-reference を実行し、その後、コンパイルされた文法を選択します。
• 確立されたデザインシステム内の単一コンポーネント → /ss-component。

手法、レビュー、参考資料コンパイラーはフレームワークに依存しません。現在、同梱のコンポーネントスキャフォールドが対象としているのは React と Tailwind v4 です。それ以外のスタックでは、ロックを設定し、スキャフォールドが移植可能であるかのように装わずに手法を適用してください。

ウィザード — 一度に一つの判断

1. 製品の目的と表示面

何を作るのか、誰が使うのか、モバイル／デスクトップ製品、ウェブサイト、ソーシャルカルーセル、スライドデッキ、文書／レポート、単一フレームのグラフィックのどれに当たるのかを尋ねます。ADAPTERS.md から表示面アダプターを選び、次にドメインとページ／成果物の種類を推定します。

2. 出力文法

RULESETS.md から文法をちょうど一つ推奨し、目的に合う理由を一文で説明します。

• consumer-service
• operations-console
• technical-instrument
• editorial-reading
• commerce-conversion
• institutional-service
• expressive-marketing
• sequential-story
• /ss-reference ですでにコンパイルされている場合は reference:<slug>

Toss をあらゆる用途の標準として推奨しないでください。Toss は consumer-service の参考例の一つです。適合するものがなく、ユーザーが参考資料を持っている場合は、/ss-reference に誘導します。

3. ページの種類とドメインの傾向

具体的なページ（ダッシュボード、フォーム、ランディングページ、詳細、一覧、設定、オンボーディング）を確認し、該当するドメイン × ページの組み合わせを読みます。これが構成を決定します。美的プロファイルではありません。

4. ブランドレシピ

BRAND-RECIPES.md から形態を一つ推奨します。維持されている文法のマッピングが適合する場合は auto を使います。製品に異なる形状、包含、ナビゲーション、コントロール、コレクションの表現が必要な場合は、明示的なレシピを使います。レシピは企業の模倣ではなく、色を選択するものでもありません。

5. パレットレシピ

PALETTE-RECIPES.md からセマンティックパレットを一つ推奨します。維持されているレシピのマッピングが適合する場合は auto を使います。明示的なパレットを使う場合も、セマンティックな役割、サーフェスとクロームの区別、ステータスの手がかり、検証済みのコントラストを維持する必要があります。レシピは製品の姿勢を表すもので、有限の色見本リストではありません。ユーザーがキーカラーを指定した場合は、知覚上の特性、ライト／ダークの環境、サーフェスの温度、アクセントの関係を選択します。その後、$ss-resolve が実際の OKLCH ランプと役割を導出します。パレットの選択は、あらゆるサーフェスを自由に再配色してよいという意味ではありません。

6. 任意の美的プロファイル

製品を強化できる場合に限り、PRESETS.md からプロファイルを一つ推奨します。none は適切なデフォルトです。プロファイルは連動する視覚的な軸を調整しますが、出力文法の代わりにはなりません。

7. ブランドと制約付きの軸

ブランドカラーが指定されていればそれを固定し、指定されていなければ選択したパレットのプライマリ役割を基準にします。キーカラーが指定された場合は、範囲の広すぎるムードの言葉を尋ねるのではなく、製品の姿勢に基づいて calm|balanced|vivid|deep を推奨します。次に、ライト／ダークモード、neutral|warm|cool のサーフェス、auto|tonal|adjacent|contrast のアクセントの関係を確認します。文法で許可される範囲内で、フォント／言語、密度、角丸、エレベーション、画像／データの役割、モーションも確認します。汎用的なインディゴや、Toss と誤ってラベル付けされた古い紫は使わないでください。

7a. 空間的な関係性

数値を選ぶ前に、意図するグループと間隔のトレードオフを説明してください。既存の スペーシングトークンを維持してください。レジストリのプロダクト UI では、リゾルバーの 空間ロールガイドを使用して、ページのインセット、セクション／グループ／スタック／インラインの間隔、コンポーネントのインセットを個別に推奨し、保存してください。 タイポグラフィとタップ領域は独立させてください。レガシーなセットアップではネイティブトークンを維持し、パースされないロックフィールドを新たに作らないでください。推奨は出発点となる提案であり、承認済みまたは測定済みの品質ではありません。

8. デザインロックを書き込む

STYLESEED.md を作成します：

# StyleSeed — Design Lock

- App domain: fintech
- Surface: mobile-app
- Surface adapter: product-ui
- Page type: dashboard
- Output grammar: consumer-service
- Grammar path: built-in:engine/RULESETS.md
- Grammar fallback: consumer-service
- Reference confidence: n/a
- Brand recipe: calm-consumer
- Palette recipe: quiet-mineral
- Key color: #3182F6
- Palette character: calm
- Palette mode: light
- Palette harmony: auto
- Surface temperature: neutral
- Aesthetic profile: none
- Skin: custom
- Primary action: #3182F6
- Font: Pretendard
- Radius: soft
- Elevation: light=tonal grouping + restrained shadow · dark=tonal ramp + hairline
- Density: comfortable
- Motion: Spring restrained
- Imagery/data role: personal state first; charts only for a decision
- Signature move: one calm contextual briefing above the account summary
- Locked: YYYY-MM-DD

コンパイル済みの文法では、実際のパスと信頼度を使用してください。未知の列挙値は、ロックによる免除として扱わず、拒否してください。

9. スキャフォールドを作成して実証する

コードを書く前に、選択した方式をコンパイルします：

node <installed-ss-resolve>/scripts/resolve-context.mjs \
  --project-root . --from-lock STYLESEED.md --agent claude

Codex では --agent codex を使用します。リゾルバーは .styleseed/effective-rules.md と、ハッシュを検証できる .styleseed/manifest.json を書き込みます。llms-full.txt ではなく、有効なバンドルを読み込んでください。

ユーザーが最初の画面を依頼した場合は、そのバンドルを基に作成し、/ss-score をゲートの最低基準まで実行し、レンダリング可能な場合は /ss-verify で仕上げます。ビジュアルレンダリングを利用できない場合は、スキップしたことを明示してください。

完了レポート

選択した文法とその理由、ページ／ドメインの交差部分、ブランドのレシピ、パレットのレシピ、任意のプロファイル、ロックのパス、 コンパイル済みバンドルとマニフェストのパス、変更したファイル、スコア、ビジュアル検証の状況を報告してください。それぞれ独自の文法が必要な今後の参照先には、/ss-reference を使用することも伝えてください。

ルール

• 質問は一度に1つだけ行い、具体的なデフォルトを推奨してください。
• 出力文法は必須です。美的プロファイルは任意です。
• ブランドのレシピは必須です。auto は、具体的に管理されたレシピに解決されます。
• パレットのレシピは必須です。auto は、コントラスト検証済みのセマンティックパレットに解決されます。
• スキンはトークンであり、デザイン上の判断ではありません。
• ブランドの DESIGN.md を取得して、そのパレットを完全なルールセットとして扱わないでください。
• スコアを付けていない最初のページをスキャフォールドしたり、スクリーンショットなしにビジュアル検証済みと主張したりしないでください。