You wrote a guide. You send it to people as a file, and that's the end of it. They forward it, you never find out who read it, and you have no way to follow up.
Here you turn that same document into a page on the internet that stops halfway and asks for an email before it opens the rest.
You keep the email. They keep the guide. Nothing is downloaded and nothing is emailed.
The Claude Code extension. In VS Code, click Extensions in the left sidebar, search Claude Code, install the one by Anthropic, then sign in. You need a paid Claude account — free won't run it.
Your guide, as a Word document or PDF. Whatever you already send people.
👉🏽 That's the whole list. No GitHub, no database, and nothing that costs money beyond the Claude account you already have.
Part 1 — get your guide onlinePayoff: a real link with your guide on it
1 Put your guide in a folder
Make a new folder anywhere — Desktop is fine — and drop your Word doc or PDF inside it. Then in VS Code, File → Open Folder and pick that folder.
👉🏽 One guide per folder. That's the whole project.
2 Turn it into a page
Open the Claude Code panel and paste this in:
Prompt — Make the page
There's a document in this folder. Read it and turn it into a single web page that reads like a real guide, not a file dumped on a screen. Keep my headings and lists, make it look right on a phone, and give it a clear title at the top. Use my words — don't rewrite my content, add sections, or invent anything that isn't in the document. Tell me when it's ready and how to look at it.
Approve it when it asks. When it's done, read the page and check it against your original. This is the moment to say "the second heading is wrong" or "you dropped my bullet list" and have it fixed.
3 Create a Vercel account
Go to vercel.com/signup and sign up. The free plan is all you need and it doesn't ask for a card.
You don't have to set anything up there. Just have the account.
4 Put it online
Prompt — Deploy it
Put this page on the internet using Vercel, straight from this folder. Install whatever you need, walk me through logging in when it asks, and when it's live give me the link on its own line so I can click it.
A browser window opens once so you can log into Vercel. That login is how it knows which account is yours. It then creates a brand new project and gives you a brand new address — you don't pick anything or paste a link anywhere.
👉🏽 That link is real. Send it to someone right now and they'll see your guide. This is the first thing worth stopping to look at.
Part 2 — trade it for an emailPayoff: the page stops halfway until someone signs up
5 Create a free Systeme.io account
Go to systeme.io and sign up. This is where the emails you collect will land, and the free plan covers everything here.
Already use something else for email? Skip this — the prompt in step 8 works with most email tools, you'll just paste in a different key.
6 Copy your API key
In Systeme.io: Settings → Public API Keys → create one and copy it.
⚠️ That key is a password. Don't paste it into a video, a screenshot, or anywhere public. If it ever gets out, delete it on that same screen and make a new one.
7 Put the key in Vercel
Do this before you write any code, so the key only ever lives in one place and never touches your computer.
In Vercel, open the project from step 4 → Settings → Environment Variables. Add one:
Name: SYSTEME_API_KEY
Value: the key you just copied
Save it. Use that name exactly — the next prompt tells Claude to look for it.
👉🏽 Claude never sees your key and never needs to. It writes code that asks for it by name, and Vercel hands it over when the page is running.
8 Cut the guide in half
Back in VS Code:
Prompt — Add the email gate
Cut my guide off after the first section and put an email box there, with one line telling people to enter their email to read the rest. When someone submits it, the rest of the guide opens on the same page.
Send the address to Systeme.io as a new contact. Read my API key from an environment variable called SYSTEME_API_KEY — don't ask me for the key and don't put it in any file.
The most important part: the second half of the guide must NOT be in the page until after someone submits their email. If the whole thing is sent to the browser and just hidden, anyone can read it by viewing the page source and the gate is fake. Fetch the rest from the server only after the email goes through.
Handle someone entering a nonsense email, and don't let a Systeme.io problem stop them reading the guide — I'd rather lose the contact than block a real person.
9 Put it live and test it
Prompt — Deploy again
Deploy this again with the changes and give me the live link. Then tell me how to check that the email is actually reaching Systeme.io, and what to look at if it isn't.
Open the link on your phone. Read the first section, hit the email box, put in a real address you can check. The rest should open, and that address should appear in Systeme.io in your contacts.
👉🏽 Test the gate properly: right-click the page before you enter an email and choose View Page Source. If you can find the second half of your guide in there, it isn't gated — go back to step 8 and tell Claude exactly that.
If you get stuck
Common problems
The page looks nothing like my document. Tell Claude exactly what's wrong, in plain words: "you dropped my numbered list," "the headings are in the wrong order." It has your file and can look again.
Emails aren't showing up in Systeme.io. Check step 7 — the variable has to be named SYSTEME_API_KEY exactly, and it only takes effect on the next deploy. Add it, then run the deploy prompt again.
I changed my guide. How do I update the page? Replace the file in the folder, tell Claude what changed, then run the deploy prompt again.
Can I do this for a second guide? New folder, new document, run through it again. They're separate pages with separate links.
Want the parts that turn this into a business?
Your own domain instead of a Vercel link, the welcome sequence that follows up automatically, and what to actually sell these people once they're on your list, that's what we build together inside the community.