AI Bio Link Page: One URL for All Your Links
You have a Twitter profile, a LinkedIn, a portfolio, a newsletter, and a Gumroad page. Someone asks for your links and you end up pasting five separate URLs into a chat. A bio link page built with AI solves that: one URL that holds everything. Here is how to build one in about five minutes.
Why Build Your Own Instead of Using Linktree
Linktree, Beacons, and similar tools work fine. But there are a few things that consistently come up:
- You are on a subdomain you do not control (linktree.ee/yourname, not yourname.com)
- Free plans add their branding to your page
- Customization is limited unless you pay monthly
- You are dependent on a third-party service for something as basic as a list of links
A custom HTML bio page hosted on your own URL costs nothing and looks better. You control the design, the content, and the URL. AI handles the code.
What a Bio Link Page Needs
Keep it simple. A bio link page that works has:
- Your name or handle, clearly at the top
- A one-line description of what you do (optional, but worth adding)
- Your links, labeled clearly, in priority order
- A way to contact you or follow you
- A clean design that loads instantly on mobile
That is the whole thing. Bio pages that try to be personal websites get confusing. The ones that just show links and look clean do the job.
The Prompt
Build me a bio link page as a single HTML file.
Name: [your name or handle]
Tagline: [one sentence about what you do -- optional]
Links to include:
- [Label]: [URL]
- [Label]: [URL]
- [Label]: [URL]
(add as many as you need)
Design: clean, centered layout. Large, easy-to-tap buttons for each link.
No JavaScript. Inline CSS only. Mobile-first design.
One accent color: [your color].
Background: [dark with light text, or white with dark text].
The prompt is intentionally short because the page is simple. Do not overthink it. Add your real links, pick a color, and run it.
What the AI Generates
You get a single HTML file with your links formatted as buttons, your name at the top, and a centered layout. It looks like a proper bio page, not a developer output. The structure works on mobile by default since that is where most visitors will see it.
The first draft is usually ready to share. A few tweaks after (covered below) make it feel more like yours.
Design Tips That Actually Matter
Most bio link pages look similar: centered layout, dark background, rounded buttons. Two things make a difference if you want yours to stand out:
Color. A single accent color applied consistently, on buttons or hover states, looks more intentional than a colorless page. Use whatever you use elsewhere: your brand color, your website's accent. Pass it in the prompt and the AI applies it throughout.
Spacing. More space between links is almost always better. Cramped buttons feel like a 2015 template. Ask for "generous spacing between elements" and the AI defaults to something more current.
Making It Live
Paste the HTML into HTMLPub and you get a live URL in seconds. Free tier, no credit card. If you want a custom domain (yourname.com), that is available on paid plans.
For publishing options compared side by side, see vibe coding a website for free. For a similar workflow with more sections and content, see how to build a portfolio website with AI.
Customizing It
Three quick changes after the first draft:
Reorder the links. The AI puts them in the order you listed them. Move your most important link to the top. If you are growing a newsletter, that goes first.
Add a photo. A headshot makes the page feel like yours. Add it with a follow-up prompt: "Add a circular profile photo above my name. Use this image: [URL to your photo]."
Set a favicon. Add <link rel="icon" href="data:image/svg+xml,..."> to the head. Small detail, noticeably more polished.
Common Issues
Buttons look inconsistent across browsers. Add appearance: none; -webkit-appearance: none; to the button CSS. It resets browser defaults.
The page looks cramped on mobile. Add more padding to the container: padding: 16px is usually enough.
You want to add a link later. Open the HTML file and copy the pattern of one existing link button. Paste it, update the label and URL. You do not need to regenerate the whole page.
What to Do Next
A bio link page is the minimum viable online presence. Once it is up, decide whether you need more. If clients need to see your work, AI website builder for freelancers covers positioning and what to put on a portfolio. If you want a full portfolio page, AI portfolio website builder walks through the complete workflow.
For most people, the bio link page holds up for a long time. Build it once, update the links as you go.