ingest-screenshot

スクリーンショットの取り込み

Claude のビジョン機能を使って、静止画像からデザイントークンを抽出します。正直な注意点：ソースファイルがない場合、正確な HEX コードはおおよその値になります。Claude はスクリーンショットよりもコードからのほうが、UI をより正確に再現できます。

手順

1. 画像のパスを解決する： $0。Bash(file <path>) で画像（png/jpg/webp/heic）であることを確認します。

2. マルチモーダルの Read で読み込む： これにより、画像がビジョン機能で読み込まれます。Claude は画像を認識できます。

3. 体系的に分析する。 画像から、次の項目を特定します。

   • 主要な色 — HEX のおおよその値を付けて、5～8 個の色見本を選びます。不確かな色には「#2A4B6D のように見えますが、ビジョン機能による HEX はおおよその値です」のように注記します。
   • タイポグラフィ — フォントファミリー（Inter に似たもの、セリフ体に似たもの、ディスプレイ体、等幅体）、サイズ（相対値）、ウェイト（ライト／レギュラー／ミディアム／ボールド）、行間の印象
   • スペーシングのリズム — 余白とパディングから基本単位（4/6/8px）を推定します
   • 角丸 — 角ばった形状／小／中／ピル型
   • コンポーネントのパターン — 表示されている要素の種類（ボタン、カード、ナビゲーション、入力欄）
   • 美的な傾向 — ミニマル／高密度／装飾的／遊び心がある／企業的／ブルータリスト

4. 出力を作成する：

   artifacts/ingested/screenshot-<timestamp>-tokens.json
   

   ingest-github と同じスキーマに、"source": { "image": "<path>", "ingested_at": "..." } と各カテゴリの "confidence": "low|medium|high" を加えます。

5. 信頼度を示す： 不確かな値ごとに、"confidence" フィールド（low | medium | high）を追加します。ビジョン機能から得られた HEX コードの信頼度は low または medium にします。

6. 次のステップを提案する：

   • 「トークンを抽出して保存しました。色はおおよその値です。照合用のソースファイル（CSS、デザインシステム、ブランドガイド）はありますか？」
   • 次のステップとして、/create-design-system を実行するか、これらを出発点として /make-deck または /interactive-prototype を開始します。

制限事項 — ユーザーに伝えること

• ビジョン機能が返す HEX はおおよその値であり、正確な値ではありません。本番環境で正確な値が必要な場合は、ソースファイルを提供してください。
• 複数の色が重なっている場合、Claude はすべてのバリエーションではなく、代表的な色を選びます。
• タイポグラフィの認識は不確かです。「Inter のように見える」ことは、「Inter である」ことを意味しません。
• ピクセル寸法を読み取るには、画像の実際の解像度が必要です。

ワークフローとの連携

取り込み後は必ず、正確な値を確定するため、実際のソース（Figma、コードベース）と照合することを提案します。スクリーンショットはあくまで出発点となる方向性であり、絶対的な正解ではありません。