saas-landing

SaaS 落地页技能

制作单页 SaaS 落地页。Agent，请严格遵循以下工作流程。

1. 阅读上下文

在编写任何内容之前：

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

2. 规划版块

必需版块，按顺序排列：

1. 主视觉区 — logo 或文字标志、标题（tagline 输入）、副标题（1–2 句话）、主要 CTA、次要 CTA。将 hero_density 参数用作垂直内边距，单位为 px。
2. 功能 — 3–6 个功能卡片。每个卡片包括：图标、简短标题、1–2 句话的正文。
3. 社会认同 — proof_count 个 logo 或推荐语。如果为 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)

请注意：

• 对于仅兼容 Claude-Code 的情况，od: front-matter 块是可选的；但添加它可以启用 OD 的类型化输入、滑块、预览元数据和能力门控。
• front-matter 下方的工作流程是 Agent 作为系统提示词读取的纯 Markdown。
• DESIGN.md 被视为协作者，而不是覆盖规则。技能赋予 Agent 在需求冲突时进行覆盖的权限，但绝不允许它编造新令牌。
• data-od-id 标签用于将元素连接到评论模式。需要兼容评论模式的技能必须为其输出添加注释。

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