Getting started

The pack builds Nitip 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 40 messages: the 23 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 … 23-finish.md)
references/	Screenshots of every page: 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, pages/*.json, collections/*.json
assets/	images/ (placeholders at the right sizes and the SVG logos) 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, menu, cards, accordions, pricing, form fields, the custom cursor … — everything the pages are made of
3	Layout	Header, footer and cursor, and the site details (site.json)
4–10	Content	The collections: careers, posts, projects, services, team, testimonials
11–22	Pages	One prompt per page: Home, About, Projects, Project, Services, Service, Blog, Post, Careers, Career, Contact, 404
23	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 (“The header button should be on the right on desktop, 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 role. Send them as they are. The tool saves them as files and shows nothing new yet — that is expected.

With a coding agent

1. Copy the whole pack into your project folder and name it nitip/.
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 nitip/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 accordions; scroll past the images with motion.

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