Getting started — Kalme AI Prompts

The pack builds Kalme 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 22 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 … 22-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, strips side by side)
content/	The demo text as JSON: site.json, pages/*.json, collections/*.json
assets/	images/ (placeholders at the right sizes, the logos and the video posters) 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 the form, the logo and icons
2	Components	Buttons, links, the section label and title, project, service, post, testimonial, value and team cards, the services accordion, the pricing card with its Weekly / Monthly switch, form fields, the image ticker, the videos … — everything the pages are made of
3	Layout	Header and footer, and the site details (site.json)
4–10	Content	The collections: services, projects, posts (in four parts), then testimonials, team and legal texts
11–21	Pages	One prompt per page layout: Home, About, Services, Service, Projects, Project, Blog, Post, Contact, the legal pages, 404
22	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 header button 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–10) are long on purpose: they carry the demo text of every service, project, 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 six desktop slices and three 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 kalme/.
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 kalme/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; open the rows of the services accordion on Home; switch Weekly and Monthly on a service page; send the contact form in demo mode.

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