Web design is transforming at a rapid pace, thanks to the ongoing integration of tech’s newest powerplayer: AI.
AI web design tools are now an active part of agency work processes: generating copy, images, code and even full-on websites. So if you want to keep your finger on the pulse, it's vital to gain a baseline understanding of how you can use AI as a web designer.
This article explains how to use AI tools to assist your web design process so you can test them out for yourself and weigh their pros and cons of each. You’ll also learn how to create a website using AI tools, like the image generators Midjourney and Dalle-3, and chatbots ChatGPT and Claude.
Is AI going to take over web design?
Much like all other creative avenues agencies work in, web design is undergoing a major transformation. As agencies reimagine their strategies to play to this changing landscape, they’re asking important questions, like, “Where does this leave humans?”
The truth is that AI is a tool, and our tools change all the time. With new tools come new skills however. While computers will certainly take over much of the rote design and development work agencies are still used to doing currently, human creativity and contextual understanding will still be required to build high quality web experiences that delight clients.
Can I design a website using AI?
Though it’s not the end all be all, AI can definitely put together an initial layout for your website, down to the content and copy. Wix Studio offers a range of functionality to transform how agencies build sites for their clients. Supercharge your productivity with AI-powered tools: speed up workflows, innovate faster, ship code, create images and enhance your website all with the power of artificial intelligence.
Using an AI website builder to design a website with AI & what to look for
Consider the following factors when considering which AI website builder you’d like to use:
Is the builder flexible? Can you further customize options to align with the specific needs and branding requirements of the project?
Does the platform work by leveraging robust analytics capabilities? Are you able to see website performance, user engagement, and conversion rates?
How well do the AI-generated web designs integrate with other tools and platforms, such as e-commerce solutions and social media platforms?
How much customer support, documentation, and community resources are available for troubleshooting when you get stuck?
By looking out for these various aspects in the web design process, agencies can determine which AI website builder to leverage for the best outcomes.
How is AI used in web design?
AI tools have swiftly pushed the boundaries of web design, providing designers with a slew of capabilities they can use to streamline agency work processes and elevate the creative process. Here are a few ways to use AI.
01. Suggesting web design ideas.
AI can help designers overcome creative block. You’ve no doubt heard about ChatGPT, a sophisticated generative AI chatbot that accepts text as input and generates the output based on it. You can ask ChatGPT something like "Suggest ideas for a promo page that sells shoes," and it will generate a list of ideas to work from.
You can also ask follow-up questions to get a more relevant answer to your questions. If you don't like the ideas the tool generated for you, say something like, "Give me five more ideas," and the tool will generate them for you.
As founder and strategist Zoe Scaman tweeted, a great use of these kinds of AI tools in strategy work “is to get the obvious, clichéd and overused angles out of the way, fast. That way you can concentrate on unexplored and unique ways into an idea.”
02. Assisting with user research.
The better you understand the needs of your target audience, the higher the chance of creating the right design for them. Most web professionals understand the value of user research, but sometimes, strict deadlines and budgeting limitations prevent the team from actually conducting it in a robust way. In fact, 80% of researchers think their company could stand to do more research, according to a 2020 study.
AI tools can be used for initial research on the target audience. For example, if you’re building a website that sells shoes, you can input a prompt like, “Generate a customer persona who buys sports sneakers with orthotic insoles,” to learn more about this category of users. But don’t use this data without varying it first, and always fact-check the output information through multiple reliable sources to ensure that it is accurate.
The tools can also assist with in-depth analysis of existing analytics data about your customers. Simply export analytics data from tools like Google Analytics or Hotjar as a file, submit it to ChatGPT or Claude, a sophisticated AI chatbot created by the company Anthropic, as a file and ask questions about your users.
03. Generating imagery.
It goes without saying that images help to reinforce the idea your client wants to communicate in text. No wonder designers constantly look for the right images when they create websites. Subscriptions to stock photo banks like Stocksy have been popular for a while, but let’s be real, we can all spot those photos of happy coworkers in generic workplaces from a mile away at this point.
Now, Midjourney, Dalle-3 and Wix Studio (with an Open AI-powered image generator in the editor itself) can generate tailored visuals web designers can use instead, based on the text prompt you provide. You can choose from a variety of image styles to refine the result.
It’s worth noting that while these tools are great at generating abstract backgrounds, they have some downsides when it comes to portraying humans: they might add extra fingers to human hands, extra legs and incorrect properties. So AI-generated images still require a human touch (and review).
Generated images can be convenient during the design process, but AI tools can’t beat human artists when it comes to creating truly unique images for a client. If you have the time and budget, you should of course still consider working with seasoned photographers and CG artists. They bring a bespoke approach and their own visual style to a brand identity. Plus, they can elevate your website through the professional association and audience reach.
It's important to mention that the US Copyright Law stated that images generated by AI tools like Midjourney are not “works of authorship” because they have no human authors. In other words, images created by AI alone are not protected by copyright because they belong to the public domain.
04. Generating videos.
Pikalabs and Runway Gen-2 are two AI tools that can generate videos based on either a text prompt or static image. (Wix Studio AI will have this capability soon.) Video AI web design tools are particularly useful because they quickly add visual interest and a hi-fi feel to your client’s site: use them to create a video background for a landing page or turn a static photo of your client’s product into a video preview.
Similar to Midjourney and Dalle-3, you can fine-tune output results by refining the text prompt, adding essential details or introducing visual effects (such as camera movement or zoom-in).
05. Generating real copy.
Instead of using Lorem Ipsum text, web designers can ask OpenAI’s ChatGPT, Claude or Google Bard to generate text by entering a prompt relevant to your client needs, like "write key features of the mid-range sports shoes for recreational trail running." Since the prompts are open-ended, these standalone copy generation tools best serve more in-depth or length copy needs. You can prompt them to generate just about any kind of copy (which you’ll then need to refine to your client brand tone and fact-check).
If you have more specific website copy needs, you can avoid toggling between tabs completely by using Wix Studio’s ChatGPT-powered text creator. It’s right in the editor, so you just need to navigate to the text box you want to use and click “create AI text.” Instead of writing an open-ended prompt, you answer a few specific questions, like your client’s business type and name, the topic (like “welcome,” “product description” or “team intro”) and a few must-have details you need included in the text. It’ll produce a few options, and once you select one, you can see the copy in situ right away.
Of course, from a design strategy POV, you might still prefer generic Lorem ipsum filler copy, like designer and partner at the digital consulting firm Autogram Karen McGrane. From McGrane’s experience, clients tune Lorem ipsum text out more easily, allowing them to “focus on the conversation about the design.”
But it’s really personal preference—having realistic copy can also be super important to the web design process, if you find the copy to be helpful rather than distracting. Real copy can allow you to adequately align content blocks and create a more relevant visual hierarchy of the page.
Use Wix's AI text creator to generate website copy.
06. Writing code.
AI code generators are super helpful when you’re in need of a fresh approach, when you just can’t figure out what’s gone wrong in the code or when you need a custom element in a pinch.
There are a few tools to try here. First, keep your design process super fluid and generate code snippets in-editor with Wix Studio’s AI code generator. Alternatively, platforms like ChatGPT, GitHub’s Copilot and Claude can also generate decent code samples for individual web elements like input forms. The great thing about these tools is that they explain the rationale about the code they provide, making it easier for web professionals to improve their coding skills.
But similar to imagery, the code samples generated by AI also require moderation and refinement. The great thing about Claude and ChatGPT is that you can submit the code they generate and ask them to validate it and fix errors. You can use this approach for the code you write and the code the tools generate for you, but it doesn’t work for some reason.
How to create a website using AI tools
The most straightforward way to do this is using a web design platform like Wix Studio, which is Wix's premium platform for professional designers that offers in-editor AI tools. If you don't need the advanced design and coding capabilities provided within Wix Studio, you can use an all-in-one AI website builder.
Otherwise, creating a website using AI tools will require three additional steps before getting into the editor itself: generating a structure for the page using Midjourney; then generating content using ChatGPT, and lastly, combining design and content together into a web layout.
01. Creating a layout for the web page
You can use AI to create a layout for your future page in high fidelity. If you’re using Midjourney, you need to type the command "/imagine [what you want to see]" in a chat. You can provide a prompt like "/imagine a beautiful website for shoes" to see AI-generated web design for a shoes website. As you can see, Midjourney was able to generate a few variants of the hero section for us. Some are more usable than others.
(You can also start with one of Wix Studio’s professional-grade templates, and then adjust sections to be instantly responsive and fit all screen sizes by using the editor’s responsive AI capability.)
There are a few tricks to keep in mind. The better you articulate your intention in a prompt, the better the tool’s chances of generating the right visualization in response. When creating a design for the client website, it's better to explicitly mention keywords like "UX" and "UI" in the prompt so that the tool can understand that you want to see a web layout.
/imagine modern website for shoes, ui, ux, ui/ux”
You can also add visual references with the text prompt. For instance, say you find a web design that you like Pinterest, Dribbble or Behance. You can add it as an input signal to Midjourney along with your text prompt. The tool will match text prompts to the image you've added and will be more likely to generate a relevant image.
But, there’s a caveat: sometimes generative AI tools create a very close copy of the image you provide as a reference, so it's important to moderate the output the system provides in order to avoid copying other designer’s work—and its potential legal implications.
There are a few keywords you can add to your prompt to receive a higher-quality visual design that’s close to your specific needs. For example, you can add the keywords "HQ" and "4K" to your prompt, and the tool will understand that you want to see high-quality visualization of web layout:
/imagine beautiful website for shoes, ui, ux, ui/ux, HQ, 4K”
Midjourney has a few critical downsides. The tool often adds visual noise to the images, like additional, unnecessary graphic details (like those extra fingers referenced earlier, or extra decorative details on the background). So, before using this output in web design, you’ll likely need to polish it a bit in a photo editor.
02. Writing content for the website
It goes without saying that well-crafted copy directly impacts how visitors perceive your site design. As mentioned in the AI copy generation section above, web designers often use placeholder text instead of the actual copy when working on a layout, but Wix’s ChatGPT-powered AI text creator (and other AI tools like it) offer a new alternative by producing AI-generated website content instead.
ChatGPT can be used for a lot of tasks you’d rather not do yourself, like writing marketing copy, product descriptions and even the copy for an entire web page. (Though you’re going to want to give that copy a once over and make it your own.)
I’ve used ChatGPT to generate content for an entire landing page, including error and success messages for visitors’ actions. Even though I had to validate the copy and sometimes rework it, using an AI tool was a net positive because it improved my overall project efficiency and sped up my design process.
Again, the better you articulate your intention in the prompt, the more relevant the response will be to your AI web design. You need to specify enough detail so the tool understands exactly what you want to see. For instance, you could enter a prompt like, "Provide content for the landing page that promotes sports shoes. Content for hero and product features section." As you see, the sections we mentioned in our prompt match the sections we have in the design generated by Midjourney.
ChatGPT tends to generate long text, so you’ll likely need to adjust its output before adding it to your actual design. But remember that you have control over the AI. If you want to see text up to 100 words, simply write a prompt like “Write for the hero section in under 100 words and content for the product features section in under 80 words” to give ChatGPT clear instructions for the content length.
You can also ask follow-up questions to receive more relevant responses. Suppose the tool generates text for the call to action button, and you don't like it. You can create a follow-up prompt to get the tool to generate copy alternatives that are closer to what you had in mind, like, "generate a few more examples of text for a call to action button."
You can also generate text for individual sections and text boxes, using Wix Studio’s in-editor text creator.
03. Turning your design into a fully functioning website
Once you have the page layout and content, you can use them as references to create the fully functioning version of your website. Refer to your AI-produced layout like you would a drafted layout in Figma, and build your site out accordingly. Then paste the AI-generated copy (which you edited and fact-checked) where applicable.
And once you’ve defined the structure of your page, you can then copy and paste visual elements, like images of shoes generated by Midjourney, and fill out content blocks with the text generated by ChatGPT.
The role of AI tools in web design process
A lot of people in the design world are concerned about AI tools, and whether or not AI will replace graphic designers.
There is some reason to be. AI tools are causing the line between creating and copying to blur. Ever since 2023, the first full year of many of these AI tools’ existence, creatives have also been filing class-action lawsuits against them, alleging they used artist images scraped from the internet to train their tools without their consent.
Some influencers are positioning the tech as a way to get rich quick, selling its potential quantity of output in lieu of dependable quality. The tech has led to misinformation and online content farms. And in some instances, clients are in fact opting for AI tools rather than hiring creatives, as recently happened to UK-based Studio AAA.
So, is AI generated web design the future of the web? Not without the designers who build it. Used responsibly, the primary objective of AI web design tools is not to replace people with robots, but to improve the efficiency of the person who uses them. In theory, artificial intelligence tools could free up web designers from routine operations, like writing realistic copy, to give them more time to experiment with design and find unconventional solutions. Some studios, like Ogilvy Paris, use the tools to jump start creative campaigns.
Web designers who use AI tools will likely have a significant competitive advantage over other designers, because they will be able to go from ideation to final design much faster. Ultimately, AI web design is about co-creation—not co-opting.
.png)
.jpg)
