生成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 - 常见问题：
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周围无markdown包装
- 代码前后无解释
调用示例
用户：
按合约生成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，无解释)