Skip to content
Sign inJoin waitlist

Titen documentation — AI Prompts

Prompts that build the Titen 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, projects and sectors, services, photos, videos, logo, colours and fonts; adding and removing items and pages
Forms Receiving the project, contact and newsletter forms
Publishing Putting the site online with your own domain
Troubleshooting and questions When the result drifts from the design, and other questions

In a hurry

Section titled “In a hurry”
  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 titen/ 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. Connect the forms (Forms), then publish from your tool and set your domain (Publishing).

What you get

Section titled “What you get”
  • 20 prompts in order: foundation (stack, design tokens, rules and icons), components, header and footer, the demo content, one prompt per page layout (12), and a finishing prompt for titles, sharing images, sitemap and a last check.
  • The whole site: Home, About, Services, a page for every service, Projects, a page for every sector (Residential, Hospitality, Commercial) and every project, Blog, a page for every post, Testimonials, Contact and 404 — with the header’s project search.
  • 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 Titen Next.js, Astro and HTML templates are built from.
  • Reference screenshots of every page layout 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, 12 projects in 3 sectors, 8 services, 12 blog posts, 12 testimonials, the team and the awards — ready to replace with your own.
  • Placeholder images at the size each photo is designed for, the video posters and 8 icons.

Getting help

Section titled “Getting help”