saas-landing

SaaS 落地页技能

生成一个单页 SaaS 落地页。Agent，请严格遵循此工作流。

1. 阅读上下文

开始编写之前：

• 阅读当前工作目录中的 DESIGN.md。如果文件缺失，请停止并索要该文件。
• 确认配色方案、排版标记和布局原则。
• 留意“Agent Prompt Guide”部分——如果与此处的任何指令冲突，以该部分为准。

2. 规划版块

按顺序包含以下必需版块：

1. 主视觉区 — 徽标或文字标识、标题（标签语输入）、副标题（1–2 句）、主要 CTA、次要 CTA。将 hero_density 参数用作垂直内边距，单位为 px。
2. 功能 — 3–6 个功能卡片。每个卡片包含：图标、简短标题、1–2 句正文。
3. 社会证明 — proof_count 个徽标或推荐语。如果为 0，则跳过此版块。
4. 定价 — 2–3 个套餐。仅当 has_pricing 为 true 时包含。
5. 页脚 CTA — 大面积强调色背景，包含一个按钮式行动号召。
6. 页脚 — 简洁布局：链接 + 版权信息。

3. 应用设计系统

• 所有颜色必须取自 DESIGN.md 中的标记。不得自行编造十六进制颜色值。
• 排版：标题使用指定的展示字体，其他内容使用正文字体。
• 布局：遵循网格、最大宽度和版块间距规则。
• 组件：使用指定的按钮、卡片和输入框样式。如果 DESIGN.md 的 Depth & Elevation 说明应尽量减少阴影，则不得添加阴影。
• 强调色：主视觉区仅使用一次强调色，页脚 CTA 仅使用一次，所有链接均使用强调色。不要让页面充斥强调色。

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 的 Responsive Behavior 部分。
• 页面在 1440w、768w 和 375w 下均显示良好（请在脑海中模拟）。
• 强调色总共使用不超过两次。

6. 完成

只编写 index.html。不要生成单独的 CSS 文件、JS 文件或 README。

---

供将本文作为参考的技能作者阅读

这是一个精简但完整的技能。结构如下：

saas-landing-skill/
├── SKILL.md    ← you are here
└── assets/
    └── base.html    (optional starter template; this skill doesn't use one)

请注意：

• od: front-matter 块对于仅兼容 Claude-Code 的场景是可选的，但添加后即可启用 OD 的类型化输入、滑块、预览元数据和能力门控。
• front-matter 下方的工作流是纯 Markdown，Agent 会将其作为系统提示词读取。
• DESIGN.md 被视为协作者，而非覆盖指令。技能允许 Agent 在需求冲突时作出调整，但绝不能自行编造新标记。
• data-od-id 标签用于将元素接入评论模式。需要兼容评论模式的技能必须为其输出添加注释标签。

完整协议请参阅 ../../skills-protocol.md。