Getting started — Findit AI Prompts

The pack builds Findit one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles, motion, content — and names the screenshots that show how it should look. This guide takes you from the download to a finished site.

What you need

• An AI tool that writes and runs a website: a chat builder (Lovable, Bolt, v0, Replit) or a coding agent (Cursor, Claude Code, Codex, Windsurf). Notes for each are in Notes for each tool.
• A plan with room for about 25 to 35 messages: the 21 prompts, plus a few follow-ups to fix details. Free plans usually run out before the end.
• A web browser to open Prompts.html.

What is in the pack

Folder or file	What it is for
Prompts.html	Open this first: every prompt with a Copy button, the screenshots to attach, and your progress
prompts/	The same prompts as Markdown files (01-foundation.md … 21-finish.md)
references/	Screenshots of every page layout: home-desktop-1.png (1200 px wide, top to bottom), home-tablet-1.png (810 px) and home-phone-1.png (390 px wide, three strips side by side)
content/	The demo text as JSON: site.json, sections.json (copy shared by several pages), pages/*.json, collections/*.json
assets/	images/ (placeholders at the right sizes, the logo and the thank-you illustrations) and icons/
checklist.md	Section heights per page, for agents that can measure what they built

The order of the prompts

#	Prompt	What it builds
1	Foundation	The project, the design tokens (colours, text styles, spacing, motion), the rules for breakpoints, images and forms, the logo and icons
2	Components	Buttons, tabs, chips, property, city, agent, post and team cards, the property filter, accordions, carousel, form fields … — everything the pages are made of
3	Layout	Header and footer (with the newsletter form), the site details (site.json) and the shared section copy (sections.json)
4–7	Content	The collections: properties, locations, categories, agents, posts, testimonials, team, legal texts
8–20	Pages	One prompt per page layout: Home, About, Properties (with the filter pages), Property, Agents, Agent, Blog, Post, Contact, Add property, the thank-you pages, the legal pages, 404
21	Finish	Browser titles and descriptions, share image, icons, sitemap and robots, a last check of every page

Each prompt builds on the ones before it, so keep the order.

With a chat builder

1. Open Prompts.html and choose Lovable, Bolt, v0, Replit at the top.
2. Start a new, empty project in your tool.
3. Copy prompt 1. In the tool’s message box, attach the screenshots listed on the card (drag them from the references folder, or use the attach button), paste the prompt and send it.
4. Wait until the tool has finished and the preview works. Compare it with the screenshots; if something is off, ask for that one fix in a short message (“On desktop, the two header buttons should be on the right, as in the screenshot”).
5. Tick the prompt in Prompts.html and go on with the next one.

The Content prompts (4–7) are long on purpose: they carry the demo text of every property, agent, post and legal page. Send them as they are. The tool saves them as files and shows nothing new yet — that is expected.

Some page prompts list more screenshots than a tool takes in one message (Home has seven desktop slices and four phone images). Attach the desktop ones first; if your tool has a limit, send the rest in a short follow-up (“Here are the phone screenshots for the same page”).

With a coding agent

1. Copy the whole pack into your project folder and name it findit/.
2. Open Prompts.html, choose Cursor, Claude Code, Codex, Windsurf at the top, and copy the kickoff prompt.
3. Send it to the agent. It copies the content and images into the project, then works through the prompts in order, opening the screenshots for each page. The Content prompts are skipped — the files are already there.
4. Check each page as it lands, in the browser, at phone and desktop width. Agents that can run a browser can also compare their result with findit/checklist.md.

Checking a page

• Put the site next to the page’s screenshots at 1200, 810 and 390 px wide: same sections, in the same order, with the same alignment and spacing.
• Resize the window slowly from phone to desktop: the layout changes at 810 px and 1200 px and never scrolls sideways.
• Hover the buttons, cards and menu on a computer; switch the tabs on Home; open the FAQ rows; unfold the property filter at tablet and phone width; send a form in demo mode.

Photos are grey placeholders until you add your own — see Making it yours.