SaaS 着陆页技能
生成一个单文件的 SaaS 着陆页，用于销售一个产品、一个核心卖点。
工作流程
- 读取当前
DESIGN.md（已注入上方）。英雄区、卡片、行动号召等元素均从其令牌中提取颜色、字体、间距和圆角。不要自行创造数值——仅使用var(--token)格式。 - 命名产品与承诺。根据需求描述，确定具体的产品名称、一句承诺以及一个主要行动（开始试用/预约演示/立即开始）。撰写真实文案——不要使用“功能一 / 你的公司名在此”等占位符。
- 按顺序布局以下模块：
- 粘性导航：左侧产品名称，4-5 个链接，右侧主要行动号召按钮。
- 英雄区：一个 H1（最多约 8 个字）、一段支撑性段落、两个按钮（主要+次要）、一个带边框的产品视觉占位图。
- 客户标识条：5-6 个客户名称，灰色，均匀分布。
- 功能网格：6 张卡片，每张卡片包含一个短标题（≤5 个字）和 1-2 句话的收益描述——而非功能清单。
- 用户评价：一条引用，包含姓名、角色、公司。
- 定价预告：2-3 个方案卡片，价格使用需求中的货币单位，每张卡片最多 5 个功能点，突出其中一个方案。
- 结尾行动号召横幅 + 简洁页脚（产品/公司/法律三列）。
- 坚守品质标准：
- 页面仅一个 H1；每个模块使用 H2；通过字号而非颜色体现层级。
- 主色仅用于交互元素——绝不做装饰。
- 模块间距使用间距缩放（
--section-y-*或空格令牌）；交替使用表面/背景色带以增加呼吸空间。 - 每个交互元素都有可见的焦点状态；按钮高度 ≥44px；灰色文字在背景色带上的对比度 ≥4.5:1。
- 响应式：768px 以下改为单列布局，导航简化为堆叠或无汉堡菜单的链接行。
- 输出一个自包含的
index.html——内嵌<style>，无外部请求，除非需求明确要求，否则不包含 JavaScript。
反模式
- 英雄区使用默认渐变导致覆盖文字无法阅读。
- 六个相同大小的功能卡片全部声称“强大”。
- 每屏使用超过一个强调色；ember/红色仅用于错误提示。
- 使用 Lorem ipsum、“释放……的力量”、“彻底革新……”等套路文案。