SaaS Landing Skill
Produce a single-page SaaS landing. Agent, follow this workflow exactly.
1. Read context
Before writing anything:
- Read
DESIGN.mdin 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_countlogos or testimonials. If 0, skip this section. - Pricing — 2–3 tiers. Include only if
has_pricingis 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…