nxxxsooo/clean-design

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 为 true 时包含。
5. 页脚行动号召区 — 大面积的强调色带，包含一个按钮的行动号召。
6. 页脚 — 最小化：链接 + 版权信息。

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: 前置元数据块保留了兼容性元数据。Clean Design 会读取其类型化输入、滑块、预览元数据和能力提示。
• 前置元数据下方的工作流是纯 Markdown，代理将其作为系统提示读取。
• DESIGN.md 被视为协作伙伴而非覆盖规则。本技能授权代理在简要冲突时覆盖规则，但绝不发明新令牌。
• data-od-id 标记将元素连接到本地注释模式。需要注释模式兼容性的技能必须为其输出添加注释。

参见 ../../skills-protocol.md 获取完整协议。