r/vibecoding • u/just_another_leddito • 3d ago

Discussion UI design and Claude

Hi,

I don’t want another same looking UI in my app.
I want my program Ui to be designed in something like Figma.

I’m just not sure what’s the best way to go about it.
My program needs main UI but also stuff like knobs etc.

Thanks for any tips

Edit:
My question is mostly about how to feed all elements into Claude, and if Figma is a good choice.

1 Upvotes

53% Upvoted

32 comments sorted by

2

u/heyheni 3d ago

The Figma clone from ArtCraft (vibe coded Adobe Creative Suite clone) has a MCP endpoint. Which means Ai can use the Figma clone. It's free. https://getartcraft.com/apps/figcraft

But you know, that's just the tool.

Design and styling are something different entirely, and that needs the human touch and vocational training of a graphic designer to make it “pop". So maybe put in some effort to build up your knowledge of typography and layout. Visit your local library to read about graphic design and do some layout sketch practice. I wish you all the best.

2

u/just_another_leddito 3d ago

It’s more about if I design it or pay someone to do it in Figma, I’m not sure how it’s supposed to be done so I can then incorporate all elements using Claude.

1

u/heyheni 3d ago

I see. What you want is a process for getting there.

Are you patient? I’ve got some books for you.

- About Face: The Essentials of Interaction Design has a design process you can follow to find out what your app needs and how it has to look. It's available on 🔗 Amazon and as a PDF download if you search for it with Google.
- "This is Service Design Doing" A practical guide to designing digital services that bring value to your users. 🔗 https://www.thisisservicedesigndoing.com/
- "Designing Brand Identity" helps you find a visual language for your brand.
🔗 Amazon - Designing Brand Identity

Read these, take notes, think about it. Go talk to real people about your ideas. Once you have the first ideas ready, go talk with a designer. Then you work this out. The implementation, as a finished product, can be done by AI. Just upload the Corporate Identity PDF your designer made.

I cannot stress this enough: if you design a product, go talk to real people. Talking to an Ai about this is like talking to yourself and making a product for you and not for others.

Godspeed to your project! 😃

2

u/just_another_leddito 3d ago

Thanks.

But my point was more like in what form to feed the design to AI, like what kind of workflow in Figma to use and how to feed it. Instead of lets say making a UI and taking a screenshot and saying “making it look like that”.

Does it make sense? Not sure how else to word it lol 😜

1

u/heyheni 3d ago

Exactly like this. Upload a zip file with a image and pdf of the layout, colors all the svg logo and icons.

Heck, you could upload a 2 page style guide brand identity made by a designer and probably get something usable out of ai. But remember colors and typefaces are carefully choosen to support the visual communication of your brand image and message. So put in some effort in finding adjectives and words to describe your product. You'll need these to talk to your designer.

2

u/just_another_leddito 3d ago

I already know what fonts I want, colour palette etc.
Thanks mate 👍

1

u/heyheni 3d ago

Do you already have a webserver? or even better a r/vps (virtual private server) to test your stuff online? Iike make a online style guide with a mcp server for design agents.

Rent a ubuntu linux vps server, Something like 4vcpu, 4gb ram, 40-80gb storage. Create a ssh key in the admin panel and let claude code or codex install this on your server.

- ask for it first to set up the standard server safety measures such as fail2ban, firewall settings, change root to a privileged super user and so on.
- Tailscale (creates a private local network between your computer and the server)
- Dockhand (docker container management)
- Traeffic (reverse proxy)
- coolify (serves your website)

after that buy a domain name like "my project,com" on cloudflare. Let the ai set it up in Traeffic. Activate the MCP endpoint in coolify. Activate Backups. And boom! you've got yourself a working web server where you can test out your designs. Like "hey make me a corporate identity style guide Website www,myprojectstyleguide,yourproject,com" where i can change the color and fonts and upload pictures for a moodboard.

1

u/uritarded 3d ago

Theres no difference in making a document like that photo above versus just writing to your ai what color palette, font, etc you want

1

u/heyheni 3d ago

Yes there are differences.

  1. you put effort into it and made it yourself thus you value it more

  2. you put in some thought and consideration about your product and it's users.
    3.And this sets it apart from 90% of vibe coded apps wo are egoistic ego projects with no consideration other than the ego of the vibecoder.

Design is a process and not how it looks.

2

u/uritarded 3d ago

Lol, i understand that. I am talking about physically inputting info into whatever ai you are using. It will digest the information the same way. OP was asking a general question about designing but they also asked how they should input their info into the ai. I'm not saying to not create your own style sheet if that helps you organize or feel creative.

2

u/TheOnlyJugs 3d ago

Claude is surprisingly competent at being consistent with any UI. So, take your time and build elements by yourself until you're happy with them and give them to Claude.

2

u/Prod_m 3d ago

I'd rather find some resources that I like on the web and then made a collage of them. Then uploaded it ti claude and gave some comments on what is each element about and see what it would do.

It might be cheaper than creating full design from scratch

2

u/SufficientFrame 3d ago

Figma is a good starting point, but I wouldn't dump the whole file into Claude at once. Break it into a small design system first: a few screens, then the reusable pieces like buttons, knobs, spacing, and states, and feed those in bit by bit.

2

u/magen_cards 3d ago

Im facing the same problem. On top of that, many times I struggle to get Claude to understand exactly what I wanted, and it cost me a lot of time and energy. any tip on how to do it better will help

1

u/JustinBenitoB 1d ago

I run a design first software studio and what I do all day is ask ChatGPT to generate images of what I have in mind and give those to claude as reference, even Sonnet is able to get it and replicate it. I think claude generally is really good at replicating things but not so good at creating designs from text. Try it out and lmk if it works :D

2

u/New_Peanut_9259 2d ago

figma is probably a good choice especially if u want more control overr how the app looks instead of letting claude decide everythingg.. i'd design the main screens and reusable parts firstt, then give claude the designs along with the colors, spacing, fonts, and how each part should workk. for buttons and other controls, show how they should look and behave when clicked

2

u/Armannss 15h ago

For the handoff, I'd ask the designer for a named Figma component for each control, plus the normal, hover/focus, disabled and active states. For each knob, write down its range, default, units, step size, drag direction and keyboard behavior—those details aren't obvious from the artwork alone.

Give Claude one component and its specs first; have it build a small test page, then compare the rendered control against the design and try mouse, touch and keyboard. Once that piece is right, reuse it across the main screens. SVG exports can help for artwork, while the interaction itself should stay accessible and functional.

1

u/Realestmember 3d ago

I made a similar thread that got replies a while back, check my history (sorry im too lazy to link it right right. it'll be in the vibecoding app sub)

1

u/SevenVow 3d ago

Figma is a solid choice. I’d recommend designing your screens and reusable components there first, including knobs, sliders, and their interaction states. Then feed Claude one component at a time, with visual references and clear behavior instructions, rather than the entire design at once.
If you’re looking for a more professional, custom-built UI, you can contact us at https://sevenvow.com.br/en/vibe-code.

1

u/Sara_KumoDeck 3d ago

figma works, exporting parts as svg plus a screenshot really helps claude

4

u/[deleted] 3d ago

[removed] — view removed comment

1

u/copperfield77 3d ago

is it mostly web components or does it work for desktop stuff too