Landing page templates for vibe coding
Vibe coding gets an app working fast, but the landing page it writes looks like everyone else's: the same hero, the same gradient, the same three cards. These templates give your agent a designed page to start from, so the result looks made on purpose.
Every template here is free under the MIT license: one index.html with its CSS and scripts inside (GSAP, ScrollTrigger and Lenis load from jsDelivr), plus AGENTS.md, CREDITS.md (photos from Unsplash under the Unsplash License, fonts under the SIL Open Font License) and LICENSE, in its own GitHub repository at github.com/8bsite with a live demo on GitHub Pages. Each template's page has the download commands.
Why one HTML file works well with AI agents
- Nothing to install. No framework, no package versions, no build that can fail. The agent edits one file and you open it in a browser.
- Everything in view. Styles, markup and the animation of each section are in the same file, so the agent sees what depends on what.
- Rules included. Each template ships an AGENTS.md with what to keep and what to replace, so the motion survives the rewrite.
- Separate from your app. Keep the landing as a static page on your main domain and the app on
app.yourdomain.com. The landing stays fast and simple to change, whatever stack the app uses.
With an agent in your editor
Cursor, Codex, Windsurf, Gemini CLI and Claude Code all work the same way: download the template's files into your project with the commands on its page, then paste its prompt with your product filled in. Give the agent the file, not a link: from a link it rebuilds a different page. The Claude Code guide has the steps in detail.
With an AI app builder
Lovable, Bolt and v0 generate their own React code, so they do not take an HTML file as it is. For them the design has to be described: the Hushkey template has a full rebuild prompt with the design system and one prompt per section, written for that purpose.
Before you publish
- Replace every placeholder: email, phone, form, social links, preview image and favicon. AGENTS.md lists them.
- Replace the demo facts: prices, dates, addresses, reviews.
- Connect the form to a form service or remove it.
- Set the page title and description for your product, and check the page at phone width.
Questions
Why HTML and not React?
A landing page does not need a framework, and a single file is the easiest thing for an agent to change without breaking. If your app is in React or Next.js, ask the agent to convert the finished page into components, or keep the landing separate on your main domain.
Which template suits a SaaS or app?
Linea is built for an app or SaaS landing page and Hushkey for a product launch with pre-orders. Studio, event and local business templates work for products too once the copy changes.