Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

saas-landing

Sterne0

Forks0

Aktualisiert31. Mai 2026 um 15:05

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".

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

GiantClam

GiantClam/shpitto

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

Datei-Explorer

3 Dateien

SKILL.md

readonly

Mehr aus diesem Repository

gleiches Repository

design-system-enforcement

GiantClam/shpitto

Design-system enforcement contract for generated website UI. Use when creating or refining sections, pages, shells, forms, cards, tables, and navigation.

2026-06-100

website-generation-workflow

GiantClam/shpitto

Defines the end-to-end website generation workflow. Invoke when generating multi-section pages or full websites.

2026-06-050

cinematic-launch-template

GiantClam/shpitto

Website-only import adapted from HTML Anything template discipline for cinematic AI/product launch pages with staged demo proof and sharp CTA focus.

2026-06-040

content-resource-template

GiantClam/shpitto

Website-only import adapted from HTML Anything template discipline for resource hubs and information-platform routes.

2026-06-040

docs-reference-template

GiantClam/shpitto

Website-only import adapted from HTML Anything template discipline for documentation/reference pages. Default primary template discipline for docs and reference routes.

2026-06-040

precision-catalog-template

GiantClam/shpitto

Website-only import adapted from HTML Anything template discipline for industrial product catalogs, spec comparison, and buyer inquiry routes.

2026-06-040

name	saas-landing
description	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".
triggers	["saas landing","marketing page","product landing","SaaS","产品官网","营销页","产品落地页"]
od	{"mode":"website","platform":"responsive","scenario":"marketing","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"activation":{"mode":"primary","rollout_status":"active","website_only":true,"ownership_layer":"skill","compatible_surface_modes":["marketing-landing-site","corporate-b2b-site","portfolio-blog-site"]},"inputs":[{"name":"product_name","type":"string","required":true},{"name":"tagline","type":"string","required":true},{"name":"has_pricing","type":"boolean","default":true},{"name":"proof_count","type":"integer","default":3,"min":0,"max":6}],"parameters":[{"name":"hero_density","type":"spacing","default":96,"range":[48,200]},{"name":"accent_strength","type":"opacity","default":1,"range":[0.5,1]}],"outputs":{"primary":"index.html"},"capabilities_required":["file_write"]}

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 ../../skills-protocol.md for the full protocol.