Making it yours
After the last prompt you have the Nitip site with its demo text and grey placeholder photos. Everything a visitor
reads lives in src/content/, so most changes are edits to text files — or a sentence to your AI tool.
| What | Where |
|---|---|
| Agency name, browser title, description, site address | src/content/site.json → site |
| Menu, contact details, footer links, social links | src/content/site.json |
| The copy of each page | src/content/pages/<page>.json (home.json, about.json, …) |
| Services, projects, blog posts, roles, team, testimonials | src/content/collections/<name>.json |
Change the text between the quotes and keep the field names. Or ask your tool: “Change the agency name to Brightside
and the contact email to hello@brightside.co in site.json.” Set site.url to your domain before you publish — the
sitemap and share links are built from it.
Adding and removing items
Section titled “Adding and removing items”Each collection is a list. To add a blog post, project, service or role, copy an item in its file, give it a new
slug (it becomes the address, e.g. /blog/my-first-post) and change the fields. It appears in the lists, gets its
own page and joins the sitemap. Delete an item to remove it. Ask your tool if you prefer: “Add a service called Brand
Strategy to services.json, with the same fields as the others.”
Photos
Section titled “Photos”The pack uses placeholders; each shows the size its photo is designed for (for example 1920 × 1280). Put your
photos in public/images/ with the same file names — project-urbaneats.jpg, blog-1.jpg … — and they replace the
placeholders. Keep the proportions close to the placeholder’s so the crops look right. Good free sources:
Unsplash, Pexels.
In a chat builder, upload the photos and tell the tool which file names to give them.
Logo and icon
Section titled “Logo and icon”The logo is public/images/logo.svg (the header and footer use it; a white version is made from the same file). Replace
it with your own SVG at the same proportions (112 × 30), or ask your tool to use your file. The browser tab icon is
public/icon.svg.
Colours, fonts and sizes
Section titled “Colours, fonts and sizes”Prompt 1 set up the design tokens: colours (--color-ink, --color-canvas, --color-accent …), the font, text
styles and spacing. Change a token and the whole site follows: “Change –color-ink to #0B2545 and the font to
Manrope.” Keep the text styles’ sizes per breakpoint unless you want a different rhythm.
To remove a page, delete it and ask your tool to take it out of the menu, the footer and the sitemap. To add one, write a prompt in the style of the page prompts — list its sections and reuse the components (“a Title Section, then a Value list”) — so it matches the rest.