skeletorflet/opencode-supreme-setup

SaaS 着陆页技能

生成一个单页 SaaS 着陆页。代理请严格按照以下工作流程操作。

1. 读取上下文

在编写任何内容之前：

• 读取当前工作目录下的 DESIGN.md 文件。如果文件不存在，请停止并要求提供。
• 识别调色板、排版标记和布局原则。
• 注意“Agent Prompt Guide”部分——如果其指令与本文件冲突，则优先使用该部分的指令。

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 等加载，则包含系统字体回退。
• 无外部 JS。
• 语义化 HTML（<header>、<main>、<section>、<footer>）。
• 每个可编辑元素使用 data-od-id="<唯一标识>" 标记，以便宿主应用的评论模式可以定位该元素。

5. 自检

在完成之前，验证：

• 所有文本内容有意义，不是 Lorem Ipsum（使用 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 标记是我们将元素连接到评论模式的方式。希望支持评论模式的技能必须为其输出添加此标记。

参见 ../../skills-protocol.md 了解完整协议。