SaaS 落地页技能
生成单页SaaS落地页。代理请严格按照以下工作流程执行。
1. 读取上下文
在编写任何内容之前：
- 读取当前工作目录中的
DESIGN.md。如果文件缺失，请停止并请求提供。 - 识别颜色调色板、排版令牌和布局原则。
- 注意“代理提示指南”部分——若与本指令冲突，以该指南为准。
2. 规划区域
按顺序包含以下必需区域：
- 英雄区（Hero） — 标志或文字标志、标题（标语输入）、副标题（1-2 句话）、主要行动号召（CTA）、次要行动号召（CTA）。使用
hero_density参数作为垂直内边距（单位：px）。 - 功能展示（Features） — 3-6 个功能卡片。每个卡片包含：图标、短标题、1-2 句话描述。
- 社交证明（Social Proof） —
proof_count个标志或推荐语。如果数量为 0，则跳过此区域。 - 定价（Pricing） — 2-3 个套餐。仅在
has_pricing为 true 时显示。 - 页脚行动号召（Footer CTA） — 大尺寸强调色带，包含一个按钮行动号召。
- 页脚（Footer） — 最简内容：链接 + 版权信息。
3. 应用设计系统
- 所有颜色必须来自
DESIGN.md中的令牌。不要自行发明十六进制值。 - 排版：标题使用声明的显示字体，其他内容使用正文字体。
- 布局：遵循网格、最大宽度和区域间距规则。
- 组件：使用声明的按钮/卡片/输入模式。如果
DESIGN.md中的深度与高度部分要求最简，则不添加阴影。 - 强调色：仅在英雄区和页脚行动号召各使用一次，且仅用于所有链接。不要过度使用。
4. 编写文件
输出一个独立的 index.html，要求如下：
- 所有 CSS 内联在
<head>中的<style>标签内。 - 如果
DESIGN.md中的字体无法从 Google Fonts 等加载，则使用系统字体后备。 - 无外部 JS。
- 使用语义化 HTML（
<header>、<main>、<section>、<footer>）。 - 每个可编辑元素标记
data-od-id="<唯一标识符>"属性，以便宿主应用的评论模式定位。
5. 自检
在完成之前，请检查：
- 所有文本内容有意义，非占位符文字（使用
product_name和tagline输入；其余内容生成合理的具体副本）。 - 无颜色引用错误（每个 CSS 颜色值均来自
DESIGN.md的调色板或有效的透明/后备变体）。 - 响应式断点与
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标签是将元素连接到评论模式的关键。需要评论模式兼容性的技能必须对其输出进行标注。
将这些规则保留在包内部约定中；不要依赖可能不会随技能一起传播的仓库级协议文件。