pricing-page

Pricing Page Skill

有効な DESIGN.md に準拠した、1 画面で完結する料金ページを作成します。

ワークフロー

1. 有効な DESIGN.md を読む（上に挿入されています）。その色、タイポグラフィトークン、コンポーネントパターンのみを使用します。
2. 分類する：概要に基づいてプロダクトを分類し、プランの構成を選びます。
   • 3 段階（最も一般的）：Free / Pro / Team または Starter / Growth / Enterprise。
   • 概要に「scale」または「enterprise plus」とある場合は 4 段階。
   • 「individual / business」または「personal / pro」とある場合は 2 段階。
3. セクションを次の順に配置します。
   1. ヒーロー — ページタイトル（例：「Pricing」）、1 行のサブ見出し、任意の月額／年額切り替え。
   2. プランカード — 各段階につき 1 枚のカード。各カードには、プラン名、価格（数字にはディスプレイフォントと大きめのサイズを使用）、1 行の位置づけ、4〜6 個の箇条書きの機能、主要 CTA を含めます。おすすめのプランには、デザインシステムのアクセントボーダーまたは小さなバッジを付けます。
   3. 比較表 — 機能の行 × プランの列で構成し、✓ / — / 値のセルを使用します。機能は 2〜3 個の論理的なセクション（Core、Collaboration、Support、Security など）に分類します。ヘッダーは固定表示にします。
   4. FAQ — 折りたたみ可能な Q&A を 4〜6 項目用意します。折りたたみには <details><summary> を使用し、JS は使用しません。
   5. フッター CTA — 1 行のテキストとボタン。アクセントバンドは控えめに使用します。
4. 自己完結型の HTML ドキュメントを 1 つ作成します。
   • <!doctype html> から </html> までを含め、CSS はインラインの <style> にまとめます。
   • プランカードの行と比較表には CSS Grid を使用します。
   • 各プランカードと各テーブル行に data-od-id を付けます。
5. 金額の表示：大きな数字にはディスプレイフォントを、通貨記号と「/mo」には本文用フォントを使用します。サイズは DESIGN.md のスケールに合わせます。
6. セルフチェック：
   • 料金はプロダクトに見合った現実的な金額にします（「$X / month」にはしません）。
   • アクセントはおすすめプランと CTA 1 つのみに使用します。
   • 比較表は幅 1024px で適切に表示され、幅 768px 未満では列見出しを回転するか横スクロールを使って読みやすく表示されます。
   • 架空の機能名は使いません。各行には実際のプロダクトにありそうな機能を記載します。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に 1 文だけ記載し、その後には何も記載しません。