生成 HTML 模組
何時使用
使用者要求建立新的登陸頁面模組：Header、Hero、Problems、Products、Offer、Stats、Process、About、FAQ、ContactForm、Footer 或 ChatWidget。
流程
- 從使用者取得模組合約（「Data In → HTML Out」區塊）。
- 檢查合約中的所有 Tailwind 類別是否都存在於設計系統中（請參閱 AGENTS.md）。
- 如果合約提到了顏色——只能使用設計系統中的類別：
bg-industrial-blue,bg-industrial-orange,bg-stretch-cyan,bg-polymer-silver- 禁止使用
bg-blue-500,bg-orange-500等任何標準 Tailwind 調色盤。
- 嚴格按照合約生成 HTML 程式碼。
- 返回僅 HTML——不含 markdown 包裝，不含任何解釋。
生成規則
佔位圖像
如果合約中指定「背景圖片為佔位符」，請使用：
- 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或具有有意義的文字 - 無 inline 樣式
- HTML 外部無 markdown 包裝
- 程式碼前後無任何解釋
呼叫範例
使用者：
請根據合約生成 Hero 元件：bgImage — 佔位符，headline — «Stretch film — 您的貨物可靠保護»，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，無解釋)