I’m not a designer. I can spot good UX, but I can’t build it from scratch. So I wanted to explore whether AI could help me (and other marketers like me) bridge that skill gap.
In our UX test on AI website builders, vibe coding platforms emerged as the best for AI web design. But the designs felt basic and templated, likely because I didn’t do any kind of prompt engineering to help improve the outputs.
Now I’ve put the top platforms to the test, running over 180 prompts through them. I wanted to discover what prompts resulted in designs that felt like they had been created by a professional designer.
Here’s what worked, what didn’t, and how you can use AI to design high-quality web experiences with or without design skills.
TL;DR Summary
- You need to bring your own branding: AI web design platforms can easily design clean, modern websites, but not custom-branded elements or creative, out-of-the-box design layouts.
- Use a combination of AI tools: Different tools have different strengths. For instance, Figma is ideal for branding and design system documents. ChatGPT is great for structuring your initial prompts. Base 44, Bolt, and Lovable are best at coding the functionality.
- AI needs a lot of direction: Without a clear vision and direction, it defaults to generic, template-like designs. There’s no magic prompt that will get you a perfect outcome in one go.
- Guardrails matter: The more specific or complex the task, the more structure your prompt needs. For example, list out all the features to include and which features NOT to include.
- Let AI write your prompts: AI-generated prompts outperformed my human-generated ones. They’re more structured and integrate advanced prompting techniques automatically.
- Start with structure: First, determine the sections you want on the page, and then work toward the details of how they will look and function.
The biggest takeaway is that you can’t shortcut the process. AI cannot replace original design thinking.
You still need to know what visual and functional outcomes you want to achieve and guide your AI tool towards them, one prompt at a time.
Methodology of My Prompt Testing
To understand how different prompts truly impact AI-driven UX and web design, I tested a wide range of prompt styles across multiple platforms and scenarios.
Following the experiment on which AI website builders follow UX best practices, I tested out the three winning vibe coding platforms (Base 44, Figma Make, and Bolt) and Lovable (since it’s so popular).
I ran over 180 different types of prompts as tests to gauge how outputs can be improved with different prompt engineering techniques.
In this batch of testing, no platform emerged as definitively better than the others. They’re all heavily dependent on the quality of the prompts. As they say, “garbage in, garbage out”. So if you give a good platform a bad prompt, you could easily end up with a bad outcome.
The optimal balance comes from allowing an AI tool to create a structured prompt for you. For instance, I used ChatGPT and a handful of prompt generators for this test. They all performed better than the prompts I created.
As an optional boost, you can also strengthen those prompts within the platform you’re building in. For instance, you can enhance your prompt in Bolt.new:
Or you can add pre-made styling instructions in Base 44:
In addition to testing various platforms, I also tried using AI for different tasks. For instance, I tested:
- Redesigning the homepage of my (somewhat neglected) website, SEO Meets Design
- Designing a main menu navigation with information hierarchy considered
- Creating a visual brand identity from scratch that I could use for future prompts
- Implementing scroll effects and animations to add pops of movement and intrigue
- Generating a hero section that leaned on creative uses of typography instead of images
- Making layouts responsive and adaptive to different devices and screen sizes
I wanted to see how far I could push the limits on using AI to help me with tasks that I’d typically need to outsource to a professional designer.
Types of Prompts Tested
The way you create your prompt makes a big difference to the output each system will generate.
Not only that, but different prompts worked better for various tasks, too. Here are the variations I tried out in this test.
Prompt sources
I tested whether creating prompts myself was more effective than those generated by AI.
I’ll call it how it is: when it comes to prompt engineering, I get lazy. Most of my prompts are simple, short, and fairly unstructured. For instance, here’s one for a specific project I had in mind:
And here are some basic prompts I used to explore more general curiosities, testing if and how AI could handle them.
It’s an intuitive way many people prompt AI these days, so I wanted to see how I’d go.
Truth be told, I achieved some of the worst results with this method as the starting prompt, especially when assigning a large task that required outsourcing a significant amount of creative thinking and flexibility to AI.
It would often go in the wrong direction because my prompts were too broad, and also because I didn’t really know how to articulate what I was thinking.
However, this method was generally the best for follow-up prompts when asking for small or specific details to be tweaked.
I also tested out prompts generated by ChatGPT. For instance, here’s one it created with guardrails when I expressed that the AI platforms were generating full homepage designs when I only wanted to generate a specific component:
As a marketer with limited design skills, it never crossed my mind to include most of the details in this prompt. While it wasn’t perfect, it was a major improvement on my bare-bones prompts.
Also, with a single prompt, it achieved what it would have taken me 10–15 prompts to reach on my own, saving me many credits while designing.
I also experimented with:
- Asking ChatGPT to create platform-specific prompts for each AI website builder
- Using prompt generators to customize and improve my initial prompts
- Enhancing the prompts with features directly in each platform
The AI-generated prompts that were also enhanced within each platform performed the best. They weren’t perfect right out of the box, but they were much better than generic prompts.
I also didn’t notice a significantly better effect from using prompt generators compared to asking ChatGPT to generate prompts.
For example, here’s the beginning of a prompt optimized for Lovable using lovableprompts.app:
It was about as long, structured, and detailed as comparable prompts generated by ChatGPT. It also included elements like the following:
- Task overview
- Core features
- Design specifications
- Technical requirements
- Implementation steps
- User experience
ChatGPT’s prompts took a different approach, but overall, the output was comparable to that of other AI-generated prompts I tested.
Structured prompts
Prompt structure matters. It not only helps you save credits when building but also organizes your requirements in a machine-friendly way.
There are simple, intuitive prompt structures you can use when crafting your own prompts and requests, like the following:
I tried out six different ways to structure prompts:
- Who, what, why: A classic framework that focuses on clarity and context.
- RACE: Defining the role, action, context, and expectation.
- User story: Designed to shape outputs around end-user value.
- Feature breakdown: A list-style prompt that decomposes a complex request into specific, actionable components.
- SCQA: Framework-driven prompting that offers details about a situation, complication, question, and answer.
- Blueprint: A technical layout or schema that tells the AI how to structure the output.
Unless asked otherwise, AI-generated prompts tend to use the blueprint and feature breakdown methods most.
I also found that these worked well as initial prompts for complex tasks or outputs. For instance, designing a full webpage requires multiple components and steps. Adding a feature breakdown in the prompt acts as an early guardrail to keep the AI platform on track with what you want.
When requesting a simple change, via a follow-up prompt or edit, this level of detail and structure is often unnecessary and can confuse the AI instead.
Basic vs advanced prompt techniques
The last thing I tested was whether advanced prompting techniques are necessary, or if regular folks like me can get decent results without needing to become full-fledged prompt engineers. The prompt techniques I tried out included:
- Zero-shot: A single prompt with no examples or prior context.
- Few-shot: Provide a few examples of the task and its ideal response format, then ask the model to generate a similar output.
- Plan-then-execute: First ask the model to outline a plan, then evaluate or refine it, and finally have the model execute it.
- Chain of Thought: Encourage the model to think step-by-step out loud before answering.
- ReACT: The model alternates between reasoning (thinking) and acting (executing an external function or response) in the same interaction.
- Self-Critique: The model reviews its own output, finds flaws, and improves it in a follow-up step.
I had mixed results when testing these approaches. The more clarity I had on the design direction and output I expected, the more success I also had using these techniques.
In general, the fewer design assets I had available to include in the prompt, the more advanced the prompting technique needed to be. For example, the “plan-then-execute” technique allowed AI to help fill in the gaps if I didn’t supply a brand identity, Figma design system, or product requirement specs.
Most non-designers won’t have any of these documents, so asking AI tools to help you create them or fill in the gaps helps you get better outputs later.
For example, here’s a snapshot of a brand identity kit generated with Base 44:
The rest of the kit also included directions on fonts and typography, icon styles, spacing and layout, example components, and usage guidelines.
You can also use existing design assets, like pre-made Figma templates, instead of generating these from scratch.
When It’s Worth Using AI for Web Design (And When It Isn’t)
After testing all these variables and running 180+ prompt tests, one thing became clear: you can get great results if you’re willing to guide the process with good prompts.
But that doesn’t mean everyone should try to use AI for web design.
For instance, if you’re hoping that AI will just do all of the design from scratch, these tools won’t meet your expectations.
They are not yet able to deliver pixel-perfect execution, custom on-brand visuals, or complex UX functionality.
However, AI tools are worth using when:
- You need a fast prototype to validate, pitch, or test an idea
- You don’t have design skills, but you can clearly describe what you want. Or have a visual identity system to rely on
- You’re comfortable iterating and refining outputs instead of expecting perfection in one prompt
In these cases, the secret to better results comes down to learning how to prompt your AI platform properly.
From Prompt to Prototype: A Playbook for Better AI Web Design
Here’s how you can apply the insights from the tests above to your UX and design workflows for better results when using AI.
1. Define your visual direction first
Before writing any prompt, decide what your design should look and feel like and how you’d like users to experience it. Think about:
- The brand colors and fonts
- Example screenshots of designs you like
- Mood or design styles like “minimalist” or “bold”
You’ll get better outputs if you attach screenshots of visual inspiration and branding identity information to your prompts as you work on each project.
One of my biggest lessons when running these tests was that AI struggled with tasks that relied purely on creative judgment (like designing a hero section based on interesting typography).
No amount of advanced prompting will fill the gap in your vision or design direction for the project.
2. Consider the functional requirements you need
If you’re designing a website, it helps to go through our website planning process to think through all the features and functions you’d like your website to have.
For example, by doing this, you could include the following details in your prompts to AI so it can build exactly what you need:
- The pages you plan on building
- The website’s goals and main call to action
- The target audience to attract
- Rough page templates and layouts
- Specific components you’ll need for your planned pages
You don’t need to have all the details figured out, but it’s still worth thinking about these things so you can properly guide your AI platform in the right direction.
It helps to put all the information you do have into a quick product requirements brief that you can also attach to your first project prompt so the AI gets an overall sense of what you want to make.
For example, here’s what I used for the homepage redesign tests:
For tests that were specific to one component, I kept it very simple, just listing essential requirements:
You can use a tool like ChatGPT to help you generate these pretty quickly. You can also take a screenshot of designs you like on other websites and ask it to turn them into prompts.
3. Iron out your prompt accuracy before moving forward
It’s very easy to let a lot of incorrect or irrelevant details slip into prompts if using AI to generate them.
For simple tasks (like generating scroll effects and animations), it’s not a big deal. However, when it comes to complex tasks, custom functionality, or specific design requirements, accuracy is crucial.
I didn’t spend much time tweaking or perfecting the prompts for this test. However, it’s worth editing and refining these if using AI to build your website. If incorrect details are included (especially in early prompts), it can significantly derail the project and confuse the AI.
So before moving on to the next stage in your process, focus on the accuracy of your initial prompts and any documents you attach for context.
4. Layouts first, styling next, interactions last
One of the biggest mistakes people make when prompting AI design tools is asking for everything at once—the layout, colors, animations, typography, copy, and imagery—all in a single prompt.
When you do that, the AI has to make too many creative decisions simultaneously, which usually leads to messy output.
The best way to improve the quality of outputs is to focus on the big elements like layout and structure first. It’s like putting up the frame and walls of a house.
Then focus on the styling details so that things are in the right spot and look how you want them to. End with the functional layer and build interactions into each component.
Why This Works
- AI tools are much better at structural reasoning (what goes where) than aesthetic reasoning (what it should look like).
- A clean layout becomes a “canvas” you can then layer brand identity, animations, and polish onto.
- If the structure is wrong, everything else will be wrong. No amount of color and motion can fix bad UX.
Here’s an example prompt sequence you can emulate to help you get the structural elements locked in first and then work your way to the styling and functionality.
5. Build in layers, one component at a time
No magic prompt will get you a perfect output in one go.
Designing with AI is an iterative process where each prompt improves one small section at a time until there are no more elements that need edits. As you go through the process of building and refining your website, these tips may help:
- Focus on what you want the AI to do, not how you want it to go about it. Check your prompts to make sure you’re directing the output, not the process.
- Use AI to fill gaps, not make final decisions. AI is great at implementation, like adding a scroll effect or animation, but it’s not great at conversion-savvy UX or design choices.
- When you don’t know what to call a specific component or design element, ask the AI. Use that name in future prompts so there’s no confusion about what elements you want it to edit.
- Don’t move on until the element you’re currently working on is perfect.
These prompting tips by Base 44 are also very helpful for follow-up prompts:
The State of Prompt Engineering for UX and Web Design
AI design tools can generate layouts quickly, but they don’t replace the thinking that makes a page usable, persuasive, or on-brand. The real value isn’t in letting the tool “design for you,” but in using prompts to speed up the early stages, allowing you to focus on refinement.
Across every prompt tested, the same pattern held:
- Good prompts = better first drafts
- Structured prompts = fewer revisions
- Sequential prompting = higher-quality outputs
- AI-generated prompts (refined by a human) consistently outperformed human-written prompts
The takeaway: AI is most useful when you treat it as a production accelerator, not a creative substitute. It can give you a working prototype, but it won’t fix unclear requirements, weak UX decisions, or vague creative direction.
If you want strong results from any AI platform, the process matters more than the tool. Define the intent, guide the structure, iterate in stages, and use AI where it removes effort, not where it replaces judgment.
That’s the shift: not “AI will design for you,” but “AI makes it faster to reach the point where real design work begins.”
