AndrewTaras/profpak-landing

HTMLモジュールの生成

適用タイミング

ユーザーが新しいランディングページモジュール（Header、Hero、Problems、Products、Offer、Stats、Process、About、FAQ、ContactForm、Footer、ChatWidget）の作成を依頼した場合。

プロセス

1. ユーザーからモジュールの契約（「Data In → HTML Out」ブロック）を受け取る。
2. 契約内のすべてのTailwindクラスがデザインシステムに存在することを確認する（AGENTS.md参照）。
3. 契約に色が含まれる場合は、デザインシステムのクラスのみを使用する：
   • bg-industrial-blue、bg-industrial-orange、bg-stretch-cyan、bg-polymer-silver
   • bg-blue-500、bg-orange-500などの標準的なTailwindパレットは使用禁止。
4. 契約に厳密に従ってHTMLコードを生成する。
5. HTMLのみを返す — マークダウンのラッパーや説明文は不要。

生成ルール

画像プレースホルダー

契約に「背景画像はプレースホルダー」と指定されている場合、以下を使用：

• hero背景の場合：https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• 商品カードの場合：https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• 「メーカーについて」ギャラリーの場合：https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

アイコン

すべてのアイコンはLucideを使用：

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

プロジェクトでよく使われるアイコン：shield、truck、package、droplet、zap、check-circle-2、phone、message-circle、map-pin、factory、microscope、globe-2、leaf、apple、pill、settings-2、hand。

CTAボタン（メイン）

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  テキスト <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

サブボタン

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  テキスト
</a>

商品カード

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATEGORY</p>
    <h3 class="text-xl font-extrabold text-slate-900">名称</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">説明</p>
  </div>
</article>

セクション（ラッパー）

<section id="名前" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- コンテンツ -->
  </div>
</section>

グリッド

• 商品：grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• 統計：grid grid-cols-2 md:grid-cols-4 gap-6
• プロセス：grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ：grid grid-cols-1 md:grid-cols-2 gap-4
• 課題：grid grid-cols-1 md:grid-cols-3 gap-8

出力前チェックリスト

• 契約のすべてのクラスが使用されている
• デザインシステムのクラスのみ使用されている（bg-blue-500などは不使用）
• レスポンシブプレフィックス（sm:、md:、lg:）が適用されている
• 画像にalt属性とloading="lazy"が設定されている
• インタラクティブ要素にaria-labelまたは意味のあるテキストが設定されている
• インラインスタイルがない
• HTMLの周りにマークダウンのラッパーがない
• コードの前後に説明文がない

呼び出し例

ユーザー：

次の契約に従ってHeroコンポーネントを生成してください：bgImage — プレースホルダー、headline — 「ストレッチフィルム — あなたの貨物を確実に保護」、bullets — [shield: 確実な固定、droplet: 湿気からの保護、zap: 高い強度、package: 経済的な使用量]、ctaPrimary — 「バッチを見積もる」→ https://wa.me/79064680377

あなた：

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

（HTMLのみ、説明は不要）