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 — シードをコピーする

assets/template.html をプロジェクトルートに index.html としてコピーします。6 つの :root 変数をアクティブなデザインシステムのトークンに置き換えます。ページの <title> とトップナビのブランドを置き換えます。

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

コピーを書く前にレイアウトを選びます。 デフォルトのリズム（layouts.md より）：

ページの種類	デフォルトのリズム
ランディング	1 hero → 3 features → 4 stats または 5 quote → カスタム分割 → 6 cta
マーケティング / エディトリアル	1 hero-center → 7 log list → 6 cta
プライシング	1 hero-center → 8 comparison table → 6 cta
ドキュメントインデックス	1 hero-center → 7 log list（ドキュメントのセクション）→ 6 cta

選んだ一覧を、書く前に一文でユーザーに伝えてください — そうすれば今なら安価に方向転換できますが、200 行の HTML を書いた後ではそうはいきません。

ステップ 3 — 貼り付けて埋める

選んだ各レイアウトについて、layouts.md の <section> ブロックを index.html の <main id="content"> にコピーします。角括弧で囲まれた [REPLACE] 文字列を、ユーザーのブリーフから取った実際の具体的なコピーに置き換えます。埋め草は禁止です — スロットが空なら、そのセクションは誤った選択です。別のレイアウトを選んでください。

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

references/checklist.md を上から下まで通してください。すべての P0 項目が合格してから次に進みます。P1 項目は合格すべきです。P2 はボーナスです。

ステップ 5 — 成果物を出力する

index.html を <artifact> タグで包みます。何があるかを説明する一文をその前に置きます。</artifact> の後で停止します。

厳守事項（シードがこれらのほとんどを保護します — 逆らわないでください）

• 単一のアクセントを、画面ごとに最大 2 回まで使用。 Eyebrow + プライマリ CTA がデフォルトの予算です。
• ディスプレイフォントはセリフ体（シードでは Iowan Old Style / Charter / Georgia）。本文はサンセリフ体。数値、キャプション、Eyebrow はモノスペース体。
• 画像はプレースホルダーであり、外部 URL ではありません。 .ph-img クラスを使用してください — ストックフォトの CDN にリンクしないでください。
• モバイルのリフローは 920px のシードのメディアクエリで既に機能します。 固定幅を追加して壊さないでください。
• すべての <section> に data-od-id を付けて、コメントモードがそれを対象にできるようにします。

出力契約

<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>

成果物の前に一文。その後に何も。