SaaS 落地页技能
生成一个单页 SaaS 落地页。代理，请严格按照以下工作流程执行。
1. 读取上下文
在编写任何内容之前：
- 读取当前工作目录中的
DESIGN.md文件。如果缺失，请停止并要求提供。 - 识别颜色调色板、排版令牌和布局原则。
- 注意“Agent Prompt Guide”部分——如果与本指南存在冲突，以该部分为准。
2. 规划区块
必要区块，按顺序如下：
- 英雄区 — 标志或文字商标、标题（标语输入）、副标题（1-2句话）、主要行动号召按钮、次要行动号召按钮。使用
hero_density参数作为垂直内边距（单位 px）。 - 功能 — 3-6个功能块。每个功能块包含：图标、简短标题、1-2句话描述。
- 社交证明 —
proof_count个标识或推荐语。如果为 0，则跳过此区块。 - 定价 — 2-3个价格方案。仅当
has_pricing为 true 时包含。 - 页脚CTA — 一个大面积强调色带，包含一个按钮形式的行动号召。
- 页脚 — 最简形式：链接 + 版权信息。
3. 应用设计系统
- 所有颜色必须来自
DESIGN.md的令牌。不要自行编造十六进制值。 - 排版：标题使用声明的展示字体，其他所有内容使用正文字体。
- 布局：遵循网格、最大宽度和区块间距规则。
- 组件：使用声明的按钮/卡片/输入框模式。如果
DESIGN.md的“深度与层级”部分标明为极简，则不要添加阴影。 - 强调色：仅在英雄区使用一次，在页脚CTA使用一次，并用于所有链接。不要过度使用。
4. 编写文件
输出一个独立的 index.html 文件，要求如下：
- 所有 CSS 内联在
<head>中的<style>块内。 - 如果
DESIGN.md中的字体无法从 Google Fonts 等加载，则使用系统字体作为后备。 - 不包含外部 JavaScript。
- 使用语义化 HTML（
<header>、<main>、<section>、<footer>）。 - 每个可编辑元素标记
data-od-id="<唯一标识符>"，以便宿主应用的评论模式可以定位到它。
5. 自检
在完成之前，请确认：
- 所有文本都是有意义的内容，而非 Lorem Ipsum（使用
product_name和tagline输入；其余部分生成合理的具体文案）。 - 没有损坏的颜色引用（每个 CSS 颜色值都存在于
DESIGN.md的调色板中，或是有效的 alpha 变体/后备颜色）。 - 响应式断点与
DESIGN.md的“响应式行为”部分一致。 - 页面在 1440w、768w 和 375w 宽度下看起来良好（在脑海中模拟）。
- 强调色总共使用不超过两次。
6. 完成
只生成 index.html。不要生成单独的 CSS 文件、JS 文件或 README。
供阅读本文的技能作者参考
这是一个最小但完整的技能。目录结构如下：
saas-landing-skill/
├── SKILL.md ← 你在这里
└── assets/
└── base.html （可选的起始模板；本技能不使用）
注意事项：
od:开头的元数据块对于仅兼容 Claude-Code 的场景是可选的，但添加它可以激活 OD 的类型化输入、滑块、预览元数据和能力门控。- 元数据块下方的工作流程是纯 Markdown，代理将其读取为系统提示。
DESIGN.md被视为协作伙伴而非覆盖规则。技能允许代理在需求冲突时覆盖其规则，但绝不能自行发明新的令牌。data-od-id标记是我们将元素连接到评论模式的方式。希望支持评论模式的技能必须在其输出中标注这些标记。
详情请参阅 ../../docs/skills-protocol.md 中的完整协议。