A link in bio page is a small problem that every tool solves the same way: a stack of grey buttons on a coloured background, with the tool's name at the bottom. It looks like the tool, not like the business.
An assistant will write you a real page instead, in one pass, if you tell it where to find the brand and what the page has to do. Below is the prompt we use, unedited, followed by three finished pages it produced and the honest list of what goes wrong.
The prompt
Paste this whole thing into Claude or ChatGPT. Fill in whatever links you have and delete the rest. The important part is the second step: it will come back with a palette, a font and a proposed link order, and it waits for you to confirm before writing anything.
Build a single HTML page to use as the link in my Instagram bio, replacing my Linktree.
MY LINKS (paste what you have, in this priority order):
- Current Linktree or bio page: [url]
- Website: [url]
- Instagram: [url]
- Google Business Profile (listing or search): [url, or business name + city]
- Anything else I want on the page: [url] - [url]
Leave anything blank and skip it.
WHAT TO DO FIRST
1. Read all of it. From the website, take the visual identity: fonts and colors in hex, and the logo. From the Linktree, take the existing links and their titles. From Google, take the rating, the number of reviews, the address and two or three short quotes. From Instagram, take the handle and the tone of voice.
2. Before building, show me in one short message: the palette (five or six colors, each with the job it does), the font you picked (use the site's font if it is on Google Fonts, otherwise the closest match), and the list of links in the order you propose, each with a title and a one line subtitle. The first link is the main call to action and gets the emphasis. Ask me if that is right and only build after I confirm.
3. Then build the page.
PAGE RULES
- Mobile first: one column, about 440px max, centred, large tap targets, iPhone safe area
- One file, no dependencies beyond Google Fonts, icons as inline SVG, logo embedded as base64
- Pick the structure, do not assume it. Tell me in step 2 which shape you chose and why. A roastery and a tattoo studio should not come out with the same skeleton in different colours
- The identity block has to establish who this is within one screen. A circular logo above the name is one way. A full bleed image with the name over it, a typographic lockup with no logo at all, or a wordmark on its own line are others. Choose from what the brand already looks like
- Then one block that makes the business concrete. Choose the form from what the business actually is:
a number that genuinely matters, counting up from zero, with bars for the supporting figures
what is available right now, as a list: today's dishes, the coffees on the shelf, the next three open slots
the work itself, as a grid: pieces, rooms, past jobs
a process in three steps, or a short before and after
Pick one and commit to it. Do not stack all four
- If there is a Google Business Profile: a location block with the rating, stars, "X reviews on Google" linking to the listing, two or three reviews fading slowly from one to the next, and two buttons, book or contact, and directions
- Links: a stack of icon cards is one option, and it is the most common one, which is a reason to consider the others first. A numbered index, a compact text list with rules between the items, or a two column grid of tiles can all read better depending on the business. Whatever form you choose, the first link is the main action and gets the emphasis, and every target is comfortable to tap
- Motion stays subtle: one cascade on load of about 1.5 seconds, a periodic glow on the main call to action, one or two blurred shapes in the brand color drifting in the background, and everything static under prefers-reduced-motion
- OG meta tags and a favicon from the logo. WhatsApp links open with the message already filled in
- Calm, direct copy. No exclamation marks and no emoji
- Before you hand it over, render it at 390px wide and check the line breaks, the contrast and every link
Give me the finished .html file, ready to host.Two things in there do most of the work. Pointing it at your website lets it read your real fonts and colours instead of inventing a palette, and pointing it at your Google Business Profile gets the rating, the review count and a couple of real quotes onto the page. Those two make the difference between a page that looks like your business and a page that looks like a template.
What it produces
Three businesses, three verticals, one prompt. Every one is a single HTML file with one script, and Google Fonts is the only external resource.
- Northbank Kitchen, a twenty seat restaurant: book a table, this week's menu, roast to take home, take the whole room, find the door.
- Cardinal Coffee Roasters, a small batch roastery: order a bag, book the cupping table, subscription, Saturday market, wholesale.
- Atelier Ink, a tattoo studio: waiting list, flash sheet, custom piece, aftercare, the studio.
All three are fictional businesses and every number and quote on them is illustrative. They exist so you can see the output before you spend an evening on your own.
Notice what they do not share: not the palette, not the typeface, and not the shape of the page. The restaurant opens with a stat card and stacks its links as icon cards. The roastery has no hero card at all, it opens with what is actually on the shelf this week and lists its links as a plain text index. The studio opens with a grid of the work and a booking status bar, and numbers its links. That is three different skeletons, not one skeleton repainted three times.
It is worth being blunt about why, because it is the failure mode of every prompt you will find for this. If the prompt dictates the components, a hero card with a counting number, links as icon cards, then every business it touches comes out the same shape, and you have rebuilt the exact thing you left. The prompt above asks the assistant to choose the structure and say which one it picked and why. When it defaults to the same layout twice, tell it so and make it pick again.
Then it needs somewhere to live
The assistant hands you a file. A file is not a link, and this is where most people get stuck: they end up emailing themselves an .html attachment, or pasting it into a code sandbox that wraps it in someone else's chrome.
Drop it into Hostus and it has a URL. The free plan is 20 documents and 2 MB of HTML, and the pages above are about 14 KB each. You can put it on your own domain, edit the live page in place without the link changing, and every version is kept.
If you would rather use a visual builder than a prompt, Carrd is the honest alternative and we say so on its own comparison page.
What we measured
| Measured on 2026 09 08 | The four pages from this prompt | The Linktree page for the same business |
|---|---|---|
| Network requests | 2 to 5 | 72 |
| Hosts contacted | 1 to 2 | 6 |
| Script tags in the DOM | 0 or 1 | 56 |
| DOM nodes | 100 to 129 | 1,087 |
Method. Chrome, PerformanceResourceTiming plus a DOM count, on a real
restaurant profile and on each of the four demo pages linked from this article, which is why
our side is a range. We are not publishing a byte comparison: per resource
sizes come back as zero for cross origin responses because of Timing Allow Origin, so any weight number
you see quoted in this category is either guessed or unmeasured. Requests, hosts, script tags and DOM
nodes are all directly observable, so those are what we report.
One of the six hosts on the Linktree page is edge.browser-fp.production.linktr.ee.
What goes wrong, and the fix
It invented a colour palette
You did not give it a website, or the site you gave it is mostly images. Tell it the hex codes directly, or paste a screenshot of your site and ask it to pull the palette from that.
The logo came out blurry
It embedded a low resolution copy. Attach the logo file directly and tell it to embed that as base64, rather than letting it pull whatever it found on the site.
Every link looks equally important
You gave it a flat list. Say which one is the money link. The prompt asks for the first link to be the main call to action, but it cannot guess which of your five links pays the bills.
It reads well on desktop and breaks on a phone
Ask it to render at 390 pixels wide and check line breaks and contrast. That instruction is in the prompt, and it is the one assistants skip most often. Ask again and it will fix it.
The animation is too much
Say so plainly: one cascade on load, nothing else. The prompt aims for subtle, but taste varies and this is a one line correction.
It wrote React, or three files
Tell it again: one HTML file, no build step, no dependencies except Google Fonts. Assistants default to a framework when you do not pin this down.
Good to know before you switch
Hostus is not a link in bio builder with a dashboard of draggable rows. The loop is: you describe the page to Claude or ChatGPT, you get one HTML file, you drop it into Hostus and you get a link. Changing a link later means editing the page in the inline editor or asking the assistant again, not dragging a row up two places on your phone. If reordering links in ten seconds from a bus is the job, Linktree does that better and we would rather you knew that now.
The free plan is 20 documents and 2 MB of HTML. A page like the ones above sits at about 14 KB, so the ceiling is real but far away. There is no click count per individual link either: Hostus reports which sections of a page were actually read, which answers a different question.