web-prototype

Web プロトタイプスキル

同梱のシードとレイアウトライブラリを使用して、単一の自己完結型 HTML プロトタイプを作成します。CSS を一から書いてはいけません。 シードには、適切なデフォルト設定（タイポグラフィ、余白、アクセントの使用量）がすでに含まれています。それらを組み合わせて仕上げてください。

リソース一覧

web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

ワークフロー

ステップ 0 — 事前準備（作業を始める前に一度実施）

1. assets/template.html を最初から最後まで読みます — 少なくとも <style> ブロックまでは確認してください。references/layouts.md の冒頭にあるクラス一覧には、ここで定義する必要があるクラスがすべて記載されています。定義されていないクラスがあれば、セクションごとにインラインで再定義するのではなく、<style> に追加してください。
2. references/layouts.md を読みます。利用可能なセクションのひな形を把握してください。対応するものがないセクションタイプは作成せず、最も近いレイアウトを選んで調整してください。
3. 有効な DESIGN.md（すでにシステムプロンプトに挿入されています）を読みます。シード内の6つの :root 変数に、そのデザインシステムの色を割り当ててください。新しいトークンは追加しないでください。

ステップ 1 — シードから index.html を準備

プロジェクトの標準ファイル（通常は index.html）のシードとして、assets/template.html を使用します。

6つの :root 変数を、有効なデザインシステムのトークンに置き換えます。ページの <title> とトップナビのブランドも置き換えてください。

ステップ 2 — セクション一覧を計画

コピーを書く前にレイアウトを選んでください。 デフォルトの構成（layouts.md より）：

ページの種類	デフォルトの構成
ランディングページ	1 ヒーロー → 3 機能 → 4 統計 または 5 引用 → カスタム分割 → 6 CTA
マーケティング／エディトリアル	1 ヒーロー（中央寄せ）→ 7 ログリスト → 6 CTA
料金	1 ヒーロー（中央寄せ）→ 8 比較表 → 6 CTA
ドキュメントのインデックス	1 ヒーロー（中央寄せ）→ 7 ログリスト（ドキュメントのセクション）→ 6 CTA

作成前に、選んだ一覧をユーザーに一文で伝えてください。今なら簡単に変更できますが、HTML を200行書いた後ではそうはいきません。

ステップ 3 — 貼り付けて内容を入力

選んだレイアウトごとに、layouts.md の <section> ブロックをプロジェクトの HTML の <main id="content"> 内にコピーします。角括弧で囲まれた [REPLACE] の文字列は、ユーザーの依頼内容に沿った具体的な文言に置き換えてください。埋め草は使わないでください — 空欄になる項目がある場合、そのセクションは適切ではありません。別のレイアウトを選んでください。すべての .ph-img ブロックはレイアウトの骨組みとして扱い、セクションに画像が必要な場合は、以下の「実物を優先する」ルールに従って置き換えてからセルフチェックを行ってください。

ステップ 4 — セルフチェック

references/checklist.md を最初から最後まで確認してください。先に進む前に、すべての P0 項目に合格する必要があります。P1 項目も合格を目指してください。P2 は加点項目です。

ステップ 5 — プロジェクトファイルを作成

完成した HTML を標準のプロジェクトファイル（通常は index.html）に書き込みます。その後、ファイル名と内容を説明する短い通常のアシスタント向け要約を1つ送ってください。チャットには HTML ソース全体を出力しないでください。

厳守事項（シードがこれらの大半を保護しています。無理に変更しないでください）

• アクセントカラーは1色、画面ごとに使用は最大2回までです。 デフォルトでは、アイブロウと主要なCTAで予算を使います。
• ディスプレイフォントはセリフ体（シード内の Iowan Old Style／Charter／Georgia）です。本文にはサンセリフ体、数値・キャプション・アイブロウには等幅フォントを使用します。
• 実際の画像を使用し、リモート画像への直リンクはしないでください。 .ph-img は一時的なレイアウト用の足場であり、最終的なデザインのデフォルトではありません。実在する名称のある対象には、正しい実画像を検索または取得してプロジェクトにコピーし、相対パスで参照してください。代替画像を生成、描画、創作してはいけません。説明的または雰囲気を表す題材には、取得した適切な実写写真を優先し、画像生成は最後の手段としてのみ使用してください。要件を満たす画像素材を入手できない場合は、意図を明示した .ph-img をそのまま残し、納品概要で制約を開示してください。
• 実画像の縦横比を維持してください。 取得した画像の本来の幅と高さを確認し、.ph-img の足場をすべて <img class="content-img"> に置き換えて、一致する width 属性と height 属性を設定してください。実画像に .ph-img、.wide、.portrait、.square をコピーしてはいけません。コンテンツ画像ではフレーム全体を表示してください。object-fit: cover は、意図的に切り抜ける装飾的な塗りつぶしにのみ使用してください。シードの .content-img ルールでは、片方の軸を自動に保ちながら、縦横が極端に長い画像をビューポート内に収めます。
• モバイルへのリフローは、シードの920pxのメディアクエリですでに機能しています。 固定幅を追加して動作を損なわないでください。
• コメントモードで対象にできるよう、すべての <section> に data-od-id を付けてください。

出力仕様

ファイルシステムを使用する場合、プロジェクトファイルを正とします。

index.html

OpenDesign は、書き込まれたプロジェクトファイルからプレビューを生成します。同じ生成ターンで、ソースコードの <artifact> ブロックも出力しないでください。

ファイルを書き込んだ後、短い概要を1つだけ記載してください。それ以降は何も出力しないでください。