Episode 5 — Vibecoding: Build and Publish on the Internet Without Writing Code

## The PDF Problem: Content Without Delivery

[A] "Imagine spending hours cooking an incredible Michelin star meal — putting your absolute heart into it. And then you serve it to your guest in a soggy cardboard takeout box."

[B] "Oh wow. Yeah, that completely ruins it. It feels cheap."

[A] "Exactly. The food itself might be brilliant, but the presentation completely undermines the perceived value of all that hard work. And honestly, that is exactly what modern marketers are doing right now. You use cutting-edge AI to do deep research, synthesize data, draft brilliant strategy — only to deliver the final product to your client as a boring static PDF."

[B] "It's painful to watch, honestly. So today we're opening up a highly practical technical guide that maps out a complete paradigm shift for your daily workflow. Our mission is to explore how you can stop merely describing your work and start actually shipping it. We are talking about building live web pages without writing a single line of code."

[A] "It sounds like a lofty promise, I know. But the workflow we are analyzing today genuinely bridges the gap between human strategy and AI execution. It's about taking all that strategic horsepower and finally upgrading the delivery vehicle."

## Why a Live URL Changes Everything

[B] "Okay. Let's unpack this, because there is this glaring irony in our industry right now. We are all running faster than ever. We have automations handling the repeatable work. The content we are producing is undeniably better because models like Claude have these massive context windows. The system is just humming along perfectly."

[A] "The engine is great. But the deliverable we hand to the client at the end of the day, it's still a Word document. It's still a slide deck. It's a flat file that a client receives, they read it, and then they file it away in some digital drawer to gather dust. It's like upgrading to a state-of-the-art electric sports car engine — but dropping it into a wooden horse-drawn carriage."

[B] "What's fascinating here is how this mismatch directly affects client psychology. You really have to put yourself in the client's shoes and think about what we call the red pen mentality."

[A] "Oh, the red pen mentality. I like that."

[B] "When a client opens a PDF or a slide deck, it doesn't matter how beautifully designed it is — their brain instantly categorizes it as a draft. It implicitly invites critique, debate, endless revision loops. They literally feel obligated to find something wrong with the copy or the layout."

[A] "That makes so much sense. It's categorized as a proposal of work that might happen in the future, rather than an actual finished product. But when you hand a client a live URL — an actual web link, a functioning web page they can click on, scroll through, interact with — it short-circuits that red pen mentality completely."

[B] "Because it feels real. It triggers a user testing mindset instead. They are experiencing it, not proofreading it. It shifts the conversation entirely from 'what do we think about this abstract idea' to 'how quickly can we launch this reality?' You aren't asking for permission to build the thing — because you have already built the thing."

[A] "But the friction is, historically, building the thing meant coding. And most marketers aren't front-end developers."

## The Artifacts Interface in Action

[B] "This guide outlines a specific solution that changes this dynamic completely. It relies on Claude Desktop and specifically a feature called Artifacts. Instead of just giving you text back in a chat window, there's a dedicated preview panel next to your chat. It takes the code the AI generates and renders it visually in real time."

[A] "Oh, wow. So you don't even see the code?"

[B] "Basically, yeah. It completely abstracts the raw code away from the user. You really don't have to look at the HTML if you don't want to. So let's walk through what this daily agent-human workflow actually looks like in practice. The guide gives this incredibly specific prompt to demonstrate the required level of detail — you type something like: 'Build a simple landing page for a workshop on AI for marketers. Headline: from ChatGPT fan to 10x marketer. Short intro, three benefit bullet points, a lead capture form asking for name, email, and why do you want to join — with a submit button. Use a modern design, white background, black text, with a sharp orange accent.'"

[A] "Notice the architecture of that prompt. You aren't just saying 'make me a cool landing page,' because that's what most people do and the AI just guesses."

[B] "And it usually guesses wrong. Instead, you are providing the exact structural elements, the headline, the specific form fields, and explicit stylistic constraints. You are giving the AI clear boundaries to operate within. So you hit enter, and instantly, this artifact panel opens up on the side — your landing page renders right before your eyes."

[A] "It's pretty magical the first time you see it. But here's where it gets really interesting — it's not really perfect on the first try, right?"

[B] "Right, it's a starting point. So you look at it and maybe the layout feels kind of cramped. Instead of diving into the HTML to fix the padding — which would be a nightmare for a non-coder — you literally just talk to the AI. You type: 'The headline is too long, shorten it. Move the form higher right below the intro.' And it just executes it. The visual preview updates instantly."

[A] "It's an entirely new feedback loop. The speed of iteration is reduced from days of back and forth with the dev team to literally a few seconds in a chat window. But I have to pause and push back on this. What happens when the AI hallucinates? What if it writes buggy code? If we are telling marketers they don't need to know code, how on earth do they fix a syntax error they don't even understand?"

[B] "That is the exact fear most strategists have, and it's a highly valid concern. But that misunderstands the workflow shift here. It's less like learning to paint and more like becoming an art director. You aren't mixing the pigments yourself — you are looking at the canvas and telling the painter to use more blue."

[A] "Okay, but what if the painter spills the blue paint everywhere? Like, the layout just totally breaks?"

[B] "Then you describe the spill to the painter. You don't debug the code yourself — you debug visually. If the elements are overlapping, you literally tell Claude: 'The text is overlapping with the image on the right side. Fix the spacing.' And if you get an actual error message, you just copy and paste it back into the chat. The AI is the hands — it handles the syntax, the structural rules, and finding that one missing comma. You act as the eyes and the tastemaker. You provide the strategic intent and the visual judgment. You don't need to know how to make the button orange — you just need to know why it should be orange."

## From Preview to Live in Five Seconds

[A] "Okay. So we have this beautiful, perfectly rendered page in our private AI chat. But a private preview isn't a marketing campaign. We can't email a Claude login to our client and say, 'Here, log in and look at this.' So how do we cross the chasm from a local AI preview to the public internet?"

[B] "This is traditionally where the entire process grinds to a halt. But the playbook we are looking at outlines a workflow that is honestly astonishingly fast. We're talking about a literal five-second deployment. Inside that Claude artifact panel, there is a download button. You click it, and it saves a single HTML file to your computer. Then you open a new tab and go to Vercel. You click deploy, and you drag and drop that downloaded HTML file directly into your browser window. Five seconds later, you have a real live URL — anyone in the world can see it."

[A] "But how is that actually happening? What is Vercel doing behind the scenes?"

[B] "Vercel acts like an instant digital landlord. That HTML file you downloaded is essentially just a text document containing all the structural tags and styling rules that Claude wrote. But for people to see it, it needs to be hosted on a server connected to the internet 24/7. When you drag that file into Vercel, their system instantly provisions server space, attaches a global content delivery network so it loads fast anywhere in the world, and generates a public, secure web address. All in five seconds."

[A] "It automates all the backend infrastructure work that used to take an IT team hours or even days to configure. Think about the historical friction. If you wanted to test a new landing page idea a few years ago — you wrote a brief, submitted an IT ticket, waited for sprint planning, argued for prioritization, waited for staging and deployment. It literally took weeks. But now, you control the entire pipeline from ideation to global deployment in one sitting."

## Four High-ROI Assets to Build First

[B] "Once you have that superpower — the ability to bypass the IT ticket queue and put up a live link in five seconds — the obvious question becomes: what do you actually build? Our research highlights four specific assets that completely change how marketers deliver value. The first one is the campaign-specific lead gen form. Say you are running an expensive LinkedIn ad campaign. Typically, companies route that traffic to their generic homepage — which is a huge mistake. The user lands there, gets distracted by the About Us dropdown, reads a blog post, and leaves without converting."

[A] "They get lost in the maze. So the guide suggests building a hyper-focused, disposable landing page for that exact ad. One bold headline matching the ad copy, three bullet points, and one form. No navigation bar, no footer links. You intentionally limit their choices — when a page has a single, inescapable goal, the user either converts or bounces, but they don't get lost."

[B] "The second asset takes this from static design into actual programming. It's an ROI calculator for a sales pitch. If your client sells software that saves businesses money, you use Claude to build an interactive calculator. You are instructing Claude to write the underlying JavaScript that takes an input from the user — say, their current monthly software spend — applies a specific multiplier formula, and instantly updates a projected annual savings field right there on the screen."

[A] "And doing that live in a meeting — having the client type in their own numbers — that completely alters the power dynamic. You are no longer just a passive vendor presenting abstract data. You are an advisor inviting the prospect to literally play with their own reality. When they input their own internal numbers and watch the savings calculate in real time, they own that conclusion. They trust the math because they provided the variables."

[B] "The third example is a simple onboarding page. Think about how clunky it is to onboard a new client with a massive Word document full of links or a horribly disorganized Google Drive folder. Instead, you build a clean, branded onboarding page. You embed their specific timeline, their key contacts, and share a single, elegant URL. It creates a frictionless first impression — and in client services, that initial feeling of organization sets the tone for the entire relationship."

[A] "The fourth asset solves one of the most agonizing parts of marketing: the tone of voice demo. Usually if you're trying to nail down a brand voice, you send a document with three different writing samples. The client highlights phrases, leaves confusing comments in the margins, and it's this subjective mess — the red pen mentality at its absolute worst."

[B] "So here is the workaround. You use Claude to generate three sample LinkedIn posts in three distinctly different tones. But you don't put them in a doc — you ask Claude to build a web page with those three posts side by side in columns. And under each column, you instruct the AI to build a clickable selection button. You open this URL live in the meeting, have the client read them, and ask them to physically click the button of the one they prefer. When the client clicks option B, that column highlights in bright green and the other two fade out. You take a highly subjective debate about brand voice and turn it into an interactive binary choice. You get immediate consensus right there in the room."

## The Three Technical Guardrails

[A] "Before we set you loose to start spinning up dozens of domains before lunch, we need to ground this excitement in reality. We have to talk about the catch. AI isn't magic, and if you don't understand the guardrails, you're going to run into some highly frustrating walls. What are the specific caveats to watch out for?"

[B] "The first one is form data. Claude is amazing at building the visual front end of that form — the layout, the typography, the submit button. But out of the box, a static HTML page doesn't have a database attached to it. If a user types their email and hits submit, that data goes nowhere. It just vanishes into the void."

[A] "So how do we fix that without learning to code databases?"

[B] "The workaround is very elegant. The playbook advises using dedicated lightweight form builders like Tally or Typeform for the actual data collection. You don't build the form logic in Claude — you use Claude to build the beautiful branded landing page wrapper, but you embed a Tally form via a simple iframe code to actually capture the leads. You combine the rapid generation of AI with the secure, reliable data routing of established tools."

[A] "The second limitation is mobile responsiveness. When you are iterating with Claude on your big desktop monitor, it is dangerously easy to look at the wide desktop preview, assume it's perfect, and deploy it. AI models like Claude will often take the path of least resistance — if you don't explicitly tell it to use responsive CSS frameworks like Tailwind or basic Flexbox, it might just hard code fixed widths."

[B] "And then it breaks on a phone. You must explicitly type into your prompt: 'Ensure this layout is fully responsive and stacks cleanly on mobile devices.' If you forget, your client is going to open that impressive URL on their iPhone, the text will be spilling off the side of the screen, and the illusion of your competence shatters instantly."

[A] "And the third guardrail is file management. Always save your HTML file. If you need to update a full sentence or swap an image, you need that original source code. If you have the file, you just drag it back into a new Claude chat, say 'change the headline to this,' and redeploy it in Vercel in thirty seconds. But if you lose it, you are starting from scratch — AI workflows still require highly disciplined, traditional file management to be effective in a professional agency environment."

## The Era of the Disposable Micro-Website

[B] "Which brings us to the end of our deep dive today. We want to leave you with a very specific, actionable challenge. Before this week is over, build one page for a real client or a real internal project. It can be the simplest one-pager imaginable. Build it in Claude, publish it on Vercel, and in your very next client interaction, do not attach a PDF. Send that live URL. Sit back and notice how the entire texture of the conversation shifts from critique to action."

[A] "And as you try this, consider a broader implication to mull over. If deploying a live, bespoke web page now takes five seconds, costs practically nothing, and requires zero coding knowledge — we are essentially entering the era of the disposable micro-website."

[B] "I love that phrasing. Think about the historical weight of a website. It was treated like commercial real estate — permanent, monolithic, incredibly expensive to build, and frankly, terrifying to change. You didn't touch the website unless you had a six-month project plan."

[A] "But what happens to your entire marketing strategy when a website is no longer a permanent fixture? What happens when a functioning URL is just a temporary, hyper-personalized asset generated for a single, specific meeting — or tailored for one individual prospect, only to be discarded a week later? Why send a follow-up email when you can send a personalized, interactive website that took you three minutes to build?"

[B] "The tools have fundamentally changed. Now it's just a matter of whether we change our habits to match them. Stop describing your strategy and start shipping it. Thank you so much for exploring this new workflow with us — get out there, build something amazing, send that URL, and we'll catch you on the next deep dive."