Guide · Turning files into experiences
Stop sending files. Send the page.
For anyone who has attached a PDF and hoped someone would read it.
Give an AI a file and one sentence, and it comes back as a page people click around, with your branding kept. This guide shows what to build first, how to make it yours, and the three free things you need only if it has to go public.
The idea
Decks, PDFs and spreadsheets were the shape work took because anything more interactive needed a developer. It doesn't now. A file is a snapshot. A page is somewhere people can go.
One sentence does it. Attach the deck. Type the sentence. The page comes back branded, with tabs that click and buttons that copy.
Copy the sentence
Create a website that turns this into an interactive experience.
It's just HTML. What the AI writes is the page's own language: the words, plus the instructions for showing them. You never have to read it.
Three stages. Most things stop at one. Share the link from your AI. Give the page your header. Put it on your own address only if the public needs it.
How it works
- Pick the fileThe one you send most. The sorter below picks it.
- Say the sentenceAttach the file in the desktop app and type it. Sites in ChatGPT, Artifacts in Claude.
- Click everythingIf a button does nothing, say so. It fixes it.
- Make it yoursPaste your website address and ask for the same header.
- Go live only if you mustA DNS record, a place for the files, a thing that renders them. All free.
Ten things you send as files
Sort by how often you send it. The frequent thing pays back every week.
The board packOne page with a tab per audience: the board opens theirs, leadership opens theirs, the numbers are shared.
A director opens the tab with their name on it and nothing else.
Turn this board pack into a website. One tab for the board, one for the leadership team, with the shared numbers on both. Keep our branding. Make every figure clickable to its source page.
The monthly donor updateA page that shows this month's work with the photos large, the numbers counting up and one clear thank-you.
A donor taps a photo and reads the story behind it.
Turn this monthly update into a website for our donors. Lead with what their money did this month, show the photos large, animate the key numbers, and end with a thank-you and one way to reply. Keep our branding.
The staff handbookA living handbook: one page per policy, a search box, and a last-updated line that is actually true.
Someone searches for the leave policy and finds it in one click.
Build a handbook website from these policies. One page per policy, a search box, a change log, and a last-updated date on every page. Keep the wording exactly as written.
The AI policyThree rules in plain words on the first screen, the full policy one click below each.
Someone reads the three rules in the time they would have spent not reading the PDF.
Make an AI policy web page from this document. First screen: the three rules people must follow, in plain words. Behind each rule, the full policy text it comes from, unchanged. Keep our branding.
The volunteer manualA volunteer hub with a tab per role, so shift leads see theirs and drivers see theirs.
A new volunteer picks their role and gets only what applies to them.
Build a volunteer website from this manual. One tab per role. Each role sees only its own instructions, contacts and checklists. Keep the wording as written and keep our branding.
The impact reportA scrolling page where the year moves as you scroll and the key numbers count up.
A supporter scrolls and the numbers animate as they pass.
Turn this impact report into a scrolling website. Animate the key numbers as they come into view, put the stories between them, and keep every figure exactly as it appears in the report. Keep our branding.
The spreadsheetA dashboard with the totals up top and a filter for each column that matters.
Someone filters by program and the totals change.
Turn this spreadsheet into a dashboard website. Totals at the top, a chart for each figure that changes month to month, and a filter for each column that matters. Do not change any number.
The onboarding packA first-week page with a checklist that remembers what you have done.
A new starter ticks items off across the week and the page keeps their place.
Turn this onboarding pack into a first-week website with a checklist that saves progress, the who-to-ask list, and the documents in the order a new starter needs them. Keep our branding.
The brand guidelinesA brand page anyone can send to a designer: colours to copy, logos to download, the tone in three lines.
A designer copies a hex code straight off the page.
Read our website and build a brand guidelines page from it: colours with copyable hex codes, fonts, logo files to download, and our tone of voice in three lines with examples.
Conference notesA briefing for the team: the six things that mattered as cards, the full notes behind each.
A colleague opens one card and reads only the session that applies to them.
Turn my conference notes into a website for my team. The six things that mattered most as cards, the full notes for each session behind them, and a short line at the top on what we should do next.
If it has to go public
Three free things, feeding each other. Only if the page has to be public.
Something like donors.yourdomain.org. All it is is a setting in your DNS, and Cloudflare is the place to have it. This is the one step you do yourself.
Costs: FreeDone through: Cloudflare
What to type
We want a subdomain called donors on our domain, pointing at our new site. Tell me exactly what to add in Cloudflare, field by field.
All GitHub is, it's really just a collection of files and folders. It holds the HTML: what you want rendered and how. You don't need to understand anything in there.
Costs: FreeDone through: GitHub, through your AI's connectors
What to type
Set up a GitHub repository for this site and put the files in it. Explain each step as you do it.
It connects to your GitHub project, turns the files into a website, and points at your subdomain. These things just feed each other.
Costs: Free plan, personal and non-commercial useDone through: Vercel, through your AI's connectors
What to type
Connect this GitHub project to Vercel, deploy it, and add our subdomain in the Vercel domain settings. Tell me what to check when it is live.
and back to your subdomain
When none of this makes sense
Type this into a fresh chat and let it take you through, step by step.
I've just read a guide about turning my files into web pages and putting them on a subdomain with GitHub and Vercel. I don't understand any of this. Please take me through it step by step, one question at a time.
The sentences to type
Use the desktop app, and the built-in browser when it needs to look at your website.
Copy my header
Paste your website address with it. Works best with the built-in browser, or in Cowork or Codex so the code lands in a folder you keep.
I want to build this, but I want it to have the exact same header as what's built on our current website. Please inspect it and identify what code is needed to replicate it.
Make it live
Only for stage three. Connect GitHub and Vercel in your AI's connectors first; the DNS record is yours to add.
Here's the file. We want to publish this on a subdomain on our website. Please step me through getting this live.
Inspired by the AI Daily Brief episode “10+ Things You Should Build With AI Instead of Sending Files”, 7 June 2026. Listen to the episode