AI writing tool SaaS landing page template for content teams and marketing platforms
Full landing page template for an AI writing tool SaaS product. Includes a serif hero with a soft warm gradient blob, a feature card grid with a tall prompt card and voice-mode stack, a two-column citation showcase with an inline editor preview, three-tier pricing (free, team at $16/seat, enterprise), a gradient CTA section, and a five-column footer. Built for AI writing tools, content SaaS products, brand voice platforms, and marketing copy generators. Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
A complete SaaS landing page for AI writing products. The sticky nav carries the logo with a conic-gradient colour accent, five text links, sign in, a dark pill CTA, and an outlined secondary CTA. The hero pairs a large serif heading with a soft gradient blob made from layered SVG radial gradients in lime, pink, and orange — the blob sits absolutely positioned to the right of the copy block. A trust logo strip below shows six company wordmarks in different typefaces and weights. The main feature section uses a two-column grid: a tall left card shows a live prompt card with a yellow tag, the prompt in italic serif, and a Muse output line; two standard right cards show voice-mode chip stacks (Warm, Plain, Direct) and connected integrations (Notion, Google Docs, Slack). A two-column showcase section sits inside a white rounded card with a left copy block listing four citation features and a right side showing an inline document editor with a highlighted stat, voice toolbar chips, and a Publish button. Three-tier pricing uses a featured dark center card. The CTA section floats a secondary gradient blob inside a white rounded box. The footer is five-column with brand, Product, Company, Build, and Legal columns, a bottom bar with copyright and location.
Common questions about this template
How do I update the brand name and logo colour accent?
The brand name 'Muse' and the conic-gradient colour dot in the logo are plain HTML and CSS. Ask Claude Code or Bolt to update the text and replace the conic-gradient values on .nav .logo .o and .footer .brand h4 .o with your own brand colours. The --y, --p, and --o CSS variables at the top of the style block control lime, pink, and orange throughout the page — update those three variables to retheme the gradient blob, pricing highlight, and voice chips at once.
How do I change the feature cards in the grid section?
The feature grid has one .card.tall (the prompt card) and two .card elements (voice stack, integrations). Ask your coding tool to update the h3 and p text inside each card. The tall card's prompt-card div contains the tag chip, body text, and output line — replace those with your own product feature. The .stack-vis rows in the smaller cards each have a label and a colour chip — update the text and the chip class (.chip.y for lime, .chip.o for orange, .chip.p for pink) to match your product.
How do I update the pricing tier names and amounts?
Each pricing tier is a .tier div with a .name, an .amount, a feature list, and a .btn. Ask Claude Code or Bolt to update the plan names (Free, Team, Enterprise), prices ($0, $16, Talk), and the feature items in each ul. The featured center tier uses class .tier.on which applies the dark background and yellow CTA — move the .on class to a different tier if you want a different plan highlighted. The --y variable controls the highlighted CTA button colour.
Which tools can I use to build with this template?
Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
Use this AI coding template for
- ·Full landing pages for AI writing tools, content SaaS products, and brand voice platforms that need a serif editorial aesthetic, a feature grid, and a pricing section in one template
- ·Vibe coding projects for AI copywriting, marketing automation, or AI document drafting tools in Bolt, Claude Code, or Lovable that need a polished multi-section landing page
- ·SaaS landing pages for AI writing software that need to show product features like voice modes, integrations, and citation sourcing alongside a free tier and team pricing
Works with every vibe coding tool
More vibe coding hero templates
View allAI builder hero template for prompt-driven SaaS landing pages
Dark gradient SaaS hero template for AI and startup landing pages
3D rotating image carousel for SaaS and AI product hero sections
Mosaic image grid hero template for SaaS and agency landing pages
Liquid gradient scroll chapter template
AI hardware product hero template for device launch pages and consumer technology product lines
Other templates you might like