tweaks

調整スキル · パラメータ化バリアントパネル

任意の HTML アーティファクトを、CSS カスタムプロパティをリアルタイムで書き換え、 localStorage に永続化するライブコントロールのサイドパネルでラップします。 huashu-design の調整パターンにインスパイアされています。

生成するもの

2 つのレイヤーを持つ、単一の自己完結型 HTML ファイル:

1. ステージ — 元のアーティファクト(ランディングページ / デッキ / ダッシュボード)。 すべての視覚的な決定が CSS カスタムプロパティから読み取られるように 再キーイングします: --accent、--scale、--density、--mode、--motion。
2. パネル — 固定サイドバー(小さいビューポートではドロワー)。 フォームコントロールが、小さなバニラ JS ブリッジを介して これらのカスタムプロパティにバインドされます。すべての変更を、 アーティファクト識別子をキーとして localStorage に永続化します。

ユーザーは次のことができます:

• アーティファクトを開き、保存された設定(または適切なデフォルト)で レンダリングされたステージを確認する。
• パネルでアクセント / スケール / 密度 / モード / モーションを調整し、 ステージが即座に更新されるのを確認する — 再レンダリングなし。
• T を押してパネルの表示 / 非表示を切り替える。R を押して デフォルトにリセットする。
• ページをリロードする — すべての選択が永続化されます。

使用すべきとき

• ユーザーが 80% 気に入ったものを生成し、最後の 20% を自分で 微調整したい場合。
• デザインシステム / ブランドをプレゼンしていて、聴衆に バリアントをライブで体感してほしい場合(エージェントを再実行する代わりに)。
• スタンドアロンのデモ(例: ポートフォリオ作品)を出荷していて、 閲覧者に遊んでほしい場合。

使用すべき でない とき

• 反復されないワンショットのアーティファクト(例: ランブック — パラメータは役に立ちません)。
• アーティファクトの価値が固定比率にある場合(例: 慎重にバランスされた データビジュアライゼーションを含むインフォグラフィック — つまみは それを劣化させます)。

5 つの標準つまみ

アーティファクトに合うサブセットを選んでください。2 つだけが重要なのに 5 つすべてを出荷しないでください — clutter はリグレッションです。

1. --accent — アクセントカラー

5〜8 個の厳選されたスウォッチを持つセレクト(自由なカラーピッカーを 出荷しないでください — ユーザーは悪い色を選んであなたを責めます)。

const ACCENT_PRESETS = [
  { id: 'rust',    val: '#c96442', label: 'Rust' },
  { id: 'cobalt',  val: '#2c4d8e', label: 'Cobalt' },
  { id: 'sage',    val: '#4a7a3f', label: 'Sage' },
  { id: 'plum',    val: '#7a3f6a', label: 'Plum' },
  { id: 'graphite',val: '#3a3a3a', label: 'Graphite' },
];

アーティファクトは、以前ハードコードされたアクセントがあったすべての場所で var(--accent) を使用します。ボーダー / リンク / 引用ルール / CTA がすべて 一緒に切り替わります。

2. --scale — タイプスケール(0.85 / 1.0 / 1.15)

3 つの設定: コンパクト(0.85)、ノーマル(1.0)、ゆったり(1.15)。 すべての font-size 宣言は calc(... * var(--scale)) を介して var(--scale) で乗算されます。

±15% を超えないでください — それを超えるとレイアウトが壊れます (カラムフロー、ブレークポイント、行数)。

3. --density — レイアウト密度(タイト / ノーマル / ゆったり)

間隔スケールを切り替える 3 つの設定: タイト(0.75) / ノーマル(1.0) / ゆったり(1.4)。すべての padding / gap / margin 宣言は var(--density) で乗算されます。

これは最もインパクトの大きいつまみです — また最も壊れやすいので、 ラップする前に、レイアウト上重要なすべてのコンテナが カスタムプロパティで基準間隔を宣言する必要があります。

4. --mode — ライト / ダーク

2 状態のトグル。<html> 要素に data-mode="light" と "dark" を設定し、 アーティファクトの :root セレクタが 2 つのカラーセットで応答します。

アーティファクトにすでにメディアクエリベースのダークモードがある場合は、 それをデータ属性バージョンに 置き換えて ください — ユーザーの選択が OS より優先されるべきです。

5. --motion — オフ / 控えめ / 活発

3 つの設定。CSS 変数 --motion-mult にマッピングされ、 すべての transition-duration / animation-duration 宣言をスケーリングします:

• オフ — 0s(WebGL キャンバス / 装飾アニメーションも無効にします)。
• 控えめ — 1.0(アーティファクトが作成したタイミング)。
• 活発 — 1.6(より遅いトランジション、より目に見えるモーション)。

prefers-reduced-motion を尊重してください: ユーザーがそれを設定している場合は、 保存された設定に関係なく、デフォルトで オフ にします。

実装プリミティブ

assets/wrap.html を読み込んでください — これはパネル + ブリッジを不活性テンプレートとして同梱しています。あなたの仕事は次のとおりです:

1. ユーザーの既存の成果物 HTML を取得します。
2. そのアクセント / モード / スペーシング / スケールをカスタムプロパティに取り出します (ハードコードされた #hex / Npx / Nrem を検索して変換します)。
3. その内容を wrap.html のマークされた領域に貼り付けます。
4. assets/wrap.html の KNOBS 配列を編集し、この 成果物に関連すると判断したノブだけを残します。2 つが重要なら 5 つを同梱しないでください。
5. STORAGE_KEY を一意のスラッグ (tweaks-<artifact-slug>) にパッチします。

wrap.html のブリッジは:

• 最初の描画時に localStorage[STORAGE_KEY] の JSON を読み込みます。
• 値を document.documentElement.style.setProperty('--accent', ...) として適用します。
• すべてのフォームコントロールの change イベントを監視し、書き戻します。
• T (パネル切り替え) と R (リセット) を公開します。

ワークフロー

ステップ 1 — 成果物を取得する

クリティークスキルと同じ選択肢です:

1. プロジェクトファイル (プロジェクトフォルダー内の index.html)。
2. チャットに貼り付けられた HTML。
3. このターンであなたが生成したもの。

ステップ 2 — どのノブを適用するか決める

まず成果物の CSS を読んでください。各ノブについて はい / いいえ を判断します:

• --accent — 成果物に 3 回以上使われているアクセントカラーが 1 つある場合は、はい。
• --scale — 成果物がタイポグラフィ主導 (記事、デッキ、料金ページ) の場合は、はい。
• --density — 成果物に一貫したギャップ / パディングのリズム (デッキ、ダッシュボード、ランディング) がある場合は、はい。ランブック (すでに密) にはいいえ。
• --mode — 成果物に作成済みのダークモードトークンがある場合、またはそれを導出する意思がある場合は、はい。
• --motion — 成果物にスケーリングする価値のあるトランジション / アニメーションがある場合は、はい。静的レポート / クリティークレポートにはいいえ。

デフォルト: 3 つのノブが最適です。 5 つは忙しすぎ、1 つはパネルにする価値がありません。

ステップ 3 — ハードコードされた値をカスタムプロパティに取り出す

assets/wrap.html の <style> ブロックを開いてください — そのカスタムプロパティの命名スキーム (--accent、--scale など) をコピーします。ユーザーの成果物で、それらの関心事が存在するすべての箇所を見つけて書き換えます:

• color: #c96442 → color: var(--accent)
• font-size: 18px → font-size: calc(18px * var(--scale))
• padding: 24px 32px → padding: calc(24px * var(--density)) calc(32px * var(--density))
• transition: opacity 200ms → transition: opacity calc(200ms * var(--motion-mult))

成果物がすでに clamp() や vw を使っている場合は、外側 の値をカスタムプロパティで乗算してください — clamp(...) を分解しないでください。

ステップ 4 — wrap に貼り付ける

成果物の <style> と <body> を wrap.html のマークされた領域にコピーします。パネル + ブリッジはそのまま保ちます。

ステップ 5 — ループをテストする

結果を開き、各ノブを少なくとも 1 回クリックし、ページを更新し、選択が保持されることを確認します。ノブがレイアウトを壊す場合は — それを削除してください、同梱しないでください。

出力コントラクト

<artifact identifier="tweaks-<artifact-slug>" type="text/html" title="<Artifact Title> · Tweaks">
<!doctype html>
<html>...</html>
</artifact>

成果物の前に一文 (「Wrapped X with a 3-knob tweak panel — accent / scale / mode.」)。</artifact> の後で停止します。

ハードルール

• 自由なカラーピッカーを同梱しない — キュレーションされたスウォッチのみです。自由を与えられるとユーザーは悪い色を選びます。そこから救うことがすべての目的です。
• 成果物識別子で永続化する — グローバルキーではなく tweaks-<slug> です。2 つのタブで開かれた 2 つの成果物が状態を共有してはいけません。
• prefers-reduced-motion を尊重する — ユーザーがそれを設定している場合、モーションはデフォルトで オフ とし、明示的なクリックでのみ上書きします。
• 単一ファイル — 成果物の既存のインポートを超えて、外部 CSS / JS / フォントは使わないでください。パネル + ブリッジはインライン化します。
• ビューポート < 720px ではパネルはデフォルトで非表示 — 右上の「T」ボタンによるスライドインドロワーにします。
• 5 つを超えるノブを同梱しない。 3 つが最適です。