2024-01-12 - Using AI in UI design 👑 - Chewing the Fat 📈

[lukecookssw]

Hey prompters!

Let's talk about this rule and give our thoughts/ideas around generative UI tools.

[PothieuG]

I would definitely use it to help me if I'm struggling to reproduce a design from a library that we don't use in the current project.
For example, I requested a form that somewhat looks like Angular Material, and he delivered that result on the first try.
I find the result quite good.

🤖 My AI prompt:
Create a customer form (with name, lastname and favorite pet) that looks exactly the same as Angular Material Form with the same Angular Material Input (look a the picture provided)

[Freego1783]

I was not familiar with this tool, and it seems really promising! It could be very useful during Specification Reviews to make mockups. And even without reusing the generated code, it can at least provide some ideas when we're out of inspiration.

Here's what It generated for the user form:

🤖 My AI prompt(s):

1. Create a form to input customer data like: first name, last name, DoB, email, phone, etc..
2. Do it using material style component. With a primary color red
3. Use this red instead : #CC4141, and add icons next to labels, like a phone icon next to the phone number etc

[tomek-i]

I used v0 during the private beta already.
I was re-working my github page and thought to kickstart it with using v0.
My idea was to perhaps design it in the form of a CV.

I won't use up my credits on this exercise, instead here is a link of a design that I prompted during the beta
🤖My AI Prompts: https://v0.dev/t/TTKI7qXMiOb

If you insist to see a contact form, here:

[tiagov8]

Prompt:

Create a sidebar box with a list of profile links:
Email
Facebook
Skype
LinkedIn
Twitter
GitHub
Photos

Include icons

---

Result I preferred:

Note: Skype icon is bad :/

---

What I wanted to improve

The current SSW.People sidebar box:

[sethdaily]

v0 one looks more modern - should we switch haha

[matt-goldman]

That's way better!

[SamBWagner]

SSW Sidebar in shambles. L + Ratio

[tkapa]

Link the PBI @tiagov8

[camillars]

This is a really cool and easy tool to make a mock-up. So easy that even a marketer can use 😊

🤖My AI Prompts: A contact form with first name, last name, email, job title, and message fields, with an icon for each field. Put the form on a card with a submit button. Include a consent box for subscribing.

[sethdaily]

This will be awesome when I need to mock something up to show a designer the idea that I have. It would usually be better than words!

Figure: My mockup

My AI prompt 🤖: A form for customers that has the fields (Customer ID, First Name, Last Name, Number, Address). it should be white with minimal red accents, and it should be optimized for engagement.

[jakebayliss]

Although the generated images are not perfect they are atleast a quick and easy way to get going

[ozdemir-mehmet]

generate a modern landing page for a retro computing online store. It should really pop out at the user

[MarcusIrmscherSSW]

Great tool, easy to use even for some without experience
My prompt - a form user form with name, type of video you would like to make, location, approx duration, video category, approved by and additipnl notes with a submit button. Make it white a red, Use #cc4141 for the button. Then make it narrower.

[matt-goldman]

A customer details from in a CRM. Fields will include Customer ID (auto generated and not editable), Firstname, Lastname, Email, Phone, Company name (a dropdown/autocomplete). There should also be a table or data grid showing "Recent Projects".

[AlexRothwell]

It looks like a very promising tool. When working in a tech stack it supports, I'd love to see how it goes in translating a design into code

🤖 My AI prompt(s): A component for capturing a user's address details, including the coordinates. These coordinates get displayed as a pin on a map

Unfortunately it interpreted "map" as "heatmap" and gave me that below the main part of the component. Even after specifying that I want a geographical map using Google Maps, it didn't improve

[joshbermanssw]

Awesome tool to quickly throw together a design for a new component. Could also help spark design ideas for dev's that are stuck with design!

 🤖 - generate a new customer form.
with fields Customer ID, First Name, Last Name, Number, Address.
🤖 - use the colour scheme of red, white and grey

[wicksipedia]

I think this is too simple a use case to show off the power of the tool.

🤖Generate a new customer form, it should have fields for First Name, Last Name, Number, Address. Try to add emojis to labels

[matt-goldman]

I think this is too simple a use case to show off the power of the tool.

Agreed

[YalalCakirSSW]

I only created mock-ups on FBC. I used excalidraw for my mock-ups. I use one of my mock-ups to compare them. And I was shocked by the results 😆 I think this is really helpful for non-designer people who wants or needs to do some designing. I spent 15 min on my mockup. It took couple of minutes to generate AI version and it looks more professional.

Figure: My Dishcover app | Home Page mockup

Figure: v0 results

🤖 My AI prompt(s): Create a home page for a recipe app that shows at the top as a header the logo of the app and navigation bar to switch from home recipes and ingredients, below them add recently added 5 recipes which are in card layout with a name and image, and at the very bottom just use logo as a footer. Use light brown colors.
🤖 My AI prompt(s): Name of the project is "DishCover." Use #aa755d color for header and footer and #eaddd7 for background

[kikibianc]

Many scenarios - for SysAdmins, it would really help with any dashboards that we might need to create from scratch. Also to wireframe stuff on initial meetings and projects.

Figure: v0 results

🤖 My AI prompt(s): A dashboard with a list of people that clicked a button. The button should be right at the top of the screen, and should say "Make your Mark"

[SofieHong]

🤖 My AI prompt(s):

1. Create a page to show 4 line charts for YouTube channel data like subscribers, views, likes, comments, etc..
2. Do it using the material style component. With a primary colour red
3. Use this red instead: #CC4141, and add icons next to labels, like a subscriber icon next to the subscriber number etc

[Berber-Mama]

It's so fun and easy to use this, who needs Ken anymore?

[KristenHu]

My prompt: A contact us form with customer details， add icons to every label, use rgb(192,0,0) as main color

It's easy to use. seems suitable for mock-ups or initial meetings.

[danielmackay]

I tried to generate some UI for Easy Leave. I also tried using colours but the results were terrible.

I think this could add value when quickly trying to mock something up for a spec review, or converting a design into ReactJS.

NOTE: The big caveat here is that your project is using ReactJS. If it is not, a lot of this value goes out the window.

Grid

Prompt: Create a grid for a leave system. The grid should contain the following fields: type, date from, date to, length (hours), status. It should have two buttons, one for creating a new leave entry, and one for adding sick leave.

Modal

Prompt: Generate a modal for a leave system. The modal should have a dropdown for the type of leave. It should also have fields for date from, date to, and Notes

[tino-liu]

My prompt: Create a sign up form with fields Customer ID, Full Name, Phone Number, and Address. I want the lables to have icons to them. The form should also have a simple but elegant artistic background. This is aimed to carter artistic people.

My thoughts: This is a very cool app to have an initial design. This could very easily help with component generation.

[drwharris]

I tried to create a dashboard for a POS system. Results werent great. v0 UI is really slow & glitchy, eg when you have multiple versions, if you go back to a previous version that has multiple tabs and change tabs, it takes you to the most recent version instead.

Prompt: a point of sales dashboard for taking orders

Prompt: add the ability to add products to an order

Prompt: on the right hand panel add tiles to represent products

HAs anyone been able to get it to come up with a unique design thats not already in common use?

[divgul]

1. I am a low-code dev so don't have to do any UI work except for Power BI reports

My AI prompt was:
a. Create a beautiful form to enter customer information
b. Add a customer ID field to the top
c. Add icons before each label where it makes sense
d. Change the label colour to red #CC4141

The basic design of the form is very good. However, it didn't action my prompts 'c' and 'd' above.

[chrisschultzssw]

I can't think of a use case for my SysAdmin work... but it's still very cool.

My prompts were:

1. a new customer form with the fields: Customer ID, First Name, Last Name, Number, Address
2. Add a * to show required fields. All fields are required, except address

[piers-sinclair]

I think the best use case is simply making quick mockups for clients in Spec Reviews that you don't need to waste a bunch of time on.

Cool idea, but not sure it's quite there yet. It had a lot of trouble doing stuff like dropdown fields over simple text fields.

My AI Prompts:

1. Create me a customer form. Include Customer ID, First Name, Last Name, Phone Number, Address, email. Make it sleek and modern, use UX best practices. Colour scheme should be black, red, grey and white.
2. make sure the address caters for Australian format like state, post code etc
3. shouldn't this include dropdowns for state etc?

Figure: UI after 2nd prompt

Figure: Poor application of dropdown after 3rd prompt

[Levijj22]

My AI prompt was:

1. A contact form with first name, last name, email, and message fields. Put the form in a card with a submit button. Theme: red (414141) white, grey and black
2. Make it more interesting

[UlyssesMaclaren]

it might help me give a spec to a dev

My prompt: "an events widget to go on a homepage of a tech company showing upcoming training and community events"

[jackreimers]

It seems like a very powerful tool for creating mockups and getting inspiration for designs.

My prompt: Create a customer sign up form that takes Customer ID, First Name, Last Name, Address and Date of Birth. The form should be a modal with a greyed background and use red for accent highlighting

[BrookJeynes]

I can imagine this being very useful when you have an idea in your head but don't have a designer there to check your work.

Prompt: create a customer form in a minimalistic style. it should include fields such as a name, password, address, notes section, etc

[2fernandez]

Really cool tech behind this app.
The wireframe it generated for me looks cool but not as cool as what a UX designer could produce in 1 go.

🤖 Prompt:
Design a website that sells Gym Gear.

[bradystroud]

Its ok, I will find it useful occasionally.

Like any AI generated stuff, I would take the generated code and tweak it to be perfect

My prompts

1. A book an initial meeting form that gets Customer ID, First Name, Last Name, Number, Address. Dark mode, use #cc4141. minimal design. make it a card
2. Change Customer ID to email and move it after name fields
3. add a bit more cc4141
4. add a close button
5. make the close button a cross in the top corner
6. change text "Book a meeting" to "Book an initial meeting"
7. change address to location
8. change text to Enter your info to get your project started with SSW!
9. add an icon to the button
10. Add a paragraph input labelled "How can we help you?"
11. change placeholder text to "Select a location"
12. change placeholder text to "I want to build a ..."
13. remove placeholder text if it is the same as the label
14. remove placeholder text on top 3 fields
15. Use a cross (x) icon, it should be cc4141 on hover
16. cc4141
17. Add icons to labels
18. icons should be on the left of text, not above
19. combine first and last name to full name
20. remove icon
21. remove icon
22. Indicate this is a required field
23. Indicate this is a required field
24. remove required text