How Do You Vibe Code a Website Feature Without Writing Code?
I open Claude Code, describe what I want in plain English, and let it build. I added a newsletter signup component to all 24 blog posts on sucana.ai in 20 minutes. I typed zero lines of code. Claude Code handled the component, the auto-injection logic, the styling, and the Beehiiv API connection. I just talked and made decisions.
The Jarvis Thing
I grew up watching Iron Man. Tony Stark talks to Jarvis, tells it what he wants, and it builds the thing. I always thought that was the coolest part. Not the suit. The conversation.
For years I kept thinking about that. Every time I opened a code editor or hired a developer for something that should take five minutes, I thought: where is my Jarvis?
I do not have the glass lab overlooking the mountains. I am sitting at my desk in Bali with a cup of coffee. But I have something Tony Stark would recognize. I talk to Claude Code and it builds what I describe. Not tomorrow. Right now, while I am talking.
That is vibe coding. You describe the vibe. The AI writes the code. It is the same approach I use for everything from content automation to reporting at Sucana.
Here is what happened today.
What I Wanted to Build
Victor my co-founder looked at our blog analytics and said: "People read the first half and leave. Nobody scrolls to the bottom."
I said: "So if we want newsletter signups, the form needs to be in the middle, not at the end."
He nodded. "But you have 24 articles. You are not going to edit all of them manually, right?"
I was not. That is exactly the kind of task I refuse to do manually.
Step 1: First I Needed Data
I typed: "Research where newsletter signups convert best on blog posts in 2026."
Claude pulled data from Wisepops, OptinMonster, and Sumo. Mid-article inline forms convert 5-10%. End-of-post forms convert 1-2%. Popups convert higher but annoy people. Sticky bars sit around 3%.
That made the decision for me. Middle of the article. Where people are still reading. The same kind of data-first decision making Victor applies when he reads campaign performance numbers.
Step 2: One Function for 24 Articles
I was not going to open 24 files and paste the same component into each one. So I told Claude: "Auto-inject it at the midpoint of every post. I do not want to edit 24 files."
Claude wrote a function that finds the halfway point of each article, splits it at a clean paragraph break, and drops the signup box in between. One function. All 24 articles. I did not touch a single file.
That is the whole point of vibe coding. You describe the outcome. The AI handles the labor.
Step 3: Dark Charcoal, Not Purple
The site already has a lot of purple. I told Claude: "Make it dark charcoal, not purple."
Three options came back with trade-offs. I picked dark charcoal. It built the component with a dark card, white email field, and a purple button that matches the Sucana brand.
Then I looked at the button. "Make the button round on both sides, not square on one end." One sentence. Fixed. No mockups. No Figma file. No designer explaining border radius values.
Step 4: The Copy Was Mine
This is the part the AI should not decide. I dictated: "Sign up for The Lead. The AI newsletter for marketing agencies. One AI experiment per week. We break it down so you can steal it."
Claude put the words in. Make the button say "Join hundreds of marketing agencies." Updated. Make the mobile text bigger. Bumped up. Three rounds, each one a single sentence from me. About two minutes total.
Nobody knows my audience better than I do. The AI handles the code. I handle the words.
Step 5: The Beehiiv Tag Almost Did Not Exist
Victor asked me: "How do we know who signed up from the blog versus LinkedIn?"
I had not thought about that. I asked Claude: "Can you check in Beehiiv that everybody coming through the blog gets a tag blog-signup?"
Claude looked at the API code and found there was no tagging at all. Beehiiv needs a separate API call for tags. So it added one.
I said "test the connection." Claude hit the Beehiiv API from the terminal. Created a test subscriber. I watched it show up in Beehiiv with the right tag. Confirmed. Deleted the test. All without opening a browser.
One question saved months of messy data.
Step 6: Push It
Two words. One command. Vercel auto-deployed. Live on all 24 articles within 60 seconds.
Twenty minutes from idea to live on the website.
What Vibe Coding Actually Feels Like
I sent Victor the live link. He clicked through three articles. The signup was there, in the middle, on every single one.
"You did this in 20 minutes?" he asked.
"Twenty minutes."
"At the agency, this would have been a ticket. Then a meeting about the ticket. Then a designer. Then a developer. Then QA. Then a release window."
Tony Stark never had to open Jira, write a ticket, wait for a sprint, or explain to a developer what "round on both sides" means. He just said it and Jarvis made it happen.
That is what this felt like. I talked. It built. I decided. It shipped.
The thing most people miss about vibe coding is that it is not about AI writing code. It is about a founder making decisions at the speed of conversation. Every prompt I typed was a decision. Where to place it, what color, what copy, how to tag subscribers. The AI just executed faster than any developer could. That is the skill every marketer actually needs in 2026: knowing what you want and telling the machine clearly.
I am not a developer. I do not want to be one. I want to describe what I see in my head and have it exist on the internet 20 minutes later.
The glass lab and the mountain view would be nice. But honestly, Jarvis was the part that mattered.
And that part is real now.
What I Would Do Differently
Victor messaged me the next morning. "We got 11 signups overnight from the blog. But I cannot tell which articles convert best."
He was right. I would have asked Claude to build a conversion counter from day one. Right now I can see total signups in Beehiiv, but not the conversion rate per article.
I would also have asked Claude to A/B test the copy from the start. Three rounds of copy changes, but no way to measure which version actually converts better. Next time, I build the test before I push.
Frequently Asked Questions
Do I need coding experience to vibe code?
Not at all. I have zero coding experience. I describe what I want in plain English. Claude Code handles the implementation. If something looks wrong, I describe what is wrong and it fixes it.
The skill you need is not coding. It is knowing what you want. Clear instructions get clear results.
No-code tools give you templates and drag-and-drop builders. You work within their constraints. Vibe coding has no constraints. You describe exactly what you want and the AI builds it from scratch.
I could not have auto-injected a component at the midpoint of 24 articles with any no-code tool. That required custom code. I just did not have to write it.
How long did this actually take?
Twenty minutes from first prompt to live on all 24 articles. The longest part was the copy. I spent about five minutes going back and forth on the button text and mobile font size.
The technical build, the component, the auto-injection, the Beehiiv integration, took maybe eight minutes total.
Claude Code (the CLI version of Claude), a code editor like VS Code or Cursor, and a website you can deploy to. I use Next.js on Vercel, but the approach works with any stack.
You also need a Beehiiv account if you want newsletter signups, but that part is specific to my setup.
Can I vibe code anything or just simple features?
I have vibe coded full blog deployments, LinkedIn content automation, and an AI analytics dashboard. The newsletter signup was a simple one. But the principle scales.
The more specific you are about what you want, the better the output. Vague prompts get vague results.
What if Claude Code builds something wrong?
You tell it what is wrong. "The button is square on one end, make it round on both sides." That is it. The feedback loop is instant. You do not file a bug report. You just say what you see and it fixes it.
In my 20-minute session, I made four corrections. Each one took less than 30 seconds to describe and fix.
Is vibe coding just for developers who want to code faster?
The opposite. Vibe coding is most powerful for people who cannot code at all. The same approach lets you turn an internal process into something users actually want, like a lead magnet built with AI. Developers already know how to build. Founders and marketers who know what they want but cannot implement it, those are the people who get the most value.
I went from "I need a developer for this" to "I will just tell Claude" in one afternoon. That shift changed everything about how fast we ship at Sucana.
How do I know the code Claude writes is good?
I do not read the code. I test the output. Does the signup form appear in the middle of every article? Yes. Does the Beehiiv tag show up when someone subscribes? Yes. Does it look right on mobile? Yes.
If the result works, the code is good enough. I am not trying to win a coding award. I am trying to ship features.
What was the conversion rate after adding the signup?
Too early to share real numbers. The signup went live today. I will update this article once I have 30 days of data.
What I can say is that mid-article placement consistently outperforms end-of-post placement by 3-5x based on the research Claude pulled.
Can I use this approach with ChatGPT instead of Claude Code?
ChatGPT can help you plan and write code snippets, but it cannot execute commands, push to GitHub, or test API connections directly. Claude Code runs in your terminal and does all of that.
For vibe coding where you want to go from idea to deployed in one session, Claude Code is the tool that makes it work end to end.
