SaaS Landing Skill

Produce a single-page SaaS landing. Agent, follow this workflow exactly.

生成一个单页SaaS着陆页。Agent请严格遵循以下工作流程。

1. Read context

1. 阅读上下文

Before writing anything:

Read
```
DESIGN.md
```
in the current working directory. If missing, stop and ask for one.
Identify the color palette, typography tokens, and layout principles.
Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.

在开始编写内容前：

读取当前工作目录下的
```
DESIGN.md
```
文件。如果文件缺失，请停止操作并索要该文件。
确定调色板、排版规范和布局原则。
注意“Agent Prompt Guide”部分——如果与本说明存在冲突，该部分内容优先级更高。

2. Plan sections

2. 规划页面板块

Required sections, in order:

Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the hero_density parameter as vertical padding in px.
Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body.
Social proof —
```
proof_count
```
logos or testimonials. If 0, skip this section.
Pricing — 2–3 tiers. Include only if
```
has_pricing
```
is true.
Footer CTA — large accent-colored band with one-button call to action.
Footer — minimal: links + copyright.

必须包含以下板块，按顺序排列：

Hero区 — Logo或文字标识、标题（标语输入内容）、副标题（1–2句话）、主CTA按钮、次CTA按钮。使用hero_density参数作为垂直内边距（单位：px）。
功能模块 — 3–6个功能卡片。每个卡片包含：图标、简短标题、1–2句话的描述内容。
社交证明 —
```
proof_count
```
个品牌Logo或客户评价。如果参数为0，则跳过该板块。
定价板块 — 2–3个定价层级。仅当
```
has_pricing
```
为true时才包含该板块。
页脚CTA区 — 大型强调色横幅，包含一个按钮式的行动号召。
页脚 — 极简风格：链接 + 版权信息。

3. Apply design system

3. 应用设计系统

All colors must come from DESIGN.md tokens. Do not invent hex values.
Typography: use the declared display font for headlines, body font for everything else.
Layout: respect the grid, max-width, and section spacing rules.
Components: use declared button/card/input patterns. Do not add shadows if DESIGN.md's Depth & Elevation says minimal.
Accent: use the accent color only once in the hero, once in the footer CTA, and for all links. Do not flood the page.

所有颜色必须来自DESIGN.md中的规范，不得自行创建十六进制颜色值。
排版：标题使用指定的标题字体，其余内容使用正文字体。
布局：遵循网格、最大宽度和板块间距规则。
组件：使用指定的按钮/卡片/输入框样式。如果DESIGN.md的“Depth & Elevation”部分要求极简风格，则不得添加阴影。
强调色：仅在Hero区、页脚CTA区各使用一次强调色，并将其用于所有链接。不得在页面中大量使用强调色。

4. Write the file

4. 编写文件

Output a single self-contained

index.html

with:

All CSS inlined in a
```
<style>
```
block in
```
<head>
```
.
System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.
No external JS.
Semantic HTML (
```
<header>
```
,
```
<main>
```
,
```
<section>
```
,
```
<footer>
```
).
Each editable element tagged with
```
data-od-id="<unique-slug>"
```
so the host app's comment mode can target it.

输出一个独立的

index.html

文件，要求：

所有CSS内联在
```
<head>
```
中的
```
<style>
```
标签块内。
如果DESIGN.md中的字体无法从Google Fonts等渠道加载，需提供系统字体降级方案。
不包含外部JS文件。
使用语义化HTML标签（
```
<header>
```
、
```
<main>
```
、
```
<section>
```
、
```
<footer>
```
）。
每个可编辑元素需添加
```
data-od-id="<unique-slug>"
```
属性，以便宿主应用的评论模式可以定位该元素。

5. Self-check

5. 自我检查

Before finishing, verify:

All text is content-meaningful, not lorem ipsum (use product_name and tagline inputs; generate plausible specific copy for the rest).
No broken color references (every CSS color value is in DESIGN.md's palette or a valid alpha/fallback variant).
Responsive breakpoints match DESIGN.md's Responsive Behavior section.
The page looks good at 1440w, 768w, and 375w (mentally simulate).
Accent used no more than twice total.

完成前，请验证以下内容：

所有文本均为有意义的内容，而非占位文本（使用product_name和tagline输入内容；其余部分生成合理的特定文案）。
无无效颜色引用（每个CSS颜色值均来自DESIGN.md的调色板，或为有效的透明度/降级变体）。
响应式断点与DESIGN.md的“Responsive Behavior”部分一致。
页面在1440w、768w和375w分辨率下显示正常（可进行模拟检查）。
强调色的使用次数不超过两次。

6. Done

6. 完成

Write only

index.html

. Do not generate a separate CSS file, JS file, or README.

仅输出

index.html

文件。不得生成单独的CSS文件、JS文件或README文件。

For skill authors reading this as a reference

供技能作者参考的说明

This is a minimal but complete skill. Structure:

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

Things to notice:

The
```
od:
```
front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OD's typed inputs, sliders, preview metadata, and capability gating.
The workflow below the front-matter is plain Markdown that the agent reads as its system prompt.
DESIGN.md is treated as a collaborator, not an override. The skill gives the agent authority to override when the brief conflicts, but never to invent new tokens.
```
data-od-id
```
tagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.

See

../../skills-protocol.md

for the full protocol.

这是一个简洁但完整的Skill。结构如下：

saas-landing-skill/
├── SKILL.md    ← 当前文件
└── assets/
    └── base.html    (可选的起始模板；本Skill未使用)

需要注意的点：

```
od:
```
前置内容块仅兼容Claude-Code时为可选，但添加后可启用OD的类型化输入、滑块、预览元数据和功能限制。
前置内容块下方的工作流程为纯Markdown格式，Agent会将其视为系统提示词。
DESIGN.md被视为协作文件，而非覆盖性文件。Skill赋予Agent在需求冲突时进行覆盖的权限，但绝不允许创建新的规范。
```
data-od-id
```
标签是实现评论模式交互的关键。需要兼容评论模式的Skill必须为输出元素添加该注解。

完整协议请参见

../../skills-protocol.md

。

saas-landing

Original

Translation

SaaS Landing Skill

SaaS Landing Skill

1. Read context

1. 阅读上下文

2. Plan sections

2. 规划页面板块

3. Apply design system

3. 应用设计系统

4. Write the file

4. 编写文件

5. Self-check

5. 自我检查

6. Done

6. 完成

For skill authors reading this as a reference

供技能作者参考的说明