SaaS 着陆页技能
生成一个单页 SaaS 着陆页。代理，请严格遵循以下工作流。
1. 读取上下文
在编写任何内容之前：
- 读取当前工作目录中的
DESIGN.md。如果缺少，请停止并要求提供一个。 - 识别颜色调色板、排版标记和布局原则。
- 注意“代理提示指南”部分 —— 如果与本说明冲突，则以该指南为准。
2. 规划区块
必须包含的区块，按顺序：
- 英雄区 — 徽标/文字标、标题（标语输入）、副标题（1-2句话）、主要行动号召按钮、次要行动号召按钮。使用
hero_density参数作为垂直内边距（单位 px）。 - 功能展示 — 3-6 个功能卡片。每个卡片：图标、短标题、1-2 句话描述。
- 社交证明 —
proof_count个徽标或推荐语。如果为 0，则跳过此区块。 - 定价 — 2-3 个套餐。仅当
has_pricing为 true 时包含。 - 页脚行动号召 — 使用强调色的大背景色带，包含一个按钮的行动号召。
- 页脚 — 最简形式：链接 + 版权信息。
3. 应用设计系统
- 所有颜色必须来自
DESIGN.md的标记。不得自行发明十六进制值。 - 排版：标题使用声明中的显示字体，其他内容使用正文字体。
- 布局：遵循网格、最大宽度和区块间距规则。
- 组件：使用声明中的按钮/卡片/输入模式。如果 DESIGN.md 的“深度与高度”说明为“最小”，则不得添加阴影。
- 强调色：仅在英雄区使用一次，页脚行动号召区使用一次，以及所有链接中使用。不得滥用。
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标记是将元素连接到评论模式的方式。希望兼容评论模式的技能必须在其输出中进行注释。
有关完整协议，请参见 ../../skills-protocol.md。