SaaS 落地页技能
生成一个单页 SaaS 落地页。代理，请严格遵循以下工作流程。
1. 读取上下文
开始编写之前：
- 读取当前工作目录中的
DESIGN.md。如果缺失，请停止并要求提供。 - 识别颜色调色板、排版标记和布局原则。
- 注意“代理提示指南”部分——如果与本指令冲突，以其为准。
2. 规划区块
必需的区块，按顺序：
- 英雄区 — Logo 或文字商标、标题（标语输入）、副标题（1–2 句）、主 CTA、辅助 CTA。使用
hero_density参数作为垂直内边距（以 px 为单位）。 - 功能展示 — 3–6 个功能卡片。每个：图标、简短标题、1–2 句描述。
- 社交证明 —
proof_count个 Logo 或推荐语。如果为 0，则跳过该区块。 - 定价 — 2–3 个套餐。仅当
has_pricing为 true 时才包含。 - 底部 CTA — 宽大的强调色条，带一个按钮的号召性用语。
- 页脚 — 最小化：链接 + 版权信息。
3. 应用设计系统
- 所有颜色必须来自
DESIGN.md的标记。不要自创十六进制值。 - 排版：标题使用声明的展示字体，其他所有内容使用正文字体。
- 布局：遵循网格、最大宽度和区块间距规则。
- 组件：使用声明的按钮/卡片/输入模式。如果
DESIGN.md的“深度与高度”部分表明使用最小化阴影，则不要添加阴影。 - 强调色：仅在英雄区使用一次，在底部 CTA 中使用一次，以及用于所有链接。不要过度使用。
4. 编写文件
输出一个独立的 index.html，并满足：
- 所有 CSS 内联在
<head>中的<style>块内。 - 如果
DESIGN.md的字体无法从 Google Fonts 等处加载，则使用系统字体回退。 - 无外部 JS。
- 语义化 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标记用于将元素关联到评论模式。想要评论模式兼容性的技能必须在其输出中标注这些。
参见 ../../skills-protocol.md 了解完整协议。