--- name: saas-landing description: | 单页 SaaS 着陆页，含 Hero、特性、社会证明、定价和 CTA。尊重设计系统的颜色/排版/布局令牌。触发关键词："SaaS 着陆页"、"营销页"、"产品着陆页"。 triggers: - "saas landing" - "marketing page" - "product landing" - "SaaS 着陆页" - "营销页" - "产品着陆页" - "产品官网" platform: desktop preview: type: html entry: index.html --- # SaaS 着陆页模板生成一个单页 SaaS 着陆页。严格按照以下工作流程执行。 ## 1. 确定设计令牌写任何东西之前： - 确定颜色调色板、排版令牌和布局原则。 - 使用六个 `:root` 变量：`--bg`、`--surface`、`--fg`、`--muted`、`--border`、`--accent`。 - 注意：强调色在 Hero 中用一次，在底部 CTA 中用一次，用于所有链接。不要满页使用。 ## 2. 规划区块必需区块，按顺序： 1. **Hero** —— Logo 或文字商标，标题（从 tagline 输入），副标题（1-2 句），主 CTA，次 CTA。 2. **特性** —— 3-6 个特性卡片。每个：图标、短标题、1-2 句描述。 3. **社会证明** —— Logo 墙或推荐语。如果为 0，跳过此区块。 4. **定价** —— 2-3 个档位。仅在 `has_pricing` 为 true 时包含。 5. **底部 CTA** —— 大块强调色区域，一个按钮行动号召。 6. **页脚** —— 精简：链接 + 版权。 ## 3. 应用设计系统 - 所有颜色必须来自设计令牌。不要发明 hex 值。 - 排版：标题用声明的主字体，其他用正文字体。 - 布局：尊重网格、最大宽度和区块间距规则。 - 组件：使用声明的按钮/卡片/输入模式。 - 强调色：Hero 中用一次，底部 CTA 中用一次，用于所有链接。不要满页使用。 ## 4. 编写文件输出一个自包含 HTML： - 所有 CSS 内联在 `` 的 `