I’m no stranger to marketing strategy, messaging frameworks and the kind of narrative clarity that makes a landing page convert. The challenge comes when I send the copy to a developer.
Without a UX designer in the middle, I have limited means to show the visualized page, leading to endless rounds of back-and-forth, meaning my creative momentum tends to hit a wall. For a recent project, I used AI to vibe code (code using natural language) a sample landing page for a client so that I could send over the text and a visual layout.
My goal wasn’t a perfect page. I wanted to see how far I could get with AI handling the research, writing and layout. Could I go from idea to rough draft of a live page without burning three days in Figma and a gallon of decision fatigue? The answer was a cautious yes, with a few caveats, some late-night debugging and a few “Ah, so that’s what it can’t do” moments along the way.
Here’s how it went, what I learned and what I’d tell any marketer tempted to vibe-code their next build.
Using AI for audience and competitor research
My goal was to create a landing page around AI offerings. I started with Claude. My prompt was simple:
- “Help me develop a focused landing page around <client offerings in AI> using existing copy and a better understanding of my target audience. Make the tone match <company’s brand voice>.”
I fed it past landing page drafts, a basic audience persona and a list of competitors’ positioning statements.
Claude delivered a positioning framework — not award-winning, but solid and useful. It distilled the key messages I’d circled for weeks and suggested clearer articulation for a few core differentiators. It misunderstood a few points on the landing page, so we went back and forth until I felt satisfied with the overall approach and differentiation.
Collaborating with AI on copywriting
Next, I moved to ChatGPT to tackle the copy. My goal was to generate rough versions of headlines, subheads and CTAs. Based on the positioning Claude had helped me define, I asked for a few variations of each section. ChatGPT had a lot of context on this particular assignment, so it was well-suited for this copywriting.
Some of the output was oddly formal, and some leaned too far into AI-hype territory. But a few gems emerged quickly. It did a great job creating CTAs that were varied and reflected our brand voice, something I’ve always struggled with. (The ubiquitous “Learn more” CTA often ends on my landing pages.) I added some of these verbatim to my landing page prompt.
With just a bit of editing, I was able to nudge ChatGPT toward my voice. I’d paste my slightly revised version of its first draft and ask it to match that tone in the future. By the third round, the model gave me paragraphs that needed almost no cleanup.
For example, ChatGPT initially gave me, “Accelerate your marketing with the power of AI.” I responded, “Let’s try something less buzzword-heavy and more grounded. Maybe something like, ‘Get more done without burning out your team.’”
The next version returned with, “Work smarter, not louder.” Now we were getting somewhere!
Dig deeper: How AI’s ‘describe and done’ can revolutionize your work
The big pivot to vibe coding the layout
This is where the experiment took a turn. Instead of wireframing in a design tool, I decided to vibe code my way into a layout. That meant using AI to generate a rough HTML structure that matched the mood and flow of the copy.
Since I used Lovable — a tool that generates HTML layouts from natural language prompts — and it charges by the prompt, I wanted to consolidate as much as possible into each one. I took a screenshot of a page whose design I liked for reference and attached it to the chat. I pasted in the copy from above, then asked ChatGPT to provide me with a detailed prompt that I could use in Lovable. I told it I wanted a clean, modern SaaS-style layout with friendly type, generous whitespace and clear visual hierarchy. Here’s the Lovable prompt that ChatGPT produced:
Prompt:
“Create a warm, intelligent and confidence-inspiring landing page for <client’s> AI consulting services. The audience includes VP-level leads and senior leaders who are grappling with AI integration challenges in complex enterprises. The goal is to move them from curiosity or scattered pilots into structured, strategic engagement with <company> as their trusted AI advisor.
The tone should be:
- Human-centered, practical, not overly techy.
- Reflective of deep expertise without arrogance.
- Lightly authoritative, with empathy for leaders navigating uncertainty.
The page should include:
1. Headline: Captures urgency + reassurance (e.g., “AI Won’t Wait”)
2. Subhead: Describes company’s role as trusted guide (e.g., “From scattered pilots to strategy without the chaos.”)
3. Primary CTA: “CTA” or “CTA” (gated)
4. Self-segmentation section: A visual journey selector each linking to appropriate offers
5. Offer highlight tiles: Small, accessible next steps like
6. Social proof and trust signals: One short client quote and/or stat from a relevant enterprise
7. Thought leadership carousel: Link to webinar recording, ebook and short video series
8. About the Model: Brief summary with visual
9. Closing CTA options:
– “Talk to an Advisor”
– “Book a Custom AI Strategy Session”
– “Get Your AI Roadmap”The layout should be clean and scrollable, with clear hierarchy, bold section headings and icons or light animations to encourage interaction. Use brand colors: #015b99, #6ec1e4, #e3c269, #d4d4d4. Prioritize mobile responsiveness and emotional resonance over complexity.”
The results weren’t ready for production but were close enough to feel like a real page.
This approach helped me see the whole experience of the landing page in context. I could drop in copy, upload new images and adjust the layout in real-time using natural language prompts. It was more like sculpting than designing — less pixel-perfect and more energy-driven.
But vibe coding has limits. When I hit a layout bug that pushed my CTA button into oblivion, I spent a frustrating hour trying to fix it with AI. No luck. I finally gave in and asked a developer friend for help. He fixed it in five minutes.
The lesson? AI is fast until it’s not. And sometimes, humans are just better at solving messy, ambiguous problems.
Dig deeper: How to build interactive applications with generative AI
Where AI shone and where it fell short
The best part of this experiment was seeing the reactions when I delivered the copy and layout as an URL. The client thought I had secret development talent, and we wasted far less time going back and forth on layout and copy changes. Delivering what “felt” like a fully functional webpage was a huge win.
I was impressed with how much faster I moved. I didn’t get stuck staring at a blank screen, agonize over placeholder copy or lose hours debating font sizes. AI gave me momentum. It gave me a starting point for everything. And in most cases, that starting point was about 70% of the way to good.
But the final 30% still belonged to me. I had to shape, refine, delete and clarify. I had to ensure the page reflected the brand I’m building and the people I’m trying to reach. And I had to know when to stop tweaking and hit publish.
Next time, I’ll be even clearer in my prompts. I’ll give the models more examples of my tone. And I’ll know sooner when I’ve hit the edges of what AI can do.
Practical recommendations for marketers
If you want to try vibe coding yourself, set clear expectations. AI won’t give you a finished product, but it will give you a stronger outcome than copy alone. Lead with content, not layout. Trust that AI has seen enough web pages (it has) to make a good one for you.
When you start the layout, describe the vibe you want, not just the structure. AI does surprisingly well when you say things like, “I want a page that feels welcoming, modern and focused.” Upload reference pages. And know when to stop. The temptation to keep tweaking is real and costs real money. Publish, test, learn and then go again.
Not a magic wand, but more than a nice trick
AI sped up my creative process and allowed me to think more about strategy and less about scaffolding. It created a landing page that facilitated richer conversations and helped me move from zero to something. As a marketer, I have a powerful new tool to bring my visions to life.
Dig deeper: Why AI proficiency is today’s must-have marketing skillis today’s must-have marketing skill
The post Lessons from letting AI vibe code a landing page appeared first on MarTech.