Generative UI Design Tools: A Day's Review

Note: This post documents my one-day exploration of various AI design tools rather than providing an in-depth comparative analysis. Please take it with a grain of salt

For the past few months, I’ve been on-and-off conceptualizing a single-page website to communicate why Ethereum stands out as the best blockchain ecosystem for businesses and organizations building real-world applications, by integrating adoption metrics and examples from various sources.

To communicate the information well, aesthetics will be very important for this website. But since I am insufferably bad at designing, I thought maybe generative AI could help me here. Below is the journal of my attempt to use different AI-driven web design tools to design such website.

I tried out 7 (+4) tools as follow: Claude, Creatie, Figma, Framer, Galileo, Penpot, Uizard, UX Pilot, UXPin, Visily and v0.

This is a lot of tools to try out in one day, and I tested mostly out-of-the-box functionality without any prompt tuning or additional refinement steps, so take my opinion of the tools with a grain of salt.

For consistency, I used this prompt across all platforms:

A single page website to display dozens of graphs and large numbers around Ethereum blockchain adoption. Design with a lot of whitespace, accented black and white, parallax effects, and a look & feel similar to Notion.

Here’s what I found.

Tool 1: Claude - https://claude.ai/

Claude returns me a React page and mobile design. So I have to prompt it a few times to generate a vanilla, desktop-based site. Also despite acknowledging my parallax requirement, it did not implement any parallax effect in the generated design/code.

While the generated design is quite simplistic (maybe because of my prompt?), Claude did the job.

Tool 2: Uizard - https://uizard.io/

Uizard’s prompt interface is straightforward and easy to use, but it produced way too many excess pages. On the otherhand, for the page that I needed, i.e. the Statistics page, while initially interesting, the generated charts don’t make any sense at all.

A plus side is it’s able to AI-generate an actual prototype with click events linked between pages, but again not something I really wanted out of a generative UI design.

Oh by the way, it ignored my “single page website” prompt completely! 😂

Overall, I did not get anything useful out of Uizard’s generated designs for my use case.

Tool 3: Galileo - https://www.usegalileo.ai/

Galileo’s interface is as straightforward as Claude’s. It gave me two, although only slightly different, designs. Its navigation bars show that Galileo has some understanding of blockchain features, although this drifted a bit from my “single page website” prompt.

While Galileo did the job I asked it for, plus able to provide me the code for the designs, I find its aesthetics not too far from my ability (= not useful 😢).

Tool 4: UX Pilot - https://uxpilot.ai/

UX Pilot was able to generate some decent wireframes, but I struggled to get it to generate Hifi designs. Somehow the output look not too dissimilar from the wireframes.

Not sure if it can generate code from the design. The free plan’s features are very limited.

Tool 5: Visily - https://visily.ai/

Visily is all about selling AI, from its landing page all the way to its top level domain. However, it’s result is really disappointing. It took a few minutes to process my prompt only to return that “Something went wrong”. When I retry, it was able to produce me a design but instead of producing me a page with charts and numbers, it simply gave me a somewhat landing page with text and images that are totally irrelevant to my prompt.

I tried to enter a second prompt, its response showed that it didn’t understand me very well and in the end failed to generate the design anyway.

Overall Visily failed completely at my requirement and the errors made my experience even worse.

I went back to their front page with a benefit of doubt that they might be a design tool that’s only trialing AI but then…

I guess I won’t try Visily again.

Tool 6: v0 - https://v0.dev/

v0 goes straight from my prompt to creating the UI with the codebase. It’s a very AI-native tool in the sense that all adjustments are made either by prompting the overall page, or selecting a specific component and prompt it.

Overall, it’s very neat and works as expected but does not help much with creativity, you’ll probably have to bring your own through your prompting. I definitely will use it again for sites that focus on functions.

Tool 7: Creatie - https://creatie.ai/

Creatie takes my prompt and generate a more comprehensive design requirement before asking me to generate the actual design. I think this workflow is great for someone new to prompting. You’re led to understand a bit more of the AI’s thinking, and given the opportunity to make adjustments, before being provided the generation.

It also provided 3 quite different options before letting you continue prompting, which is great if you don’t have a design in mind and wants the AI to think for you.

You select a draft out of the three provided to output the design into a canvas where all components and elements are laid out for you to continue any manual adjustments you need.

Overall, I would say Creatie serves what I need the most. It was able to take in my relatively vague prompt, expands it to a more extensive prompt that I can review and modify, then generate multiple designs with different layouts that I can choose from, then generate the design onto a canvas that I can continue to make manual adjustments on.

I’ll probably spend more time on Creatie in the future to get the designs I need for my website(s).

Tool 8: Bolt - https://bolt.new/

(Added Jan 7, 2024)

Bolt has almost the same interface as v0. Its prompt response and output are also almost the same. Why?

I’m not sure how to compare between Bolt and v0 since they’re almost the same in all aspects.

Others

• Framer (https://framer.com/) — Only textual AI is possible. There seems to be a generative design feature as mentioned in the post, but could not find the feature. But anyhow their examples look like they’re tailored for landing/brochure sites so probably will not suit my needs.

• UXPin (https://www.uxpin.com/) — No apparent generative AI features

• Penpot (https://penpot.app/) — Its onboarding is stupid, dozen of in-page popups that can’t be skipped asking for user profiles. I did not find AI features, and find it too hard to start using the tool, so I gave up after a few minutes.

• Figma (https://www.figma.com/) — AI features is coming and there are cool YouTube reviews about them. But since the features are not generally available yet, I was not able to try them out.

Parting thoughts

I dug into AI web design tools with the mindset that the AI can do it all for me. The fact is we’re not there yet, the AI is not there yet, as with any other generative AI tools in other fields. But these are what I learnt today:

• “AI web design” is a very generic term. Do you want UX wireframes? Prototypes? Visual designs? A desktop site? A mobile app? A landing page or a highly-interactive web app? AI design tools are not created equally.

  • Some work for some use cases (e.g. Creatie, UX Pilot and v0 seem good for apps)

  • Some others work for other use cases (e.g. Galileo and Uizard for info sites)

  • Some don’t work at all (e.g. sorry Visily).

• Prompting skills is important. A generic prompt (like the one I used) probably contributed to the generic outcome. I’ll need to spend time writing better and more informative prompts that spans paragaphs.

• AI web design could be more powerful with a proper workflow instead of a YOLO’ing with a single prompt:

  • The AI Tooltip channel on YouTube did a good video of UI Design Process with AI that uses Claude, UX Pilot and Visily to create the requirements (Claude), then user flow (UX Pilot), then wireframe drafts (Claude), then actual wireframes (UX Pilot), then actual UI components (Visily), then prototypes (Visily).

  • Ras Mic also did a good 13-minute video of How To Build Web Apps using V0 + Claude AI + Cursor AI to generate the UI and components (v0), then generate the codebase (Claude), then do the polishing (Cursor).

I hope this is useful!