Vibecode build plans · № 1

Build a link-in-bio page

One evening, one file, no framework — a plan you can paste into your agent, with the traps marked.

A link-in-bio page is the perfect first vibecode: small enough to finish tonight, real enough to put in your profile tomorrow, and — unlike the rented Linktree version — yours. No subscription, no branding you didn't choose, no third-party analytics quietly attached to your name.

This plan is opinionated. It will steer your agent away from the failure modes we see constantly (frameworks for six links, glassmorphism as a substitute for taste) and toward the thing that actually matters for a page whose whole job is being shared: how it reads, and how it unfurls.

The spec — and the cuts

• One HTML file. Inline CSS, no build step, no framework, under 50KB. You are one person with six links, not a web platform.
• Mobile-first, because ~everyone arriving from a bio is on a phone. Max-width 480px, centered; it should merely look fine on desktop.
• Cut: analytics, CMS, animations on load, and anything called a component. If you outgrow this file, you'll know.

The prompts

Tick the features you want — the prompts below rewrite themselves. Then paste them into Claude Code (or Cursor, or any agent) one at a time, in order.

Where agents go wrong on this build

• Reaching for a framework. Left alone, most agents will scaffold React + Tailwind + a bundler for six links. The prompt forbids it; if yours does it anyway, say "one file, start over" — it's cheaper than untangling.
• Base64-inlining your avatar. One profile photo pasted as a data URI can triple the file. Keep images as separate files next to the HTML, or link them by URL.
• Fake polish. Gradient backgrounds, glass cards, and float animations are what "make it look modern" degenerates into. Real polish on this page is type scale, spacing, and contrast — which is why prompt 2 audits those and not vibes.
• Forgetting the unfurl. A link-in-bio page is seen more often as a link preview than as a page. If the OG tags are missing, every share of your link is an ugly gray box. This is the highest-leverage detail on the whole build.

Why the feedback step is in the plan

You will stop seeing this page accurately after about ten minutes of working on it. Whether the bio reads as confident or cringe, whether the link titles mean anything to someone who isn't you — that's exactly the judgment you can't make about your own page. Prompt 4 wires your agent to our MCP server: it shares the live page, you send the link to two or three people, they tap and pin notes right on it (no login), and your agent reads the notes back and applies what survives your judgment. The loop that built this very page.