{"id":106652,"date":"2025-11-12T09:00:00","date_gmt":"2025-11-12T17:00:00","guid":{"rendered":"https:\/\/www.crazyegg.com\/blog\/?p=106652"},"modified":"2025-11-10T16:47:06","modified_gmt":"2025-11-11T00:47:06","slug":"ai-web-design-prompts","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/","title":{"rendered":"The Best (and Worst) Prompts for Web Design in AI Builders"},"content":{"rendered":"\n<p>I\u2019m not a designer. I can spot good UX, but I can\u2019t build it from scratch. So I wanted to explore whether AI could help me (and other marketers like me) bridge that skill gap.<\/p>\n\n\n\n<p>In <a href=\"https:\/\/www.crazyegg.com\/blog\/ai-website-builders-ux-test\/\">our UX test on AI website builders<\/a>, vibe coding platforms emerged as the best for AI web design. But the designs felt basic and templated, likely because I didn\u2019t do any kind of prompt engineering to help improve the outputs.<\/p>\n\n\n\n<p>Now I\u2019ve put the top platforms to the test, running over 180 prompts through them. <strong>I wanted to discover what prompts resulted in designs that felt like they had been created by a professional designer.<\/strong><\/p>\n\n\n\n<p>Here\u2019s what worked, what didn\u2019t, and how you can use AI to design high-quality web experiences with or without design skills.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TL;DR Summary<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>You need to bring your own branding: <\/strong>AI web design platforms can easily design clean, modern websites, but not custom-branded elements or creative, out-of-the-box design layouts.<\/li>\n\n\n\n<li><strong>Use a combination of AI tools: <\/strong>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.<\/li>\n\n\n\n<li><strong>AI needs a lot of direction: <\/strong>Without a clear vision and direction, it defaults to generic, template-like designs. There\u2019s no magic prompt that will get you a perfect outcome in one go.<\/li>\n\n\n\n<li><strong>Guardrails matter: <\/strong>The more specific or complex the task, the more structure your prompt needs.\u00a0 For example, list out all the features to include and which features NOT to include.<\/li>\n\n\n\n<li><strong>Let AI write your prompts: <\/strong>AI-generated prompts outperformed my human-generated ones. They\u2019re more structured and integrate advanced prompting techniques automatically.<\/li>\n\n\n\n<li><strong>Start with structure: <\/strong>First, determine the sections you want on the page, and then work toward the details of how they will look and function.<\/li>\n<\/ul>\n\n\n\n<p>The biggest takeaway is that you can\u2019t shortcut the process. AI cannot replace original design thinking.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methodology of My Prompt Testing<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Following the experiment on which <a href=\"https:\/\/www.crazyegg.com\/blog\/ai-website-builders-ux-test\/\">AI website builders follow UX best practices<\/a>, I tested out the three winning vibe coding platforms (Base 44, Figma Make, and Bolt) and Lovable (since it\u2019s so popular).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/10\/17124057\/AI-Website-Builders-Ranking-1024x614.png\" alt=\"\" class=\"wp-image-106304\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/10\/17124057\/AI-Website-Builders-Ranking-1024x614.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/10\/17124057\/AI-Website-Builders-Ranking-300x180.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/10\/17124057\/AI-Website-Builders-Ranking-768x461.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/10\/17124057\/AI-Website-Builders-Ranking.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>I ran over 180 different types of prompts as tests to gauge how outputs can be improved with different prompt engineering techniques.&nbsp;<\/strong><\/p>\n\n\n\n<p>In this batch of testing, no platform emerged as definitively better than the others. They\u2019re all heavily dependent on the quality of the prompts. As they say, \u201cgarbage in, garbage out\u201d. So if you give a good platform a bad prompt, you could easily end up with a bad outcome.<\/p>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>As an optional boost, you can also strengthen those prompts within the platform you\u2019re building in. For instance, you can enhance your prompt in Bolt.new:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153726\/Bolt-Enhance-Prompt-1024x580.png\" alt=\"\" class=\"wp-image-106667\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153726\/Bolt-Enhance-Prompt-1024x580.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153726\/Bolt-Enhance-Prompt-300x170.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153726\/Bolt-Enhance-Prompt-768x435.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153726\/Bolt-Enhance-Prompt.png 1048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Or you can add pre-made styling instructions in Base 44:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"661\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153949\/Base-44-Styling-Instructions-1024x661.png\" alt=\"\" class=\"wp-image-106668\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153949\/Base-44-Styling-Instructions-1024x661.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153949\/Base-44-Styling-Instructions-300x194.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153949\/Base-44-Styling-Instructions-768x496.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10153949\/Base-44-Styling-Instructions.png 1412w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In addition to testing various platforms, I also tried using AI for different tasks. For instance, I tested:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Redesigning the homepage of my (somewhat neglected) website, <a href=\"https:\/\/www.seomeetsdesign.com\/\">SEO Meets Design<\/a><\/li>\n\n\n\n<li>Designing a main menu navigation with information hierarchy considered<\/li>\n\n\n\n<li>Creating a visual brand identity from scratch that I could use for future prompts<\/li>\n\n\n\n<li>Implementing scroll effects and animations to add pops of movement and intrigue\u00a0<\/li>\n\n\n\n<li>Generating a hero section that leaned on creative uses of typography instead of images<\/li>\n\n\n\n<li>Making layouts responsive and adaptive to different devices and screen sizes<\/li>\n<\/ul>\n\n\n\n<p>I wanted to see how far I could push the limits on using AI to help me with tasks that I\u2019d typically need to outsource to a professional designer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Types of Prompts Tested<\/h2>\n\n\n\n<p>The way you create your prompt makes a big difference to the output each system will generate.<\/p>\n\n\n\n<p>Not only that, but different prompts worked better for various tasks, too. Here are the variations I tried out in this test.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompt sources<\/h3>\n\n\n\n<p>I tested whether creating prompts myself was more effective than those generated by AI.<\/p>\n\n\n\n<p>I\u2019ll 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\u2019s one for a specific project I had in mind:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154112\/Human-Generated-Prompt-Example-1024x586.png\" alt=\"\" class=\"wp-image-106669\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154112\/Human-Generated-Prompt-Example-1024x586.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154112\/Human-Generated-Prompt-Example-300x172.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154112\/Human-Generated-Prompt-Example-768x440.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154112\/Human-Generated-Prompt-Example.png 1085w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And here are some basic prompts I used to explore more general curiosities, testing if and how AI could handle them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"725\" height=\"372\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154146\/Human-Generated-Prompt-for-Small-Tasks.png\" alt=\"\" class=\"wp-image-106670\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154146\/Human-Generated-Prompt-for-Small-Tasks.png 725w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154146\/Human-Generated-Prompt-for-Small-Tasks-300x154.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/figure>\n\n\n\n<p>It\u2019s an intuitive way many people prompt AI these days, so I wanted to see how I\u2019d go.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>It would often go in the wrong direction because my prompts were too broad, and also because I didn\u2019t really know how to articulate what I was thinking.<\/p>\n\n\n\n<p>However, this method was generally the best for follow-up prompts when asking for small or specific details to be tweaked.<\/p>\n\n\n\n<p>I also tested out prompts generated by ChatGPT. For instance, here\u2019s 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:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"686\" height=\"1024\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154224\/AI-Generated-Prompt-with-Structure-and-Guardrails-686x1024.png\" alt=\"\" class=\"wp-image-106671\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154224\/AI-Generated-Prompt-with-Structure-and-Guardrails-686x1024.png 686w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154224\/AI-Generated-Prompt-with-Structure-and-Guardrails-201x300.png 201w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154224\/AI-Generated-Prompt-with-Structure-and-Guardrails.png 753w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/figure>\n\n\n\n<p>As a marketer with limited design skills, it never crossed my mind to include most of the details in this prompt. While it wasn\u2019t perfect, it was a major improvement on my bare-bones prompts.<\/p>\n\n\n\n<p>Also, with a single prompt, it achieved what it would have taken me 10\u201315 prompts to reach on my own, saving me many credits while designing.<\/p>\n\n\n\n<p>I also experimented with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Asking ChatGPT to create platform-specific prompts for each AI website builder<\/li>\n\n\n\n<li>Using prompt generators to customize and improve my initial prompts<\/li>\n\n\n\n<li>Enhancing the prompts with features directly in each platform<\/li>\n<\/ul>\n\n\n\n<p><strong>The AI-generated prompts that were also enhanced within each platform performed the best. <\/strong>They weren\u2019t perfect right out of the box, but they were much better than generic prompts.<\/p>\n\n\n\n<p>I also didn\u2019t notice a significantly better effect from using prompt generators compared to asking ChatGPT to generate prompts.&nbsp;<\/p>\n\n\n\n<p>For example, here\u2019s the beginning of a prompt optimized for Lovable using lovableprompts.app:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"808\" height=\"620\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154255\/Lovable-Prompt-Generator.png\" alt=\"\" class=\"wp-image-106672\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154255\/Lovable-Prompt-Generator.png 808w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154255\/Lovable-Prompt-Generator-300x230.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154255\/Lovable-Prompt-Generator-768x589.png 768w\" sizes=\"(max-width: 808px) 100vw, 808px\" \/><\/figure>\n\n\n\n<p>It was about as long, structured, and detailed as comparable prompts generated by ChatGPT. It also included elements like the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Task overview<\/li>\n\n\n\n<li>Core features<\/li>\n\n\n\n<li>Design specifications<\/li>\n\n\n\n<li>Technical requirements<\/li>\n\n\n\n<li>Implementation steps<\/li>\n\n\n\n<li>User experience<\/li>\n<\/ul>\n\n\n\n<p>ChatGPT\u2019s prompts took a different approach, but overall, the output was comparable to that of other AI-generated prompts I tested.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structured prompts<\/h3>\n\n\n\n<p>Prompt structure matters. It not only helps you save credits when building but also organizes your requirements in a machine-friendly way.<\/p>\n\n\n\n<p>There are simple, intuitive prompt structures you can use when crafting your own prompts and requests, like the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"969\" height=\"695\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154321\/Prompt-Structures.png\" alt=\"\" class=\"wp-image-106673\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154321\/Prompt-Structures.png 969w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154321\/Prompt-Structures-300x215.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154321\/Prompt-Structures-768x551.png 768w\" sizes=\"(max-width: 969px) 100vw, 969px\" \/><\/figure>\n\n\n\n<p>I tried out six different ways to structure prompts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Who, what, why<\/strong>: A classic framework that focuses on clarity and context.<\/li>\n\n\n\n<li><strong>RACE<\/strong>: Defining the role, action, context, and expectation.<\/li>\n\n\n\n<li><strong>User story<\/strong>: Designed to shape outputs around end-user value.<\/li>\n\n\n\n<li><strong>Feature breakdown<\/strong>: A list-style prompt that decomposes a complex request into specific, actionable components.<\/li>\n\n\n\n<li><strong>SCQA<\/strong>: Framework-driven prompting that offers details about a situation, complication, question, and answer.<\/li>\n\n\n\n<li><strong>Blueprint<\/strong>: A technical layout or schema that tells the AI how to structure the output.<\/li>\n<\/ul>\n\n\n\n<p>Unless asked otherwise, AI-generated prompts tend to use the blueprint and feature breakdown methods most.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Basic vs advanced prompt techniques<\/h3>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zero-shot<\/strong>: A single prompt with no examples or prior context.<\/li>\n\n\n\n<li><strong>Few-shot<\/strong>: Provide a few examples of the task and its ideal response format, then ask the model to generate a similar output.<\/li>\n\n\n\n<li><strong>Plan-then-execute<\/strong>: First ask the model to outline a plan, then evaluate or refine it, and finally have the model execute it.<\/li>\n\n\n\n<li><strong>Chain of Thought<\/strong>: Encourage the model to think step-by-step out loud before answering.<\/li>\n\n\n\n<li><strong>ReACT<\/strong>: The model alternates between reasoning (thinking) and acting (executing an external function or response) in the same interaction.<\/li>\n\n\n\n<li><strong>Self-Critique<\/strong>: The model reviews its own output, finds flaws, and improves it in a follow-up step.<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 \u201cplan-then-execute\u201d technique allowed AI to help fill in the gaps if I didn\u2019t supply a brand identity, Figma design system, or product requirement specs.<\/p>\n\n\n\n<p>Most non-designers won\u2019t 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.<\/p>\n\n\n\n<p>For example, here\u2019s a snapshot of a brand identity kit generated with Base 44:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"732\" height=\"1024\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154424\/Basee-44-Brand-Identity-Kit-Example-732x1024.png\" alt=\"\" class=\"wp-image-106674\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154424\/Basee-44-Brand-Identity-Kit-Example-732x1024.png 732w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154424\/Basee-44-Brand-Identity-Kit-Example-214x300.png 214w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154424\/Basee-44-Brand-Identity-Kit-Example-768x1075.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154424\/Basee-44-Brand-Identity-Kit-Example.png 982w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<p>The rest of the kit also included directions on fonts and typography, icon styles, spacing and layout, example components, and usage guidelines.<\/p>\n\n\n\n<p>You can also use existing design assets, like <a href=\"https:\/\/www.figma.com\/community\/libraries?resource_type=mixed&amp;editor_type=all&amp;price=all&amp;sort_by=all_time&amp;creators=all\">pre-made Figma templates<\/a>, instead of generating these from scratch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154503\/Figma-Resource-Library-1024x516.png\" alt=\"\" class=\"wp-image-106675\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154503\/Figma-Resource-Library-1024x516.png 1024w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154503\/Figma-Resource-Library-300x151.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154503\/Figma-Resource-Library-768x387.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154503\/Figma-Resource-Library.png 1341w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">When It\u2019s Worth Using AI for Web Design (And When It Isn\u2019t)<\/h2>\n\n\n\n<p>After testing all these variables and running 180+ prompt tests, one thing became clear: you can get great results if you\u2019re willing to guide the process with good prompts.&nbsp;<\/p>\n\n\n\n<p>But that doesn\u2019t mean everyone should try to use AI for web design.<\/p>\n\n\n\n<p>For instance, if you\u2019re hoping that AI will just do all of the design from scratch, these tools won\u2019t meet your expectations.&nbsp;<\/p>\n\n\n\n<p>They are not yet able to deliver pixel-perfect execution, custom on-brand visuals, or complex UX functionality.<\/p>\n\n\n\n<p>However, AI tools are worth using when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You need a fast prototype to validate, pitch, or test an idea<\/li>\n\n\n\n<li>You don\u2019t have design skills, but you can clearly describe what you want. Or have a visual identity system to rely on<\/li>\n\n\n\n<li>You\u2019re comfortable iterating and refining outputs instead of expecting perfection in one prompt<\/li>\n<\/ul>\n\n\n\n<p>In these cases, the secret to better results comes down to learning how to prompt your AI platform properly.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">From Prompt to Prototype: A Playbook for Better AI Web Design<\/h2>\n\n\n\n<p>Here\u2019s how you can apply the insights from the tests above to your UX and design workflows for better results when using AI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Define your visual direction first<\/h3>\n\n\n\n<p>Before writing any prompt, decide what your design should look and feel like and how you\u2019d like users to experience it. Think about:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The brand colors and fonts<\/li>\n\n\n\n<li>Example screenshots of designs you like<\/li>\n\n\n\n<li>Mood or design styles like \u201cminimalist\u201d or \u201cbold\u201d<\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll get better outputs if you attach screenshots of visual inspiration and branding identity information to your prompts as you work on each project.<\/p>\n\n\n\n<p>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).&nbsp;<\/p>\n\n\n\n<p>No amount of advanced prompting will fill the gap in your vision or design direction for the project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Consider the functional requirements you need<\/h3>\n\n\n\n<p>If you\u2019re designing a website, it helps to go through our <a href=\"https:\/\/www.crazyegg.com\/blog\/website-planning\/\">website planning<\/a> process to think through all the features and functions you\u2019d like your website to have.&nbsp;<\/p>\n\n\n\n<p>For example, by doing this, you could include the following details in your prompts to AI so it can build exactly what you need:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The pages you plan on building<\/li>\n\n\n\n<li>The website\u2019s goals and main call to action<\/li>\n\n\n\n<li>The target audience to attract<\/li>\n\n\n\n<li>Rough page templates and layouts<\/li>\n\n\n\n<li>Specific components you\u2019ll need for your planned pages<\/li>\n<\/ul>\n\n\n\n<p>You don\u2019t need to have all the details figured out, but it\u2019s still worth thinking about these things so you can properly guide your AI platform in the right direction.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>For example, here\u2019s what I used for the homepage redesign tests:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"727\" height=\"617\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154524\/PRD-Example.png\" alt=\"\" class=\"wp-image-106676\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154524\/PRD-Example.png 727w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154524\/PRD-Example-300x255.png 300w\" sizes=\"(max-width: 727px) 100vw, 727px\" \/><\/figure>\n\n\n\n<p>For tests that were specific to one component, I kept it very simple, just listing essential requirements:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"726\" height=\"254\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154558\/AI-Component-Instructions.png\" alt=\"\" class=\"wp-image-106677\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154558\/AI-Component-Instructions.png 726w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154558\/AI-Component-Instructions-300x105.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Iron out your prompt accuracy before moving forward<\/h3>\n\n\n\n<p>It\u2019s very easy to let a lot of incorrect or irrelevant details slip into prompts if using AI to generate them.&nbsp;<\/p>\n\n\n\n<p>For simple tasks (like generating scroll effects and animations), it\u2019s not a big deal. However, when it comes to complex tasks, custom functionality, or specific design requirements, accuracy is crucial.<\/p>\n\n\n\n<p>I didn\u2019t spend much time tweaking or perfecting the prompts for this test. However, it\u2019s 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Layouts first, styling next, interactions last<\/h3>\n\n\n\n<p>One of the biggest mistakes people make when prompting AI design tools is asking for <em>everything at once<\/em>\u2014the layout, colors, animations, typography, copy, and imagery\u2014all in a single prompt.<\/p>\n\n\n\n<p>When you do that, the AI has to make too many creative decisions simultaneously, which usually leads to messy output.<\/p>\n\n\n\n<p>The best way to improve the quality of outputs is to focus on the big elements like layout and structure first. It\u2019s like putting up the frame and walls of a house.&nbsp;<\/p>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Why This Works<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AI tools are much better at structural reasoning (what goes where) than aesthetic reasoning (what it should look like).<\/li>\n\n\n\n<li>A clean layout becomes a \u201ccanvas\u201d you can then layer brand identity, animations, and polish onto.<\/li>\n\n\n\n<li>If the structure is wrong, everything else will be wrong. No amount of color and motion can fix bad UX.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"769\" height=\"570\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154636\/Example-Prompt-Sequence.png\" alt=\"\" class=\"wp-image-106678\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154636\/Example-Prompt-Sequence.png 769w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154636\/Example-Prompt-Sequence-300x222.png 300w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Build in layers, one component at a time<\/h3>\n\n\n\n<p>No magic prompt will get you a perfect output in one go.&nbsp;<\/p>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Focus on <em>what<\/em> you want the AI to do, not <em>how<\/em> you want it to go about it. Check your prompts to make sure you\u2019re directing the output, not the process.<\/li>\n\n\n\n<li>Use AI to fill gaps, not make final decisions. AI is great at implementation, like adding a scroll effect or animation, but it\u2019s not great at conversion-savvy UX or design choices.<\/li>\n\n\n\n<li>When you don\u2019t know what to call a specific component or design element, ask the AI. Use that name in future prompts so there\u2019s no confusion about what elements you want it to edit.<\/li>\n\n\n\n<li>Don\u2019t move on until the element you\u2019re currently working on is perfect.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>These <a href=\"https:\/\/docs.base44.com\/Getting-Started\/Prompt-guide#:~:text=Techniques%20to%20get,find%20them%20later.%E2%80%9D\">prompting tips by Base 44<\/a> are also very helpful for follow-up prompts:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"892\" height=\"1024\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154700\/Base-44-Prompting-Tips-892x1024.png\" alt=\"\" class=\"wp-image-106679\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154700\/Base-44-Prompting-Tips-892x1024.png 892w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154700\/Base-44-Prompting-Tips-261x300.png 261w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154700\/Base-44-Prompting-Tips-768x881.png 768w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154700\/Base-44-Prompting-Tips.png 977w\" sizes=\"(max-width: 892px) 100vw, 892px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The State of Prompt Engineering for UX and Web Design<\/h2>\n\n\n\n<p>AI design tools can generate layouts quickly, but they don\u2019t replace the thinking that makes a page usable, persuasive, or on-brand. The real value isn\u2019t in letting the tool \u201cdesign for you,\u201d but in using prompts to speed up the early stages, allowing you to focus on refinement.<\/p>\n\n\n\n<p>Across every prompt tested, the same pattern held:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good prompts = better first drafts<\/li>\n\n\n\n<li>Structured prompts = fewer revisions<\/li>\n\n\n\n<li>Sequential prompting = higher-quality outputs<\/li>\n\n\n\n<li>AI-generated prompts (refined by a human) consistently outperformed human-written prompts<\/li>\n<\/ul>\n\n\n\n<p>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\u2019t fix unclear requirements, weak UX decisions, or vague creative direction.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>That\u2019s the shift: not \u201cAI will design for you,\u201d but \u201cAI makes it faster to reach the point where real design work begins.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m not a designer. I can spot good UX, but I can\u2019t build it from scratch. So I wanted to explore whether AI could help&#8230;<\/p>\n","protected":false},"author":273,"featured_media":106704,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-106652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Best (and Worst) Prompts for Web Design in AI Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Best (and Worst) Prompts for Web Design in AI Builders\" \/>\n<meta property=\"og:description\" content=\"I\u2019m not a designer. I can spot good UX, but I can\u2019t build it from scratch. So I wanted to explore whether AI could help...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-12T17:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1048\" \/>\n\t<meta property=\"og:image:height\" content=\"594\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Despina Gavoyannis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Despina Gavoyannis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/\"},\"author\":{\"name\":\"Despina Gavoyannis\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1302a9be22e89976d138b561424217a\"},\"headline\":\"The Best (and Worst) Prompts for Web Design in AI Builders\",\"datePublished\":\"2025-11-12T17:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/\"},\"wordCount\":2986,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/10154836\\\/image-44.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/\",\"name\":\"The Best (and Worst) Prompts for Web Design in AI Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/10154836\\\/image-44.png\",\"datePublished\":\"2025-11-12T17:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/10154836\\\/image-44.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/10154836\\\/image-44.png\",\"width\":1048,\"height\":594},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/ai-web-design-prompts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Best (and Worst) Prompts for Web Design in AI Builders\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1302a9be22e89976d138b561424217a\",\"name\":\"Despina Gavoyannis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g\",\"caption\":\"Despina Gavoyannis\"},\"description\":\"Despina is a Senior SEO Consultant with 8+ years of experience growing B2B, e-commerce, SaaS, and national brands. She's an optimist at heart, taking time to enjoy life's silver linings each day. Find more of her work at SEO Meets Design.\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/despina\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Best (and Worst) Prompts for Web Design in AI Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/","og_locale":"en_US","og_type":"article","og_title":"The Best (and Worst) Prompts for Web Design in AI Builders","og_description":"I\u2019m not a designer. I can spot good UX, but I can\u2019t build it from scratch. So I wanted to explore whether AI could help...","og_url":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2025-11-12T17:00:00+00:00","og_image":[{"width":1048,"height":594,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png","type":"image\/png"}],"author":"Despina Gavoyannis","twitter_card":"summary_large_image","twitter_creator":"@CrazyEgg","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Despina Gavoyannis","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/"},"author":{"name":"Despina Gavoyannis","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1302a9be22e89976d138b561424217a"},"headline":"The Best (and Worst) Prompts for Web Design in AI Builders","datePublished":"2025-11-12T17:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/"},"wordCount":2986,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/","url":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/","name":"The Best (and Worst) Prompts for Web Design in AI Builders","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png","datePublished":"2025-11-12T17:00:00+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2025\/11\/10154836\/image-44.png","width":1048,"height":594},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/ai-web-design-prompts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"The Best (and Worst) Prompts for Web Design in AI Builders"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1302a9be22e89976d138b561424217a","name":"Despina Gavoyannis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45b5736c3803132053c4ca66ee29e08382b6736101a7969ea1af3d6f422ad217?s=96&d=mm&r=g","caption":"Despina Gavoyannis"},"description":"Despina is a Senior SEO Consultant with 8+ years of experience growing B2B, e-commerce, SaaS, and national brands. She's an optimist at heart, taking time to enjoy life's silver linings each day. Find more of her work at SEO Meets Design.","url":"https:\/\/www.crazyegg.com\/blog\/author\/despina\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/106652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/273"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=106652"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/106652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/106704"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=106652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=106652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=106652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}