ss-dial について
ss-dial は、StyleSeed で一度に1つの視覚軸を範囲内で調整するスキルです。他の軸やプロジェクトのトークンを保ちながら値を変更し、再コンパイルして対象範囲を検査します。
主な機能
- 011回につき視覚軸を1つ変更
- 02定義済みの段階内で値を調整
- 03他の軸とプロジェクトトークンを維持
- 04設定を更新して再コンパイル
- 05対象のコードと描画を検査
活用シーン
- 01画面密度や空間リズムの調整
- 02階層のコントラスト・角丸・奥行きの変更
- 03彩度・フォントウェイト・動きの調整
- 04コンポーネントや成果物の範囲に限定した変更
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ bitjaru/ styleseed --skill ss-dialインストール後、Claude Code で/ss-dialを入力して読み込まれたか確認します。
詳細
このワークフローを実行する前に、セッションごとに 1 回の更新前チェックを実行してください。
軸を調整する
レジストリ優先の成果物境界
.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み取ってください。レジストリを持つプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。
「もっとミニマルに」は、そのまま言うだけで十分です。モデルはすでに自然言語を読み取れるからです。スキルが役立つのは、1 つの単語で多数のトークンをまとめて協調的に動かし、ルールに違反せずに変更する必要がある場合、そして手作業では一貫した結果にならない場合(変更されるトークンにばらつきがある、グリッドが崩れる、2 つ目のアクセントカラーが加わるなど)です。それが /ss-dial です。解釈ではなく、決定論的な段階調整+ガードレール+再ゲートを行います。
リクエストが「もっとプレミアムに」「もっとエディトリアルに」「もっと遊び心のある感じに」といったムードを表す言葉なら、それは 1 つの軸ではなく、複数の軸にわたる位置の組み合わせです。その場合は /ss-restyle <preset> を使ってください。/ss-dial は軸を 1 つだけ動かします。
使用しない場合
- モデルが言葉から適用できる曖昧な雰囲気(「もっとすっきり」「もっと良い感じ」)→ スキルで包まず、そのまま伝えてください。
- 名前の付いた美的スタイル(スイス風/エディトリアル/ブルータリズム)→
/ss-restyle(ダイヤル位置のプリセット)。 - アクセントの色相そのものを変更する場合(リブランド)→ ロックの Key color を直接編集してから再導出します。
- 有効なレジストリもレガシーロックもない場合 → 軸の調整を始める前にセットアップを行います。レジストリエラーを理由にセットアップをやり直さないでください。
仕組み(すべての軸)
- 上記の成果物境界を解決します。レジストリファイルのどちらかが存在する場合は、有効で完全なレジストリを必須とします。プロジェクト DNA は
.styleseed/project.jsonから、対象の成果物設定はその設定ファイルから読み取ります。レジストリの代替としてSTYLESEED.mdを新規作成または更新しないでください。レジストリがない場合は、該当するレガシーロックを読み取ります。 - 軸と、その軸で現在サポートされている値を特定します。「強める/弱める」の場合は、サポートされている値を 1 段階動かします。明示的に指定された目標値は検証してください。すでに端点にある場合は、そのことを伝え、値を作り出さないでください。
- 変更は、要求された成果物またはコンポーネントのスコープにのみ適用します。プロジェクト全体のトークンを変更するのは、要求されたスコープがプロジェクト全体の場合に限ります。その場合は、影響を受けるすべての成果物を解決してください。
- 関連しない軸と、承認済みのプロジェクトトークンを保持します。以下の表は状況に応じた例であり、承認済みのデザインシステムを上書きしたり、レジストリでサポートされていない値を強制したりする許可ではありません。
- サポートされている値を信頼できるプロジェクト/成果物設定に保存してから、再コンパイルします。レガシープロジェクトでは、対応するロックと実装トークンを更新します。軸を表現できない場合は、架空の列挙値を書き込んだり、黙って別の値に対応付けたりせず、その制約を伝えてください。
- 承認された変更の実施中は、影響を受けるコードのゲートとレンダリングのゲートを実行します。正確なスコープ、変更前/変更後の値、トレードオフ、残っている失敗を報告してください。スコアは、視覚的または人間による承認を意味するものではありません。
軸
1. 密度と空間のリズム
サポートされる密度の段階は、レジストリとこのワークフローの両方で compact → comfortable → spacious です。「airy」や「dense」のような語は説明であり、レジストリの追加値ではありません。密度は初期状態の指針です。文字サイズ、行の高さ、またはすべてのスペーシングトークンを自動的に変更しないでください。
「セクション間を広げる」「カード内のパディングを減らす」「モバイルで余裕を持たせる」には、インストール済みリゾルバーの空間的ロールガイドを使用してください。6つの独立したロール、プロジェクトのデフォルト、アーティファクトのオーバーライド、base/wide の値を定義しています。定性的な密度の列挙値が変わらない場合でも、ロールの調整は単一軸の操作です。
- タスクとグループ分けを踏まえて提案し、まず既存のトークンを確認してください。読み取り専用の
ss-resolve/scripts/recommend-spacing.mjs --project-root . --artifact <id>は、レジストリのプロダクト UI に適用前の初期提案を提示します。提示される値は計測に基づく診断ではありません。現在のバインディングを確認するにはガイドを使用し、数値を変更する前に対象を絞った診断アドバイスを得るために--measurementを追加してください。ネストされたアーティファクト境界では、ネイティブのフォールバックトークンを保持してください。 artifact.spacing.rolesにはリクエストされたロールのみを保存してください。プロジェクト全体の変更が承認されている場合に限り、プロジェクトのspacingを使用してください。オーバーライドされたロールは、両方のレスポンシブ値を置き換えます。- 再コンパイルし、バンドルのスコープ付き CSS 変数を実装に対応付けてください。宣言されていないロールは保持し、ロールを削除したときは古くなったコピー済みのマッピングを削除してください。
- ラベル/ヘルプ/コントロールは関連性がわかるようにまとめ、比較行は規則的に保ち、独立したセクションは区別してください。マーケティングのナラティブと運用テーブルでは、異なるリズムが必要です。
- ガターはプロジェクトとビューポートに合わせて調整します。汎用的な
px-6や必須の8pxグリッドはありません。読みやすいテキストと、適用されるアクセシビリティの最低基準を保ってください。余白を減らしても、タップ対象を小さくしてはいけません。 - レガシープロジェクトや非ウェブプロジェクトでは、ネイティブのトークンを保持してください。ローカルな調整を完了するために、レジストリのスペーシングサポートを新たに設けたり、移行を開始したりしないでください。
2. 階層のコントラスト — レベル間のサイズ/ウェイトの差
段階:subtle → balanced → strong → dramatic。ヒーローと本文の比率に加え、ディスプレイ用文字のトラッキングを調整します。
| 位置 | ヒーロー:本文のサイズ比 | ディスプレイ用文字のウェイト | ディスプレイ用文字のトラッキング |
|---|---|---|---|
| subtle | 約2:1 | 600 | -0.01em |
| balanced | 約2.5:1 | 700 | -0.02em |
| strong | 約3.2:1 | 700–800 | -0.02em |
| dramatic | 約4:1 | 800 | -0.03em |
ガードレール: サイズは Font Size テーブルの値のみから選んでください(独自に作らないでください)。本文はどのような場合でもサーフェスの最低基準を保ちます。数値と単位の2:1の組み合わせを維持してください。引き続き、焦点となる要素は1つだけが際立つようにしてください(コントラストを上げても、競合するヒーローを2つ作ってはいけません)。
3. 角丸 — 角の印象(スライダーではなく、カテゴリごとの切り替え)
段階:sharp ↔ soft ↔ pill。コンポーネントごとではなく、マッピングテーブル全体を1セットとして切り替えます。
| 位置 | コントロール(btn/input/chip) | カード | 内側のパネル |
|---|---|---|---|
| sharp | 2–4px | 6–8px | 4–6px |
| soft | 8–10px | 12–16px | 10–12px |
| pill | 完全なピル型(9999px) | 20–24px | 14–16px |
ガードレール: 全体で一つの印象に統一してください(sharp なカードと pill 型ボタンの組み合わせは、禁止対象である印象の混在を明確に示します)。ネストされた要素でも、引き続き inner = outer − padding に従ってください。
4. 立体感 / 奥行き — サーフェスをどのように分離するか
ランプ: flat → subtle → layered → lifted。ライトとダークは異なる言語を話します — テーマに合った方を適用してください。
| 位置 | ライト (影、不透明度 ≤8%) | ダーク (トーン + ヘアライン) |
|---|---|---|
| flat | 影なし; 1px のヘアライン罫線 | ページ = カードトーン; ヘアラインのみ |
| subtle | 0 1px 3px /4% | 1 段のサーフェスステップ + ヘアライン |
| layered | 0 1px 3px /4% + 0 4px 12px /8% | 2 段のサーフェスステップ + ヘアライン |
| lifted | 浮き上がった要素に 0 8px 24px /8% を追加 | 3 段; 最も明るい = 最も高い |
ガードレール: ライトでは影の不透明度を約 8% を超えないようにしてください; ダークでは決してドロップシャドウを使わないでください (トーンのサーフェスランプ + ヘアライン罫線を使用); UI 全体を通して 1 つの影の言語 / 1 つの光の方向に統一してください。
5. カラー — 彩度と色温度 (2 つのサブダイヤル、アクセントは単一のまま)
saturation: muted ↔ balanced ↔ vivid · temperature: cooler ↔ neutral ↔ warmer。1 つのアクセントを HSL でシフトし、そのティントを再導出します; ニュートラルグレーの彩度をわずかに動かすこともあります。色相を追加することはありません。
| サブダイヤル | 動き | 適用対象 |
|---|---|---|
| more-muted | アクセントの彩度 −10〜15% (HSL S) | --brand + bg-*-tint を 10〜14% アルファで再導出 |
| more-vivid | アクセントの彩度 +10〜15% | 同上 |
| warmer | 色相を 20〜40° へ (アンバー / テラコッタ) | --brand; オプションでグレーに +2〜4% の暖色系彩度 |
| cooler | 色相を 200〜220° へ (ブルー / ティール) | --brand; グレーをクール系へ |
ガードレール: あくまで 1 つのアクセント — これは既存の色相をシフトするもので、2 つ目を導入することは決してありません; ティントは 10〜14% アルファのオーバーカード方式 (ライト + ダーク) に従います; アクセントがテキストを担う場合は ≥4.5:1 を維持します; 暖色 / 寒色のグレーシフトはニュートラルに近い状態 (彩度 ≤ 約 6%) を保つ必要があり、ティントになってはいけません。
6. フォントウェイト — ウェイトのランプ
ランプ: light → regular → bold。ウェイトスケール全体を 1 段階上下にシフトし、広がり を保ちます (これにより階層が生き残ります)。
| 位置 | 本文 | ラベル / ナビ | 見出し / 数値 |
|---|---|---|---|
| light | 400 | 400–500 | 600 |
| regular | 400 | 500 | 700 |
| bold | 500 | 600 | 700–800 |
ガードレール: レベル間のコントラストを保ってください (すべてを 1 つのウェイトにしないでください — それは階層を平坦化します); 長文での可読性のために本文は ≤ 500 にしてください; CJK のウェイトはトラッキングではできない仕事をします。
7. モーションエネルギー — シード + デュレーション
ランプ: still → calm → lively → energetic。モーションシードを交換し、デュレーションをグローバルにスケールします。
| 位置 | シード | デュレーション | 特性 |
|---|---|---|---|
| still | なし | 即時 / カラーのみ | 入場モーションなし |
| calm | Silk / Snap | 100–200ms、ease-out | 滑らか、抑制的 |
| lively | Spring | 200–350ms、わずかなオーバーシュート | 応答的、生き生きとした |
| energetic | Spring / Pulse | 250–400ms、目に見えるスプリング | 弾む、遊び心のある |
ガードレール: 数値、残高、金額はどのレベルでも決してアニメーションさせないでください; 常に prefers-reduced-motion を尊重してください; スクロール連動 / パララックス / 3D はサーフェススコープです (§43 — アプリ / データサーフェスでは禁止、マーケティング / ランディングページでは Cinematic ティアとして許可; スクロールジャッキングはどこでも禁止); モーションがコンテンツを遅延させたり、アクションをブロックしたりすることは決してありません。
ルール
- 1 回の呼び出しにつき 1 つの軸。 ムードワード (「プレミアム」) は 組み合わせ です →
/ss-restyleであり、これではありません。 - スコープは明示的です。 変更されたトークンのすべての使用を認可された境界内で適用してください; アーティファクトの調整を無関係な画面に伝播させないでください。
- 端でクランプしてください。 無限の「もっと」ではなく境界のあるランプです — すでに
spacious/sharp/boldにある場合は、その旨を伝えて停止してください。 - ガードレールはダイヤルに優先します。 タスク適合性と該当するアクセシビリティ要件を維持してください; 現在のアーティファクトバンドルと承認されたプロジェクトトークンが、文脈に応じた視覚的選択を統治します。
- 永続化 + 再ゲート。 権威あるレジストリ設定を更新するか、レジストリが存在しない場合に限りレガシーロックを更新し、その後再コンパイルして影響を受けるコードとレンダリングゲートを実行してください。
axis: old → new、スコープ、および実際のエビデンスを報告してください; スコアを視覚的な受け入れとして扱わないでください。