Preview gallery
About this Skill
Build a premium SaaS marketing site with a white and zinc page, one teal accent and a dark pill navbar under a promo banner. A live product dashboard below the hero springs from a perspective tilt to flat as you scroll, followed by a dark bento of working mini product views, a customer story, testimonials, pricing with a monthly and yearly toggle, security, FAQ and a dark CTA box. Sign-up, sign-in, demo booking, changelog, case study and legal pages come with it, all in one self-contained file.
Picked most often by
About this Skill
Describe your product and get back a calm, product-led SaaS site: a white page with one teal accent, a dark pill navbar and a live dashboard that leans back in perspective and springs flat as you scroll. The example is Parcelo, a fictional delivery-analytics tool that flags late parcels before customers ask.
What you get
- A landing page with banner, pill navbar, hero dashboard, dark feature bento, setup steps, customer story, testimonials, pricing, security, FAQ and a dark CTA box
- Sign-up, sign-in, demo booking, changelog, case study, security, privacy and terms pages, plus a designed 404
- Mini product views in the bento that show your own objects instead of stock screenshots
- A monthly and yearly pricing toggle, forms with error and success states, and a changelog with filters and search
- One file with fonts and photos embedded that opens offline in any browser
How to use it
- Share your product name, what it does, your features, plans and what the dashboard should show; rough notes are enough.
- Your agent renames every dashboard label to your product's objects, fills each section and page, and reviews it on desktop and phone.
- Open the single file, click through the pages and ask for changes in plain words.
Photos made with your agent's image tool may incur that tool's usage charges; without one, tinted panels and monogram avatars stand in.
What you need before you start
- You bring
- Product name, one-line promise and audience · Features, plans with monthly and yearly prices, and what the dashboard should show · Optional: a customer story, quotes, FAQ answers, security facts and changelog entries
- 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 · An image generation tool in your agent for story, team and avatar photos (optional; tinted panels and monograms are used without it)
- Outside costs
- Story, case-study, team and avatar photos are generated with your agent's own image tool when available, which may incur that tool's usage charges. Without an image source, tinted panels and monogram avatars are used instead.
- Last tested
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
What you get
- A finished example site for Parcelo, a fictional delivery-analytics product: the landing page plus sign-up, sign-in, demo booking, changelog, case study, security, privacy, terms and a 404.
- Live product UI in your product's terms: a dashboard with range switch and chart hover, mini views in the bento, step tabs, a billing toggle that carries the plan into sign-up, and validated forms.
- Your site as one offline file with Onest and JetBrains Mono embedded, plus the style guide, image plan, motion rules and checklist your agent builds from.
Good fit
- Founders and marketers launching a SaaS product who want a calm, credible, product-led page.
- Analytics, operations or developer tools whose best proof is the product itself.
- Teams that need pricing, security, changelog and sign-up pages, not just a hero.
Not for
- App prototypes or CMS-driven sites: it builds a marketing site with fixed inner pages, not a working product.
- Brands that want a colourful look or a dark-mode toggle; meridian is light with dark sections and one teal accent.
- Real sign-ups, payments or analytics: forms validate and confirm on the page until you connect a backend.
Product Launch & App GrowthWeb Design & Digital ExperiencesBuild Website PageBuild Landing PageStyle-lockedEditable OutputConversion-focusedDark Pill NavLight Dark RhythmPerspective MockupTeal Accent Minimal
User reviews
Loading reviews…
