Skip to content
Docs
Sign inGet Pro

Nitip documentation — AI Prompts

Prompts that build the Nitip website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as Cursor, Claude Code, Codex or Windsurf. Read in this order, or jump to what you need.

The prompt book, Prompts.html

Guide What it covers
Getting started What is in the pack, and building the site prompt by prompt
Notes for each tool Notes for Lovable, Bolt, v0, Replit, Cursor, Claude Code, Codex and Windsurf
Making it yours Your text, photos, logo, colours and fonts; adding and removing items and pages
Forms Receiving the Contact and job application forms
Publishing Putting the site online with your own domain
Troubleshooting and questions When the result drifts from the design, and other questions
  1. Open Prompts.html from the download in your browser.
  2. Pick your kind of tool at the top: chat builder or coding agent.
  3. Chat builder: start a new project and send prompt 1 with the screenshots it lists; wait, check, send the next one. Coding agent: copy the pack into your project as nitip/ and send the kickoff prompt.
  4. After the last prompt, replace the demo text in src/content/ and add your photos to public/images/ (Making it yours).
  5. Publish from your tool and set your domain (Publishing).
  • 23 prompts in order: foundation (stack, design tokens, rules), components, header and footer, the demo content, one prompt per page (12 pages), and a finishing prompt for titles, sharing images, sitemap and a last check.
  • The design in numbers: every section’s layout at phone (390), tablet (810) and desktop (1200) width, text styles, colours, spacing and motion — the specification the Nitip Next.js, Astro and HTML templates are built from.
  • Reference screenshots of every page at desktop (1200 px), tablet (810 px) and phone (390 px) width, to attach to the prompts.
  • All the demo content as JSON: site details, page copy, 8 services, 8 projects, 12 blog posts, 12 roles, the team and testimonials — ready to replace with your own.
  • Placeholder images at the size each photo is designed for, the logo, client logos and icons.