
Beacon SaaS Landingv1.0.0
Use this Skill to build landing page.
Create a calm SaaS marketing landing page with a focused product narrative, clear sections, and restrained visual emphasis. It helps teams present a new product or waitlist with more clarity and polish than a generic template, while keeping claims grounded in real proof.
Picked most often by
Updated Sep 22, 2026
Preview gallery
Runs in
Generates with
Similar Skills
View all skillsWhat you get
- A complete SaaS landing page as one self-contained HTML file that opens in any browser — no build step, no hosting needed
- A 14-section library: hero with the signature light beam, feature bento grid, CSS dashboard mockup, testimonials, stats, integrations, pricing, comparison table, FAQ, CTA banner, and more
- Working light/dark mode, scroll-reveal animations, count-up stats, mobile menu, and FAQ accordion, already wired up
- Landing-page copy drafted in a plain, confident voice when you only have rough notes
- In your own project, the same design generated as components in your framework (React, Vue, Svelte, Astro, or plain HTML)
Good fit
- Founders and indie hackers who need a credible marketing page for a SaaS product this week, not this quarter
- Product and marketing folks who want to iterate on positioning copy directly on a real-looking page
- Developers who want a clean, dependency-free starting point they can paste into any stack
Not for
- Multi-page marketing sites with a CMS, blog, or real routing — this produces one landing page
- Pages that must follow your existing brand system — the beacon style (warm neutrals plus one blue beam) is the product
- Working signup flows or payments — buttons link to on-page sections; wiring real backends is up to you
About this Skill

Describe your product in a sentence, and get back a complete SaaS landing page — a calm, gray-on-warm-white page lit by one blue light beam, the kind of design you'd expect from a well-funded startup. It opens in any browser as a single file, no build tools, no hosting required.
![]()
What you get
- One finished landing page: hero, features, product screenshot mockup, testimonials, pricing, FAQ, and up to fourteen sections total
- A window-chrome "product preview" built from pure CSS — it looks like a real dashboard screenshot without you supplying one
- Working light and dark mode, scroll animations, animated stat counters, and a mobile menu, all already wired up
- Copy drafted for you in a plain, confident voice if you only have rough notes
- Inside your own codebase, the same page arrives as components in your framework instead of one file
![]()
How to use
- Tell it your product name, what it does, and your plan tiers — rough notes are enough
- Say which sections you want, or let it pick a sensible set
- Open the file it hands back in your browser; ask for copy or section changes in plain words
![]()
No API keys and no extra costs — everything is generated locally. The standalone file uses system fonts and makes no font or asset request.
What you need before you start
- You bring
- Product name, one-line value proposition, 4-6 features, and three plan tiers (rough notes are fine — missing copy is drafted in the style's voice)
- Last tested
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…








