saas-landing

nexu-io/open-design · plugins/_official/examples/saas-landing/SKILL.md

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

SaaS Landing Skill

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

1. Read context

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.

2. Plan sections

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.

3. Apply design system

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.

4. Write the file

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.

5. Self-check

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.

6. Done

Write only index.html. Do not generate a separate CSS file, JS file, or 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 ../../docs/skills-protocol.md for the full protocol.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/saas-landing · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/saas-landing" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/saas-landing" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/saas-landing

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so saas-landing is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

lowPath traversal reference
References parent-directory traversal, which can escape a target directory.
Evidence: ../· fingerprint fa08499e14d0113b

saas-landing

nexu-io/open-design · plugins/_official/examples/saas-landing/SKILL.md

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

SaaS Landing Skill

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

1. Read context

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.

2. Plan sections

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.

3. Apply design system

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.

4. Write the file

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.

5. Self-check

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.

6. Done

Write only index.html. Do not generate a separate CSS file, JS file, or 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 ../../docs/skills-protocol.md for the full protocol.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/saas-landing · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/saas-landing" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/saas-landing" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/saas-landing

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so saas-landing is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

lowPath traversal reference
References parent-directory traversal, which can escape a target directory.
Evidence: ../· fingerprint fa08499e14d0113b

saas-landing

What this skill does

SaaS Landing Skill

1. Read context

2. Plan sections

3. Apply design system

4. Write the file

5. Self-check

6. Done

For skill authors reading this as a reference

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

saas-landing

What this skill does

SaaS Landing Skill

1. Read context

2. Plan sections

3. Apply design system

4. Write the file

5. Self-check

6. Done

For skill authors reading this as a reference

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits