Cursor website templates

Every template here fits Cursor the same way: one index.html holding a whole site in one scroll, one AGENTS.md of editing rules, no build step. Check each weak spot.

• A small app with a weekly rhythm: the weekly-message app page runs five data-source columns, a phone mockup and two plans. Weak spot: the plan buttons lead to the contact form, not a checkout.
• A consultancy that sells with research: the agency with the paper-cut arrow sets six old measures against new ones in a ledger and offers a report by email. Weak spot: its forms send nothing until Cursor wires them to a service.
• A creative studio with a portfolio: the motion studio page has 26 photos, practice cards dealt from a tilted pile on wide screens, and ruled work rows. Weak spot: swapped photos need cropping.
• An event or venue with a schedule: the planetarium page pins a strip of five stops on a night field and lists five shows as rows with time buttons. Weak spot: show times and prices are invented and appear in several places.
• A tour or rental priced per trip: the boat trip page gives each trip a dark fare card beside two photos. Weak spot: there is no booking; its only form is an email sign-up.
• A shop that sells from a counter: the cheese shop page stands five product panels at different heights like a skyline. Weak spot: no cart, so each price is only information.

Take the repository name and the address of DESIGN.md from the template page, put them in place of the brackets, then open the folder in Cursor (the last line assumes you installed the cursor shell command; otherwise use File, Open Folder).

mkdir my-site && cd my-site
curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/CREDITS.md
curl -LO https://8b.com/templates/<template>/DESIGN.md
cursor .

1. Let Cursor read the rules. Cursor's rules documentation says it supports AGENTS.md in the project root and in subdirectories, so the file you downloaded is picked up without a setup step.
2. Switch to Plan mode for the first message. Press Shift+Tab in the chat input, or pick Plan from the mode menu. Per Cursor's docs, Plan mode asks clarifying questions, researches the project and writes a plan you can edit before it builds.
3. Commit the untouched files. Cursor's docs say checkpoints are stored locally and are for undoing agent edits, not for history. Run git init and commit once, so git diff shows every later change.
4. Edit in steps, then look at the page. Serve the folder and open it in a browser, or ask the agent to do it:

python -m http.server 8000

Cursor's browser tool can take screenshots and detect a running development server, so the agent can look at its own result. Check phone width yourself too.

A prompt works when it names decisions instead of adjectives. The template already holds the decisions: typefaces, a small palette, the motion, the section order. The prompts below tell Cursor to respect them; more prompts written this way cover other jobs.

1. The first message in Plan mode. It turns the invented demo text into an interview.

Read AGENTS.md and index.html. This page becomes the site of <business>: <what we sell, to whom, in which city>. Do not edit yet. First list every invented fact in the page (names, prices, reviews, addresses, phone numbers, opening hours) with the section it sits in, then ask me for the real ones, one question at a time. When I have answered, give me a plan section by section. Keep the section order, the ids, the data attributes and the class names AGENTS.md lists.

2. The content pass. Send it after the answers are in; it stops the usual drift into a redesign.

Change content only, not the look. In index.html replace the headline, the section copy and the prices with the facts I just gave you. Keep the typefaces, the colour variables in :root, the spacing and every animation exactly as they are; do not add new fonts, gradients, cards or entrance effects. If a sentence of mine is longer than the one it replaces, shorten it instead of resizing the type. After the edit, tell me which lines you changed and which placeholders are still left (photos, form endpoint, favicon, social image).

3. The check on screen. It uses the browser tool, with the page served locally.

Start a local server for this folder, open the page in the browser tool and take a screenshot of the first screen and of each pinned or sideways-scrolling section. If you can make the browser narrower, repeat at a phone width of about 390 px; if not, tell me. List anything that overlaps, overflows sideways, or stops moving after my edits, with the section id, and fix only those spots. Do not restyle anything else.

After these, ask for one change per message, so you can tell which one broke the page.

An agent damages a designed page by being helpful: it adds a gradient, swaps the font for a familiar one, evens out the cards. The result is what the page on avoiding the AI look describes. Three habits prevent it.

• Point at tokens, not at feelings. DESIGN.md holds the exact colours, type sizes and spacing; a separate guide explains the format. Ask for "the second accent" by variable name instead of "a warmer tone".
• Keep the scripts' hooks. The animation code looks up ids, data- attributes and classes that AGENTS.md lists. In the electric scooter page the model cards are pinned for two screens and the photo frames have notches cut with clip-path; rename a class and the notch or the pin stops working.
• Add one rule file. Cursor's docs say a rule with alwaysApply: true is included in every chat session, so the instruction survives long chats. Save this as .cursor/rules/keep-the-look.mdc:

---
alwaysApply: true
---
This is a single-file landing page. Follow AGENTS.md. Edit text, photos, links and colour variables. Do not rename ids, data attributes or classes the scripts use, and do not add a framework, a build step or a new font.

Then read the diff and reject changes you did not ask for, such as a new font link.

Cursor is an editor with an agent in it, not a host, so the finished folder goes to a static host: GitHub Pages, Netlify, Cloudflare Pages or any server that serves files. Upload index.html, LICENSE and CREDITS.md; AGENTS.md and DESIGN.md are notes for agents, not part of the site.

Before publishing, connect or remove the contact form, replace the preview image and favicon, and write a real title and meta description. Keep the Design: 8B footer link unless the site owner asks to remove it.

If you would rather not touch code or hosting at all, 8B also has a builder where you describe the site and edit it in chat: designing is free, and publishing with hosting is $9 a month billed yearly.

The Codex page covers another agent that edits files in a folder.

• It does not edit the live demo. The browser tool can open the demo, but a rendered page is not the source. Work from the downloaded files; use the demo and a screenshot only as a visual reference.
• It cannot know your facts. Names, prices, reviews, opening hours and addresses in every template are invented.
• It does not add a back end. Forms send nothing until you connect Formspree, Netlify Forms or your own endpoint, and no template has a cart or payment.
• It needs a connection to render. Fonts load from Google Fonts, GSAP and Lenis from jsDelivr, and photos from Unsplash's servers. With reduced motion switched on, most animation is turned down, so test with the setting both ways.

For Cursor, Codex and the app builders side by side, the wider guide compares what each one reads and writes.

All 101 templates