SaaS 着陆页生成技能

SaaS 着陆页技能

生成一个单页 SaaS 着陆页。代理，请严格遵循以下工作流程。

1. 读取上下文

在编写任何内容之前：

• 读取当前工作目录下的 DESIGN.md。如果缺失，请停止并请求提供。
• 识别配色方案、字体标记和布局原则。
• 注意“代理提示指南”部分——如果与此处指令冲突，它将覆盖此文档。

2. 规划模块

必需的模块，按顺序：

1. 英雄区 —— 标志或文字标记、标题（标语输入）、副标题（1–2 句话）、主要行动号召按钮、次要行动号召按钮。使用 hero_density 参数作为垂直内边距（单位 px）。
2. 功能 —— 3–6 个功能图块。每个：图标、简短标题、1–2 句话描述。
3. 社会证明 —— proof_count 个标志或推荐语。如果为 0，跳过此模块。
4. 定价 —— 2–3 个层级。仅当 has_pricing 为真时包含。
5. 页脚行动号召 —— 大面积的强调色带，包含一个按钮的行动号召。
6. 页脚 —— 极简：链接 + 版权。

3. 应用设计系统

• 所有颜色必须来自 DESIGN.md 的标记。不要编造 hex 值。
• 字体：标题使用声明的展示字体，其他内容使用正文字体。
• 布局：遵守网格、最大宽度和模块间距规则。
• 组件：使用声明的按钮/卡片/输入模式。如果 DESIGN.md 的“深度与层级”指示最小化，则不要添加阴影。
• 强调色：只在英雄区使用一次，在页脚行动号召中使用一次，并用于所有链接。不要过度使用。

4. 编写文件

输出单个自包含的 index.html：

• 所有 CSS 内联在 <head> 中的 <style> 块内。
• 如果 DESIGN.md 的字体无法从 Google Fonts 等加载，则提供系统字体回退。
• 无外部 JS。
• 语义化的 HTML（<header>、<main>、<section>、<footer>）。
• 每个可编辑元素添加 data-od-id="<unique-slug>" 属性，以便主机应用的评论模式能够定位。

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。