Build a link-in-bio page

One evening, one file, and a link that looks right when you share it.

It's a good first build. You finish it tonight and it's in your profile tomorrow. Unlike a rented Linktree, it's yours, with no subscription, branding or analytics you didn't choose. On a page made for sharing, what matters is how it reads and how its link preview looks.

The spec and the cuts

• One HTML file under 50KB, with inline CSS and no framework or build step.
• Built for phones, because that's where bio traffic comes from. Max width 480px, centered. Desktop only has to look fine.
• Cut: analytics, a CMS, load animations and anything called a component.

The prompts

Tick what you want and the prompts below change to match. Paste them into Claude Code (or Cursor, or any agent) one at a time, in order. Prompt 2 is the audit: the agent checks its work, fixes what it finds and adds no features.

Where agents go wrong

• A framework for six links. Agents love React plus a bundler. If yours ignores the prompt, say "one file, start over".
• Base64-inlining your avatar. That can triple the file. Keep images as separate files.
• Fake polish. "Make it look modern" turns into gradients and glass cards. Polish here means type scale, spacing and contrast, which prompt 2 checks.
• Forgetting the unfurl. People see this page as a link preview more often than as a page. Without OG tags, every share is an ugly gray box.

Why prompt 4 is in the plan

Ten minutes in, you can't tell whether your bio sounds confident or cringe. Your reviewers can. Prompt 4 connects your agent to my MCP server, which shares the live page and gives you a review link. Send it to two or three people. They pin notes on the page from their phones without logging in, and your agent applies the ones you approve. I build this site the same way.