Preview gallery
About this Skill
Create a dark, motion-rich SaaS marketing site that tells one continuous product story: a charcoal ground, one cyan accent, grey-to-white gradient headlines and a believable product screen that tilts upright as you scroll. Animated feature cards, a scroll-driven workflow, a customer spotlight with portraits, integrations and security, tiered pricing and an FAQ lead to a laptop mockup whose lid opens on scroll, with changelog, customer story, sign-in and legal pages included. You get one self-contained file that opens in any browser and works offline.
Picked most often by
About this Skill
Cadence Marketing Landing builds a dark SaaS marketing site where the product itself is the hero image. A charcoal ground, one cyan accent and grey-to-white gradient headlines carry one continuous story from the first screen to sign-up, with a changelog, customer story, sign-in and legal pages behind it. The example is Loopwright, a fictional customer-feedback platform.
What you get
- A home page in one flow: hero product card, wordmark marquee, animated feature cards, a scroll-driven workflow stage, a customer spotlight with portraits, integrations and security, pricing, FAQ and a sign-up section with a laptop whose lid opens on scroll
- Supporting pages: a filterable changelog, a customer story with three attributed numbers, sign-in and legal
- Product screens built into the page and re-themed to your product, so one flagship request travels through the whole story
- A working billing switch, compare table, FAQ, tabs, mobile menu and forms with validation and success states
- Geist and Geist Mono type and generated portraits, embedded in one file that opens in any browser and works offline
How to use it
- Share your product name, what it does, your main customer workflow and rough pricing; notes are enough.
- Your agent maps the feature cards and workflow to your product, generates the portraits and fills every section and page.
- Open the file in your browser, click through each page and form, and ask for copy or section changes in plain words.
Portraits come from your agent's image tool when one is available, which may carry that tool's usage charges. Anything the brief leaves out becomes placeholder copy that the agent lists for you to confirm.
What you need before you start
- You bring
- Product name, what it does and an outcome-first headline idea · 4 to 5 capabilities, the main workflow steps and rough pricing tiers · Customer quotes, story numbers, integrations and security facts you can honestly claim (optional; gaps become listed placeholders)
- 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 tool in your agent for the customer portraits and story photos (optional; without it the page keeps initials avatars)
- Outside costs
- Customer portraits and story photos are generated with your agent's own image tool when one is available, which may incur that tool's usage charges. Without one, the page keeps initials avatars and the agent lists the slots that need photos. Nothing else uses a paid service.
- Last tested
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
What you get
- A full dark marketing site: product hero, animated feature cards, a scroll-driven workflow, customer spotlight, integrations and security, pricing with a billing switch, FAQ and a sign-up section
- Inner pages that work: a changelog with filters and search, a customer story, sign-in and legal pages, plus forms with validation and success states
- Product screens built into the page and re-themed to your product, Geist type and generated customer portraits, all embedded in one offline file
Good fit
- Founders launching a SaaS or developer tool who want a dark page that looks funded on day one
- Product marketers who need a complete launch site with pricing, proof, FAQ and a changelog ready for a campaign
- Teams without polished screenshots: every product screen is built into the page and themed to your product
Not for
- Brands that want a light, airy look: Cadence is dark-only
- Live sign-up or billing: forms validate and confirm on the page, but nothing is sent anywhere
- Blogs, docs portals or other content-heavy sites: it is a product marketing site with a few supporting pages, not a CMS
Product Launch & App GrowthWeb Design & Digital ExperiencesBuild Landing PageStyle-lockedConversion-focusedCyan AccentGradient TypographyCharcoal DarkCss Device MockupsScroll Motion
User reviews
Loading reviews…
