Notes for each tool

The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and leave the framework to the tool: Vite with React Router in Lovable, Bolt and Replit, Next.js in v0 and, by default, in coding agents. Tools change often; if a step below looks different, the idea stays the same.

Chat builders

Lovable

• Start a new project and send prompt 1 as the first message, with its screenshots attached.
• Lovable keeps the whole project in view, so later prompts can say “the Header from prompt 3” and it finds it.
• Connect GitHub (in the project settings) early if you want a copy of the code outside Lovable.
• Forms: set VITE_FORM_ENDPOINT as described in Forms, or ask Lovable to store submissions in its database instead.

Bolt

• Start with prompt 1 in a new project; attach the screenshots to each message.
• Bolt’s preview shows errors as they happen — when one appears, ask Bolt to fix it before the next prompt.
• Instead of the Content prompts (4–10), you can upload the pack’s content folder into src/content/ and the assets/images folder into public/images/.

v0

• v0 builds with Next.js. Send prompt 1 in a new chat, then the rest in the same chat, with their screenshots.
• If a chat grows too long, v0 may lose track of earlier prompts: start the next prompt with “Continue the Nitip site in this project; the foundation and components already exist.”
• Instead of the Content prompts, you can add the pack’s content and assets files to the project.

Replit

• Use Replit’s Agent in a new React (Vite) app; send the prompts in order with their screenshots.
• Ask the Agent to run the app after each prompt and check the preview.

Coding agents

Cursor, Claude Code, Codex, Windsurf and similar agents read files, so they don’t need the Content prompts or the screenshots pasted in:

1. Create an empty folder (or an empty Next.js project) and copy the pack into it as nitip/.
2. Send the kickoff prompt from Prompts.html (choose Cursor, Claude Code, Codex, Windsurf at the top).
3. Let the agent work through nitip/prompts/ one prompt at a time, and review each page as it lands.

Agents that can open a browser (for example with a browser or Playwright tool) can compare their pages with the screenshots in nitip/references/ and the section heights in nitip/checklist.md.

If you prefer another stack — Astro, SvelteKit, Vue — say so in the kickoff prompt: the prompts describe the design, not the code.

ChatGPT, Claude or Gemini in a chat window

A chat assistant without a project can write the code, but you would have to put the files together and run them yourself. Use a builder or an agent instead; if you already work in a chat assistant’s project or canvas, send the prompts in order as with a builder.