SaaS Landing Template
Use this template when the artifact is a premium, slow-paced, design-led SaaS landing page that needs to feel like an artist statement, not a Stripe-clone.
Use When
- The product is an ambient / creative / calm-tech / philosophical SaaS — AI companion, journaling tool, content tool, creative software, slow productivity.
- The brand voice can sustain Chinese literary prose alongside English — bilingual is a feature, not an afterthought.
- The user wants stations of scrolling narrative (manifesto → features → CTA), not a generic hero-features-pricing-FAQ stack.
- 3D / Three.js hero is welcome (or at least an atmospheric visual carrying the mood).
Avoid When
- The product is e-commerce, transactional, or mass-market consumer — the pacing is too slow.
- The user wants a fast-conversion, A/B-tuned, growth-marketing landing — use a Linear / Vercel-clone instead.
- The brand is loud / neon / cyber — fight or rebuild rather than retheme.
- The audience is mobile-first — the template is desktop-primary; mobile works but the magic lives on a wide canvas.
- Pricing or signup is the primary surface — use
pricing-page/ or waitlist-page/.
Required Reading
Read this SKILL.md first. Do not read reference.html by default.
Read reference.html only when you need: the Three.js forest scene geometry (instanced trunks, canopy, fireflies), the scroll-driven camera walk, the custom-cursor expand-to-ring behavior, or the station-scrolling pattern. Extract patterns; do not copy placeholder product copy, the bilingual nav strings, or the exact gold / forest tokens wholesale.
Design Strategy
Decide the page's stations before any visual choice:
- Hero station — one-line thesis. A claim, not a feature.
- Manifesto station — a paragraph explaining the worldview.
- 3 feature stations — each a verb (Listen / Reflect / Compose), not a noun.
- Closing CTA — quiet invitation, not "Start your free trial now".
Sub-pages (features / story / pricing / contact) inherit the same hush.
Layout Bias
Prefer:
- thin weights (300–500) dominating, with display italic serifs as accent
- one warm accent color over a deep, organic background — never two
- generous vertical breathing room between stations (each station feels like its own page)
- a single atmospheric hero — 3D, video, or a single large image — not stacked
- custom cursor and easing micro-interactions, used sparingly
- bilingual nav and headlines where it adds meaning
Avoid:
- "social proof logo wall" of unrelated brand marks
- screenshot-stack feature grids (this template is not for that)
- gradient meshes, neon accents, dark-cyber overlays
- "Get started for free" CTA energy
- emoji icons in features
- fast / bouncy motion — the contract is calm
Platform / Size
Desktop-first. Set a generous content max-width with side rails for chapter nav. Mobile should degrade to a single column with the atmospheric hero replaced by a static crop — do not try to render Three.js scenes full-quality on mobile.
1---2name: saas-landing3description: Premium calm-tech SaaS landing template — bilingual (CN/EN) literary voice over a dark forest-night palette with warm gold accent, Cormorant + Noto Serif SC, Three.js procedural forest hero, station-based scrolling narrative, custom cursor. Built for ambient-AI / creative-tool / philosophical SaaS, not loud commercial launch.4---56# SaaS Landing Template78Use this template when the artifact is a **premium, slow-paced, design-led SaaS landing page** that needs to feel like an artist statement, not a Stripe-clone.910## Use When1112- The product is an **ambient / creative / calm-tech / philosophical** SaaS — AI companion, journaling tool, content tool, creative software, slow productivity.13- The brand voice can sustain Chinese literary prose alongside English — bilingual is a feature, not an afterthought.14- The user wants stations of scrolling narrative (manifesto → features → CTA), not a generic hero-features-pricing-FAQ stack.15- 3D / Three.js hero is welcome (or at least an atmospheric visual carrying the mood).1617## Avoid When1819- The product is e-commerce, transactional, or mass-market consumer — the pacing is too slow.20- The user wants a fast-conversion, A/B-tuned, growth-marketing landing — use a Linear / Vercel-clone instead.21- The brand is loud / neon / cyber — fight or rebuild rather than retheme.22- The audience is mobile-first — the template is desktop-primary; mobile works but the magic lives on a wide canvas.23- Pricing or signup is the primary surface — use `pricing-page/` or `waitlist-page/`.2425## Required Reading2627Read this `SKILL.md` first. Do **not** read `reference.html` by default.2829Read `reference.html` only when you need: the Three.js forest scene geometry (instanced trunks, canopy, fireflies), the scroll-driven camera walk, the custom-cursor expand-to-ring behavior, or the station-scrolling pattern. Extract patterns; do not copy placeholder product copy, the bilingual nav strings, or the exact gold / forest tokens wholesale.3031## Design Strategy3233Decide the page's **stations** before any visual choice:34351. **Hero station** — one-line thesis. A claim, not a feature.362. **Manifesto station** — a paragraph explaining the worldview.373. **3 feature stations** — each a verb (Listen / Reflect / Compose), not a noun.384. **Closing CTA** — quiet invitation, not "Start your free trial now".3940Sub-pages (features / story / pricing / contact) inherit the same hush.4142## Layout Bias4344Prefer:4546- thin weights (300–500) dominating, with display italic serifs as accent47- one warm accent color over a deep, organic background — never two48- generous vertical breathing room between stations (each station feels like its own page)49- a single atmospheric hero — 3D, video, or a single large image — not stacked50- custom cursor and easing micro-interactions, used sparingly51- bilingual nav and headlines where it adds meaning5253Avoid:5455- "social proof logo wall" of unrelated brand marks56- screenshot-stack feature grids (this template is not for that)57- gradient meshes, neon accents, dark-cyber overlays58- "Get started for free" CTA energy59- emoji icons in features60- fast / bouncy motion — the contract is calm6162## Platform / Size6364Desktop-first. Set a generous content max-width with side rails for chapter nav. Mobile should degrade to a single column with the atmospheric hero replaced by a static crop — do not try to render Three.js scenes full-quality on mobile.
martin65536