YLynnLee/reference-to-style

参照からスタイルへ

参照をサイト全体のスタイルに変換し、ビジュアルボード（board.html）に表示し、測定されたスタイルガイド（style.md）で裏付けます。見た目は参照から、コンテンツは主題から得られます。スタイルを定義してもアプリやサイトは変更されません。適用すると変更されますが、ユーザーが保存されたスタイルを指定した場合のみです（保存されたスタイルの適用を参照）。

スタイルは一度調整し、その後にページ変更を行ってください。 ガイドが信頼できる情報源です。すべてのビジュアルをガイドから構築し、修正はすべてまずガイドに反映してください。そうすることで、ガイドから構築されたものがボードで見たものから逸脱するのを防げます。

目測ではなく、測定してください。 視覚は参照が何をするかを理解するのは得意ですが、正確な色、サイズ、間隔を判断するのは苦手です。参照に示されているすべての値は scripts/measure.py から取得されます（それ以外の値はそれらから派生するか、選択されたものであり、その旨が明記されます）。ボードの各サンプルは scripts/verify.py によって同じ方法でレンダリングおよび測定され、一致するまで繰り返されます。ボードは視覚的なままで、数値はガイドとレポートに保持されます。

控えめに始め、その後調整します。 参照はそのスタイルが最も凝縮された状態であり、すべての特性をすべての要素に広げるとやり過ぎになる可能性があります。そのため、最初のパスでは、各特徴的な特性を最も効果を発揮する場所にのみ、測定された値で使用し、ユーザーはレビュー時に個々の特性を強めたり弱めたりします。強度は特性が現れる場所を変更しますが、測定値を変更することはありません。

使用すべきでない場合

• ユーザーが自分のFigmaフレームに完全に一致することを望んでいる場合。フレームを構築してください。
• プロジェクトにすでに design/styles/ に保存されたスタイルがある場合。代わりにそれを適用してください（保存されたスタイルの適用を参照）。

必要条件

ステップ1の前に、python3 <this skill>/scripts/doctor.py を実行してください（Windowsの場合は py -3 を python3 の代わりに使用します）。これによりすべての依存関係がチェックされ、不足しているものがあれば正確なインストールコマンドが表示されます。

• 終了コード0: 準備完了。
• 終了コード1: Pythonパッケージが不足しています。表示されたコマンドをユーザーに示し、待機してください。これらがないと何も測定できません。
• 終了コード2: ブラウザが実行できません。表示されたインストールコマンドを提案してください。ユーザーがインストールできない場合は、画像参照のみで続行し（ライブサイトのスクリーンショットを依頼）、--unverified フラグを付けて check.py を実行し、レビュー時にボードの精度が証明されていないことを伝えてください。
• Pythonがまったくない場合（python3 が見つからず、Windowsで py -3 も見つからない場合）：doctor.py を実行できません。ユーザーに、このスキルにはPython 3.9以降が必要であり、python.orgまたはシステムのパッケージマネージャーからインストールする必要があることを伝え、待機してください。自分でPythonをインストールしないでください。

決定

実行に必要なすべての決定は自分で行い、ボードで停止します。ボードはユーザーにスタイル全体を一目で示すため、ユーザーは事前の質問リストではなく、そこで判断します。

• 決定し、尋ねないでください： 採用する特性と残す特性、各特性の初期強度、スタイル名とスラッグ、サブジェクトリスト、参照が一致する場合の方向性、既存のスタイルとの競合を避ける方法。各選択をガイドに記録し（chosen: ソースまたはTake/Leave行）、後で変更できるようにします。
• 先に進めない場合にのみ、早めに尋ねてください： 参照が読み込めない、サムネイルしかない、依存関係が不足している、または参照が相反する方向（例：薄い製図用紙と暗い青写真）を示しており、それらもプロジェクトも解決しない場合。その場合は、選択肢を提示し、自分の選択を最初に、それ以外は何も含めない短い質問を1つだけ行ってください。
• 停止メッセージは短くしてください。 数値はガイドと verify.md に記載されるため、メッセージには表や測定値を含めません。次のブロックで終了し、その後待機します。

入力が必要です：変更する点はありますか？

ボード: <path to board.html> · 精度: 35/35の測定値が一致（verify.md） 代わりに決定しました： 名前とスラッグ、採用/除外した主要な特性、方向性（選択肢があった場合） 控えめに始めました： 各控えめな特性とその出現場所を簡単に説明

1. 特性を強める/弱める：名前を指定（例：「グリッドを強く」または「赤を弱く」）
2. その他の変更：内容を指定
3. 変更なし：スタイルはそのまま保存

使用方法： スタイルは design/styles/<slug>/ に保存されています。使用したいときに名前を指定してください（例：「<slug> をすべてに適用」）。それまではアプリやサイトは変更されません。

質問ツールを使用する場合は、そこでも「入力が必要です」から始めて質問を配置してください。承認は必要ありません。保存されたスタイルはすべてすぐに使用でき、ユーザーは後で名前を指定して選択します。

ステップ

1. 参照を確認し、測定する。 それぞれを開き、ライブサイトをスクロールして動きを確認します。読み込めない場合やサムネイルしかない場合は、スクリーンショットを依頼してください。タイトルやURLだけで作業しないでください。参照ごとにスクリーンショットを references/ に保存し、見た動きをメモします。PNGを推奨します：JPEGは細い色付きの線を灰色に変えます。

   その後、references/measure.md を読み、採用する可能性のある特性ごとに1つの切り抜き（見出し、ボタン、罫線、背景のパッチ）を測定します。すべて1回の実行で行います。

2. プロジェクトを読む。 スタイルを選択する前に行い、方向性がすでに合うようにします：

   • design/styles/index.md が存在する場合はそれを読み、新しいスタイルが以前のスタイルと競合しないようにし、どのスラッグが使用済みかをメモします。
   • 実際のオブジェクト、素材、プロセス、測定値、または場所を4～8個リストアップし、それぞれにソースを記載します。インデックスの共有サブジェクトリストから始めます。トピックの象徴ではなく実際のものを使用し、ソースがないものは除外します。
   • サイトのトークン（CSSカスタムプロパティ、フレームワーククラス、またはWebflow変数）と、使用されているすべてのコンポーネントタイプ（見出し、ボタン、カード、図、リスト行、ナビゲーション、フォームなど）とその場所を見つけます。ガイドはそれらの見た目を再スタイルし、コンテンツと構造はそのまま維持します。

3. スタイルを読む。 複数の参照がある場合、それらが共有するものを読み取ります。各特性を、それを示す切り抜きに結び付けます。その証拠はガイドに記載され、チャットには記載されません。

   採用：スタイル	残す：1つの参照に属するもの
   パレット、タイプキャラクター、ラインとシェイプ、サーフェス、密度、リズム、階層、動き	アセット、ロゴ、コピー、正確なページレイアウト、一回限りの詳細

   採用する特性ごとに強度を設定し、ガイドのStrength列に記述します：

   強度	特性が現れる場所	使用目的
   quiet	最も効果を発揮する1～3箇所のみ、名前付き	すべての特徴的な特性（アクセントカラー、ディスプレイフェイス、テクスチャ、モチーフ）の開始点
   full	適合するすべてのコンポーネント	すべてのページに必要なもの（ページサーフェス、テキストカラー、ムードを設定しない特性（例：直角のコーナー））の開始点のみ
   strong	適合するすべてのコンポーネント、より多くの領域（より広い面積、特徴的な使用法）	ユーザーがより多くを求めた場合のみ

   控えめな特性を弱めることは、Leave列に移動することを意味します。

   スタイルは自分で決定します（決定を参照）：特性を選択し、スラッグが使用されていない名前（ユーザーがそのスタイルの修正を依頼した場合を除く）、既存のスタイルと競合しない方向性を選択します。参照が解決できない方法で矛盾する場合を除き、ここで停止しないでください。

4. ガイドを書く。 各実行は独自のフォルダを取得し、上書きされません：

   design/styles/
     index.md              すべてのスタイル、適用範囲、共有サブジェクトリスト
     <slug>/
       style.md            ガイド
       board.html          ビジュアルチェック
       measured.json       measure.pyが参照から読み取った内容
       verify.md           ボードが参照とどれだけ一致しているか
       references/         参照スクリーンショット
   

   このスキルから assets/style.md を style.md にコピーし、記入します。すべての見出しを順序通りに保持し、空のセクションには None と記述して、すべてのガイドが同じように読めるようにします。値は正確に記述し（hex、px、フォント名）、別のセッションが参照なしでスタイルを再構築できるようにします。

   • 証拠： 測定された切り抜きごとに1行、measure.py の出力から数値をコピーします。
   • トークン： すべてのトークンはその出所を示します：crop:<name>（値はそこで測定されました。色はその切り抜きの読み取りまたは likely 値と一致する必要があります）、derived: <rule>（測定されたトークンから構築されました。例：ホバートーンやテキストカラーを4.5:1に暗くしたもの）、または chosen: <理由>（参照に示されていないものに使用します。例：状態やボディタイプ）。サイズも測定値から取得します：フォントサイズはキャップハイト（大文字のタイプ切り抜きのインクの高さ）÷ フォントのキャップハイト比です。すべてのルールは実際のサブジェクトソースを指定し、Leave列のものを使用しません。すべてのトークンの前に --<slug>- を付け、スタイルが競合せずにページを共有できるようにします。
   • コンポーネント： 各コンポーネントタイプにプロパティテーブル（プロパティ、トークンまたは正確な値、すべての状態に対して）を提供し、推測なしで再構築できるようにします。トークンが存在する場合はそれを使用します。各特性の強度に従います：控えめな特性の指定された場所の外にあるコンポーネントは、代わりにスタイルのプレーンなトークン（例：ボディフェイスやインクカラー）を使用します。
   • マッピング： ステップ2からの既存のトークン、クラス、変数、およびすべてのコンポーネントタイプを、新しいトークンまたはコンポーネント仕様にマッピングします。これがスタイル適用の基礎となるため、プロジェクト内でマッピングされていないものを残さないでください。何も置き換えない場合は、理由を付けて Keep または Drop と記述します。

5. スタイルを表示し、反復する。 references/board.md を読み、assets/board.html をファイルコピーとして（再入力せずに）コピーし、ガイドだけからプレースホルダーを埋めます：すべてのコンポーネントタイプ（状態付き）、Stylesセクション、非常に小さな実際のセクション1つ、動き。それぞれに data-crop タグを付け、元の切り抜きを示します。次に、参照に対してボードを検証し、ガイドに対してチェックし、すべての失敗を自分で修正します（最大3ラウンド）：

   python3 <this skill>/scripts/verify.py design/styles/<slug>
   python3 <this skill>/scripts/check.py design/styles/<slug>
   

   ユーザーのブラウザでボードを開き、board.html と verify.md へのパスを提供します。

   その後、スタイルと新しいサブジェクトアイテムを design/styles/index.md に追加します（必要に応じて assets/index.md から作成します）。design/styles/ は、このスキルがプロジェクト内で変更する唯一の場所です。

   レビューのために停止 決定セクションのブロックを使用します：変更する点はありますか？精度は verify.md によって示され、3ラウンド後も失敗しているものも含めて表示されるため、ユーザーは方向性と強度のみを判断します。フィードバックの各ラウンドごとに、ガイドを更新し、ボードの影響を受ける部分のみを再構築し、verifyとcheckを1回実行して、ユーザーの変更を元に戻さずに最大3ラウンド修正します。名前またはサブジェクトリストが変更された場合はインデックスを更新し、ボードを再度開いて再度尋ねます。すべてのラウンドは測定して終了するため、保存されたスタイルは常に正確であり、ユーザーがいつ停止しても問題ありません。特性を強めたり弱めたりするには、そのStrengthを変更し（(user feedback) と書き込み）、影響を受けるコンポーネントを変更します。値は測定されたままであるため、これには data-accept は必要ありません。ユーザーが特性を参照自体よりも大胆にしたい場合（より大きく、より重く、より彩度を高く）、それは値を変更します。以下として扱います。ユーザーが要求した変更は、参照から離れる場合でも意図的なものです。トークンに chosen: user feedback を指定し、そのサンプルに data-accept と理由をマークして、verifyが意図的なものとして報告し、失敗させないようにします。ユーザーが詳細ではなく方向性自体を拒否した場合は、トークンを修正せず、ステップ3に戻り、参照を再読み取りし、新しい方向性を選択し、再構築して再度レビューのために停止します。

   実行は、ユーザーが変更する点がないと言うか、他の作業に移ったときに終了します。承認ステップはありません。スタイルを後で使用するには、ユーザーが名前を指定し、スキルがそれを適用します（保存されたスタイルの適用を参照）。

保存されたスタイルの適用

ユーザーが保存されたスタイルを指定して使用する場合（例：「<slug> をすべてに適用」や「価格ページに <slug> を使用」）、references/rollout.md を読み、それに従います。ガイドのみから作業します：ガイドのトークンをプロジェクトに追加し、マッピングを1行ずつ処理し、各コンポーネントをプロパティテーブルから再スタイルします（コンテンツや構造は変更しません）。ステップ1～5はスキップします。スタイルはすでに定義されています。

例

examples/drafting-sheet/style.md と verify.md を読んでください。JSONファイルと board.html は生成された出力であり、data-crop タグを確認する場合にのみ開く価値があります。examples/drafting-sheet/ は完了した実行です：製図シートの参照が8つの切り抜きに測定され、ガイドと36の測定値が一致するボード（1つは意図的）。

参照：技術図面と青写真、成長するホイールに関するサイト向け。

• 採用： 細く正確な線画、罫線グリッド、小さな技術ラベル、密集した注釈。
• 残す： 各図面のタイトルブロック、部品、シートレイアウト。
• サブジェクト： 5.5 mの成長するホイール、実際のリグの寸法、エンジニアリング図面。
• ルール： 青写真の寸法線＋実際のリグの寸法＝測定値で注釈された図。