Beacon SaaS Landingv1.0.4
Use this Skill to build landing page.
Popular
5.0168 downloads2 likes4 saves
Free
A calm SaaS marketing site on warm neutrals, lit by a single soft blue light beam, with gradient headlines, a quiet centered hero and your product shown as a live, working console instead of a screenshot. Below it come features, a tabbed product tour, setup steps, customer stories, monthly or yearly pricing with a comparison table, security and FAQ, plus sign-up, sign-in, sales, changelog, status, legal and 404 pages. Light and dark themes are both complete, and every link and form works.
Picked most often by
Updated Oct 3, 2026
Preview gallery
Similar Skills
View all skills
What you get
- A complete SaaS site in one self-contained HTML file that opens offline in any browser: the landing page plus sign-up, sign-in, contact sales, changelog, status, legal and 404 pages
- A live product console rebuilt in your product's own vocabulary, with a range switch, chart tooltips, live counters and an incident timeline, instead of a static screenshot
- Geist type, one blue beam, warm neutral surfaces, full light and dark themes, and forms with validation, loading and success states; in your own project, the same design in your stack
Good fit
- Founders and indie hackers who need a credible SaaS marketing site with pricing, sign-up and a changelog this week
- Developer tools, monitoring, API and infrastructure products that want the product itself shown as working interface
- Product marketers who want to iterate on positioning copy directly on a finished-looking page
Not for
- Sites that need a CMS, blog or real accounts: sign-up and contact forms confirm on the page, and wiring a backend is up to you
- Brands that must follow an existing design system: the warm neutrals, single blue beam and gradient headlines are the product
- Consumer or lifestyle brands that lead with photography: images are limited to a customer story, testimonials, one editorial photo and a team photo
Product Launch & App GrowthWeb Design & Digital ExperiencesBuild Landing PageStyle-lockedEditable OutputFast TurnaroundMinimalistGlow AccentGradient TypographySoft Neutral
Good forLanding pages
About this Skill
Describe your product and get back a complete SaaS marketing site: warm neutral surfaces, one soft blue light beam, gradient headlines and your product shown as a live console rather than a screenshot. It arrives as one self-contained file that opens in any browser and works offline.
What you get
- A landing page with a feature bento, live product console, tabbed tour, setup steps, customer story and testimonials, pricing with a comparison table, security, FAQ and a closing call to action
- Sign-up, sign-in, contact sales, changelog, status, privacy, terms and 404 pages, all linked and working
- Complete light and dark themes, calm scroll reveals, and motion that switches off for visitors who prefer reduced motion
- Forms that validate inline and show loading and success states, plus changelog filters and search
- Inside your own project, the same design built as components in your stack
How to use it
- Give it your product name, what it does, your plans and any customers or quotes you may use; rough notes are enough
- Let it pick the sections and pages, or name the ones you want; anything you did not supply is drafted and listed for you to confirm
- Open the finished file in your browser and ask for copy, section or pricing changes in plain words
Photos are generated with your agent's image tool, which may carry that tool's usage charges; without one the page falls back to initials and product cards. Fonts and images are embedded, so the finished file makes no network requests.
What you need before you start
- You bring
- Product name, what it does and for whom, 4-6 capabilities, and 2-4 plans with real limits (rough notes are fine) · Optional: customer names, quotes, numbers and photos you are allowed to use
- Dependencies
- Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · Optional: an image generation tool in your agent for the customer, editorial, testimonial and team photos
- Outside costs
- Photos are generated with your agent's own image tool, which may incur that tool's usage charges. Without one, the site still builds: testimonials use initials, the editorial photo becomes a product card and the team photo is dropped.
- Last tested
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…