image-to-code

スキル：画像からコードへ

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの 内容を推測しないでください。

ビジュアルの参照元を、一度きりの模写ではなく、実際のデザインシステムとして再構築します。著作権で保護された画像やブランドアセットは流用せず、システム（色、タイポグラフィ、スペーシングの表現）を再現してください。

手順

1. デザイナーの視点で参照元を読み解きます。 次の要素を推測し、書き留めます。
   • パレット：主となるサーフェスの系統を 1 つ、テキストの色、主要なアクションカラーを 1 つ、アクセントカラーは最大 1 つにします（色相をサンプリングし、適当な hex 値を選ばないでください）。
   • タイポグラフィ：フォントの印象（ジオメトリック／グロテスク／セリフ）、サイズの段階、ディスプレイと本文のコントラスト、ウェイト。
   • スペーシングと密度：基本単位、セクションのリズム、カードのパディング。ゆとりがあるか、コンパクトか。
   • 角丸と奥行き：角丸の表現（シャープ／ソフト／ピル型）、シャドウと細い境界線のどちらで区切るか。
   • レイアウトの類型と順序：範囲を限定したヒーロー／非対称の分割／高密度のベントー／エディトリアルなスタック（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Variance Mandate）。
2. 近い既知のシステムを基準にします。 類似するものがあれば、${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md を参照するか、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py search <term> を実行し、そのレシピを採用して判断を安定させます。
3. 推測した値からトークンテーマを作成します → 3 階層の DTCG（design-tokens スキル）。theme.css を 1 つ生成します。${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py と ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py を使い、すべての色の組み合わせを（ライトモードとダークモードの両方で）検証します。サンプリングしたブランドカラーが AA に適合しない場合は調整します。美的な好みより POUR を優先してください。
4. レイアウトとコンポーネントを再構築します。${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md と ${CLAUDE_SKILL_DIR}/../../../components/* を使い、トークン駆動で実装します。共有プリミティブレイヤーを 1 つ用意し、8 つの状態をすべて実装し、a11y を組み込み、絵文字を使わず（lucide を使用）、テーマも 1 つにします。汎用的なデザインに後退しないよう、好み（design-taste.md）も反映してください。
5. 参照元と照らし合わせて検証します。レンダリングしてスクリーンショットを撮り、参照元と並べて比較します。node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs、lint_hardcodes.py、taste_audit.mjs、および npm run verify を実行します。

検証（完了の定義）

• npm run verify が 100% であること（トークンの解決、ライトモードとダークモードのコントラスト AA、ハードコード／絵文字なし、実レンダリングでの WCAG 適合）。
• 再構築した UI が、推測した 1 つのトークンテーマを使用していること。セクションごとのパレットは使用しません。
• 完成結果のスクリーンショットが、参照元のデザイン表現と目に見えて一致していること。

正直な限界：一致させるのはデザインのシステムであり、ピクセル単位の完全な複製ではありません。参照元の写真、ロゴ、著作権で保護されたコピーを再現しないでください。独自のものか、一般的なプレースホルダーに置き換えてください。