Can I Use AI to Build a Website? The Current State of AI and Web Design
September 6, 2024
Words by Jeff Cardello
Wondering "can I use AI to build a website?"
Using an out-of-the-box, all-in-one "AI website builder" isn't the way to go—at least not yet. If you've tried these tools over the past year, you are often delivered a basic wireframe, with poor quality design and a lack of harmony with your brand. However, using a no-code tool like Vev in conjunction the AI tools we discuss below could be a viable option.
In this article...
An Introduction to AI and Web Design
In web design, new developments always come along promising to make things easier. In the early 2000s, the first What You See Is What You Get (WYSIWYG) web design tools like Dreamweaver and Microsoft Frontpage touted that even those not well-versed in programming could build websites. Since then, WYSIWYG has grown; no-code tools and drag-and-drop solutions making website building easy for anyone without coding knowledge. Today, artificial intelligence is being hailed as the latest exciting innovation that can turn anyone into a web designer.
While many may dream about a world where all one has to do is punch in a few words, and hit a button to materialize a fully-fledged website, AI that makes websites with little effort is still a ways off. AI can generate many of the basic components, but it still takes the skills and artistry of an actual person to customize and put them together in ways that look good and that visitors will enjoy.
With so many people wondering “can I use AI to build a website?”, we wanted to check out the AI website design tools out there and find out if they can help with the design process.
AI Tools for Mapping User Flows
At the top of any new web design project, sketching out the steps and potential choices visitors may make is an important part of determining what pages need to be built out and how they’ll be organized.
User flows diagram all the possible paths that someone could follow when arriving on a website. Traditionally, these are put together manually through apps like Adobe XD, or through Lucidchart as pictured below.
Can AI create a website user flow?
While user flows aren’t the most fun to put together they are important work in figuring out the form a website may take. If you’ve ever wondered, “Can AI design a website user flow?” you’ll be happy to know there are tools to help out.
FigJam
FigJam kicks things off by asking for a prompt of what you want to generate. In this example above, we requested an SaaS landing page focused on user sign-ups. It put together a simple, no-frills user flow, with the common pathways visitors could follow.
The verdict
If you’re creating a standard website, using something like FigJam to create user flows can speed up this first step. For more specialized cases, where the UI patterns may be less conventional, FigJam can be useful in generating user flows but may require some adjustments to fit in with what you’re building.
AI Tools for Creating Wireframes
Wireframes are frameworks that map out how different elements and content of a website will fit together. With stripped down layouts of basic shapes, connecting lines, and content placeholders, they’re generally built by hand with tools like Balsamiq, Mockflow, or Figma.
Can AI design a website wireframe?
Trained on design patterns, and powered by algorithms, AI can be utilized in generating wireframes based on user prompts.
Relume
Relume works through user-inputted text prompts, crafting sitemaps and wireframes in a matter of moments. In this example below, Relume was instructed to create a small business website for a bakery that specializes in decorative cakes. What it came up with was a fairly logical layout that had everything in place for a simple business landing page.
The verdict
If you’re wondering, “Can I use AI to build a website wireframe?” the answer is yes. While they’re not overly fancy, AI tools like Relume offer a solid foundation to build on and to customize as needed. We also like Relume for its capabilities in exporting a design to Figma, where it can be worked on further, and then use our Figma Import to add the appropriate frames into your Vev project, and turn it into a living piece of web content.
AI Tools for Prototyping
Prototyping is another task that can take a huge amount of effort. Prototypes differ from the bare bones of wireframes by having more fully realized visuals, text, and functionality. Traditional tools used for prototyping include apps like Figma and Adobe XD.
Can I use AI to build a website prototype?
Prototyping involves coming up with a layout, adding interactive elements, as well as other features. There can be quite a few moving parts, but AI assisted prototyping tools are showing some promise.
Musho
Musho is an AI website design tool that is available as a Figma plugin. All it takes is going into Figma, clicking on the plugin, and then entering a text prompt describing the prototype you want it to build. Since it works directly in Figma this is another case where you can use Vev’s Figma import to bring what’s generated into Vev and turn it into an actual website.
One thing to keep in mind is that Musho is only capable of creating single-page designs, making it better suited for simpler websites like landing pages.
The verdict
Musho is indeed impressive in what it generates. In their own words they say that their app, “gets your design 80% of the way.” and this rings true. You’ll need to go in and do a bit more work in customizing the color scheme, typography, and other styles, but it provides a well-organized prototype that is almost there.
AI Tools for Font Pairing
While there is no lack of plugins and tools out there for coming up with font combinations, it’s always nice to have options especially when you may be stumped or feeling uninspired.
Can AI web design tools help come up with complimentary typefaces?
While artificial intelligence and machine learning are often used interchangeably, it’s worth noting that machine learning is actually a sub-branch of AI. Machine learning relies on algorithms that lets computers make choices and find patterns based on data. There are machine learning based tools you can utilize to help you explore the creative possibilities of type.
Font Joy
Font Joy is a handy tool for coming up with typeface combinations that might be difficult to come up with on one’s own. Powered by machine learning, it draws from typefaces that are categorized by their features, with each existing as a multi-dimensional point in the magical vector space of linear algebra. With a button that randomizes type selections and a slider for changing the contrast between them, it works by evaluating each typeface's features and how far apart or close they may be.
The verdict
While typography isn’t something we think about when asking the question, “Can AI create a website?” Font Joy shows how useful machine learning can be in coming up with interesting typeface combos. Once you have picked out the typefaces you’d like to use, they’re easy to search for in Vev’s text style panel in the right-hand navigation.
AI Tools for Creating Color Palettes
Color plays a big part in the personality of a website, and how people perceive it. While there are plenty of tools out there for working with color, we’re seeing more that are using AI.
Can I use AI to build a website color palette?
Just as machine learning can help determine typeface combinations, it can also be utilized to come up with color schemes that would be difficult to conjure up on one’s own.
Khroma
Khroma lets you choose 50 colors, and then generates combinations based on your preferences. Yes, thinking about and picking fifty colors takes a bit of time, but the resulting color schemes based on your own preferences are well worth the effort.
In addition to a wild assortment of color schemes, it also shows you each combination’s WCAG rating, helping you find combinations with the appropriate contrast. To work with these color combinations with Vev all you need to do is copy the hex or rgb numbers, and apply them where necessary.
The verdict
Khroma is another tool that shows how machine learning can offer shortcuts to creativity, especially for something as difficult as picking out colors.
AI Tools for Content Writing
Writing can be one of the hardest parts of creating a website. But without meaningful content, a website is just an arrangement of pretty visuals. Traditionally you work with a writer, or take on the task on your own.
Can AI make a website, including content?
Just as many designers and other creatives get a bit uncomfortable in seeing AI used to generate visuals and other creative assets, those who make their living writing (this author included) can get a bit touchy about AI authored content. But just like the invention of the typewriter or word processing software, artificial intelligence can be used as a tool to help, rather than replace writers.
Claude
Claude, along with large language models like ChatGPT can generate writing, but require a lot of finesse in finding the wording prompts. In this example we prompted Claude to generate copy for a website discussing one of our favorite topics - no code web design tools. While Claude doesn’t give us anything groundbreaking, it does cover the basic tenets of what makes no-code web design effective.
The verdict
AI tools are pretty great for researching and outlining content, but can struggle with tone and voice. Just like the AI wireframing and mockup tools we discussed earlier, it’s possible to come up with good starting points, but they’ll require further refinement and work.
AI Tools for Image Creation
It’s hard to keep website visitors’ attention if your website isn’t visually engaging. Generally designers create graphics and other images on their own or find them on stock image platforms.
Can AI make a website including the visuals?
We’ve all seen the weirdness that AI can do when trying to render complex images like human hands, or the strings on a guitar. While it does have a bit of bugginess, AI can be used to create graphics and other useful images.
MidJourney
If you’ve ever experimented with AI-generated images, MidJourney is likely the first one you ever used. Earlier in this post we generated a wireframe for a bakery. What if we wanted to add some sugary inspired graphics? In just a short amount amount of time we were able to generate this image with the prompt:
Generate an image of three shelves in a bakery with cupcakes and a plain white background in the style of a 2D cartoon drawing
While if one were to be a bit picky there are some wonky elements (like what’s up with some of those sprinkles?), but this would work perfectly as a scrollytelling image in Vev.
The verdict
It can take a bit of time to dial in the right prompt wording to generate exactly the type of images you require. While AI can be useful in creating graphics, if you need something more exact or specialized it does have it’s limitations.
Concluding Thoughts: "Can I Use AI to Build a Website?"
If you want to generate the raw materials there is so much that AI website design tools can do to make this easier. We’re fans of AI apps because, generally, what they output isn’t difficult to integrate into Vev web design projects. Web design is always evolving, and AI is opening new possibilities for creation.
Build and launch your digital content with Vev
Whilst there are AI tools that can be complementary to the web design process, you need a base for prototyping, building and publishing your digital content with ease. Vev gives you a no-code solution, letting you manifest your creative ideas and put them into designs that will be enjoyable no matter how your visitors are experiencing them.