guide make_it_yours
Make this theme yours with an AI assistant
Everything in Presign can be changed by asking an AI coding assistant such as Claude Code or ChatGPT in plain words. This page says what you need, where each thing lives and what to ask for, step by step.
you need
Before you start
An AI assistant
Claude Code works inside the folder and edits files for you. ChatGPT works too: paste the file it asks for and copy its answer back.
Node 22.12 or later
Check with node -v in a terminal. Then run npm install once, and npm run dev to see the site at localhost:4321.
About 30 minutes
Name, logo, colour and copy take most of it. Sanity and the deploy are ten minutes each.
steps 01-08
From Presign to your site
Open the folder
Unzip the theme, open the folder in your editor or terminal and start your assistant there, so it can read every file.
Ask Claude Code or ChatGPT:
Read README.md and GUIDE.md in this folder and tell me in five lines how this Astro theme is organised. Do not change anything yet.
Name and logo
The name is site.name in src/data/site.json. The mark is drawn in src/components/Mark.astro and the signature in src/assets/signature.svg, both as plain SVG.
Ask Claude Code or ChatGPT:
Change the site name from Presign to My Product in src/data/site.json and replace the mark in src/components/Mark.astro with my logo from ./my-logo.svg, 26 px tall.
Colours and fonts
Every colour, size and font is a token in src/styles/tokens.css. Fonts are self-hosted files in public/fonts.
Ask Claude Code or ChatGPT:
Change the accent colour in src/styles/tokens.css to #7C5CFF and swap Red Hat Display for Inter, self-hosted in public/fonts. Keep AA contrast.
The copy
Every page reads src/data/site.json. Keep the keys, change the words. Headings keep their last words together automatically.
Ask Claude Code or ChatGPT:
Rewrite src/data/site.json for My Product, a tool that does X for Y. Keep every key and the list lengths, plain words, no em dashes, made-up example data.
The check panel
The product panel is HTML in src/components/CheckPanel.astro with five states in site.json under panel. It is reused on several pages.
Ask Claude Code or ChatGPT:
Rewrite the five check panel states in src/data/site.json (panel) for my product's own flow, keeping the same fields.
Renders and loops
Six renders live in public/media as a poster, an MP4 and a WebM each. Same file name, new picture; alt text is in src/data/media.json.
Ask Claude Code or ChatGPT:
Replace the six renders in public/media with my files from ./my-media, keep the names, and write new alt text in src/data/media.json.
Connect Sanity
Optional. Create a free project at sanity.io, put its ID in .env, run npm run seed to copy the demo content, then npm run studio to edit it.
Ask Claude Code or ChatGPT:
Walk me through connecting this theme to Sanity: creating the project, the .env values, npm run seed and npm run studio. Stop and wait for me at each step.
Deploy
Cloudflare Pages, Netlify and Vercel all work: build command npm run build, output folder dist, and SITE_URL set to your domain.
Ask Claude Code or ChatGPT:
Help me deploy this Astro site to Cloudflare Pages with build command npm run build and output dist, and set SITE_URL to https://www.my-domain.com.
where things live
One file for each kind of change
| what | where |
|---|---|
| Copy of every page | src/data/site.json (or Sanity) |
| Colours, type, spacing, motion timing | src/styles/tokens.css |
| Logo mark and signature | src/components/Mark.astro, src/assets/signature.svg |
| Renders and loops | public/media, alt text in src/data/media.json |
| Check panel | src/components/CheckPanel.astro, the panel in site.json |
| Form address, guide tips on or off | src/site.config.ts |
| Sanity fields | studio/schemaTypes/spec.mjs |
Copy of every page
where src/data/site.json (or Sanity)
Colours, type, spacing, motion timing
where src/styles/tokens.css
Logo mark and signature
where src/components/Mark.astro, src/assets/signature.svg
Renders and loops
where public/media, alt text in src/data/media.json
Check panel
where src/components/CheckPanel.astro, the panel in site.json
Form address, guide tips on or off
where src/site.config.ts
Sanity fields
where studio/schemaTypes/spec.mjs
leave as it is
What not to change
src/middleware.ts
It keeps the last words of every text together, so no line ends with one word alone.
The scripts folder
Seed, zip and link checks. They work as they are.
The keys in site.json
Change the words freely, but keep the keys and the shape, or Sanity and the pages will not find them.
Done? Set guide to false in src/site.config.ts and every tip, the Make it yours pill and this page's link disappear from the site.