Vibe coding: let's build your link-in-bio page from scratch (no code, no budget, 30 minutes)
- Ana Inés Urrutia
- hace 13 horas
- 7 Min. de lectura
I'm going to tell you something that took me an embarrassingly long time to accept: the thing stopping most people from building software is not ability. It's not intelligence. It's not even time.
It's the belief that you need to speak the language before you're allowed in the room.
You don't. Not anymore.
What is vibe coding, actually?
Vibe coding is building things with AI by describing what you want instead of writing the code yourself.
That's it. That's the whole thing.
You open Claude, or ChatGPT, or whatever tool you like, and you say: "I want a webpage that shows my three services, has my brand colors, and has a contact button at the bottom." And then AI writes the code. And then you look at it, tell it what's wrong, and it fixes it.
You are not the programmer. You are the creative director. AI is the developer who never sleeps, never gets annoyed at your feedback, and doesn't charge by the hour.
The skill is not coding. The skill is knowing what you want and being able to describe it clearly. Which, if you've ever briefed a designer, written a job description, or explained something to a colleague, you already know how to do.
Why now?
Six months ago, vibe coding was a party trick. You could get AI to write a basic webpage but anything real required you to know enough code to fix what it got wrong.
That changed fast.
The models got better. The tools got better. And a lot of people, designers, marketers, HR professionals, teachers, small business owners, started building real things without writing a single line of code themselves.
I've built interactive widgets, article banners, data tables, forms, and mini web apps this way. Some of them in under an hour. None of them required me to understand what was happening under the hood.
I'm not special. I just started.
And today, you're going to start too. We're building something real, together, right now.
What we're building today
A link-in-bio page. Your name, what you do, 4 to 6 links, your brand colors, and a clean design that's actually yours. Not a Linktree template. Not someone else's aesthetic. Yours.
It will be a file you can drop into any website, or host for free in about 5 minutes.
You need: a computer, 30 minutes, and a free account on Claude (claude.ai) or ChatGPT (chatgpt.com). That's it.
Let's go.
Step 1: Open AI of choice
Go to claude.ai or chat.openai.com. Log in. Open a new chat.
You're going to have one conversation with AI and iterate from there. Don't overthink this. It's a chat, not a form. You can change your mind. You can ask for something and then ask for the opposite. AI doesn't judge.
Step 2: Your first prompt
This is the most important step. The more specific you are here, the less back-and-forth you'll need.
Copy this, fill in the brackets with your actual information, and paste it into AI:
Hit send. Read what it gives you.
Step 3: Preview it
AI will give you a block of code. Here's exactly what to do with it:
Click "Copy" on the code block
Open a plain text editor. On Mac: TextEdit (go to Format > Make Plain Text first). On Windows: Notepad.
Paste the code in
Save the file as index.html — make sure it ends in .html not .txt
Find the file in your folder and double-click it
It opens in your browser
That's your page. That's what it looks like right now. Not bad for 5 minutes, right?
Step 4: Tell it what's wrong
Look at your page. Something is probably not quite right. That is completely normal. That is expected. That is not a failure.
Go back to the chat and tell AI specifically what to fix. Here are examples of good feedback:
"The buttons are too small, make them bigger and add more space between them"
"My name should be much bigger, it should dominate the top of the page"
"The pink is not quite right, use #f03e7a exactly"
"Add a small profile photo circle at the top, centered, with my initials inside"
"The page feels empty, add a subtle dot texture to the background"
"Make the buttons glow slightly when I hover over them"
"Add a thin colored line at the very top of the page in my brand colors"
You can also tell it what you like and want to keep: "The layout is perfect, just change the colors."
Do this 3 to 5 rounds. Each time it gets closer. After 5 rounds you'll have something you're genuinely proud of.
Step 5: Steal this one
If you want a starting point you can customize instead of building from scratch, here's a finished one in my palette. Change the name, tagline, links and colors and it's yours.
Save it as index.html, double-click, and it works immediately. Then bring it to AI and say: "This is my link-in-bio page. I want you to change: [your changes]."
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #080808;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
font-family: 'Inter', sans-serif;
}
.card {
width: 100%;
max-width: 420px;
text-align: center;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f03e7a;
margin: 0 auto 1.2rem;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
color: #080808;
}
h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 10vw, 4rem);
color: #f0ede6;
line-height: 0.95;
letter-spacing: 0.02em;
margin-bottom: 0.6rem;
}
.tagline {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin-bottom: 2rem;
padding: 0 1rem;
}
.links {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 2rem;
}
.link-btn {
display: block;
width: 100%;
padding: 0.9rem 1.5rem;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 4px;
transition: transform 0.15s ease, filter 0.15s ease;
}
.link-btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
.btn-ghost {
background: transparent;
color: #f0ede6;
border: 1px solid #2a2a2a;
}
.btn-ghost:hover { border-color: #444; }
.footer {
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #333;
}
</style>
</head>
<body>
<div class="card">
<!-- Replace YN with your initials -->
<div class="avatar">YN</div>
<!-- Replace with your name -->
<h1>Your Name</h1>
<!-- Replace with your tagline -->
<p class="tagline">One line about what you do and who you help.</p>
<div class="links">
<!-- Replace href and text for each link -->
<!-- Button styles: btn-pink, btn-lime, btn-lav, btn-ghost -->
<a href="https://yourwebsite.com" class="link-btn btn-pink">My Website</a>
<a href="https://yourlink.com" class="link-btn btn-lime">Second Link</a>
<a href="https://yourlink.com" class="link-btn btn-lav">Third Link</a>
<a href="https://yourlink.com" class="link-btn btn-ghost">Fourth Link</a>
</div>
<p class="footer">yourhandle everywhere</p>
</div>
</body>
</html>
Step 6: Put it on the internet
Option A: You have a Wix or Squarespace site: Add a new page, find a "Custom HTML" or "Embed code" block, paste the code in. Done. You now have a /links page on your own domain.
Option B: You want a free standalone URL right now: Go to tiiny.host. Upload your index.html file. You get a URL like yourname.tiiny.site in 2 minutes. Free.
Option C: You want something permanent and free: Create a free account on github.com. Create a new repository named yourname.github.io. Upload your index.html. Your page is live at yourname.github.io. Free forever.
One example
Ok so I need you to understand something before we continue.
Julian Casablancas is not just a musician to me. The man wrote Last Nite, Reptilia, and Human Sadness. He fronts both The Strokes AND The Voidz simultaneously, runs his own label (Cult Records), and his Instagram handle is @minorbutmajor which is possibly the most Julian Casablancas thing that has ever existed.
So when I needed an example for what a link-in-bio page could look like, there was genuinely no other option.
Here's what I built as a demo, same process as what you just learned. One prompt to the AI describing the vibe (dark, rock, NYC, collage energy), a few rounds of feedback, done.
When it goes wrong
It will go wrong at some point. Here's exactly what to type:
The code looks weird when I open it "Here is my current code: [paste code]. Here's what's wrong: [describe it]. Fix it."
I asked for something and it did something completely different "That's not what I meant. Let me be more specific: [describe it again, more precisely]."
It stopped making sense and everything is broken Start a new chat. Paste your current code and say: "This is my link-in-bio page so far. Here's what I want to fix next: [your ask]."
I changed something manually and now it's broken "I think I broke something by editing the code. Here's what it looks like now: [paste code]. It used to [describe what it looked like]. Can you fix it?"
AI has infinite patience. You can ask the same thing five different ways. Use that.
The thing that trips people up
They ask AI a vague question, get a vague result, and decide vibe coding doesn't work.
It does work. You just have to be the creative director, not the passenger. AI will do exactly what you tell it to do. If you tell it something vague, it makes vague choices. If you tell it something specific, down to the exact color, the exact words, the exact layout, it builds that exact thing.
What to build next
Once your link-in-bio is live, here are four more things you can build the exact same way:
A pricing table — your services, prices, and a button per tier
A feedback form — name, email, one question. Useful after workshops or events.
An FAQ section — questions that expand when you click them. Drop it on any webpage.
A countdown timer — for a launch or an event. Give it a date, pick your colors.
Each one is one prompt to AI. You now know how to do this.
You already have the most important skill
Knowing what you want and describing it clearly is rarer than people think. Most developers spend more time understanding what the client actually wants than they do writing code.
You've been doing that your whole career. You briefed designers. You wrote job descriptions. You explained things to people who didn't have your context.
That's the skill. You already have it.
Now go build your page. Share it when you're done. I want to see it. 👇
Comentarios