Backend Dev looking for AI UI/UX prompts, workflows & resources to build clean interfaces
Hi everyone! I'm primarily a backend engineer. I feel right at home with data modeling, APIs, and business logic, but whenever I try to build side projects or full prototypes, creating a usable, visually balanced UI/UX becomes my biggest bottleneck. I’ve…
Hi everyone! I'm primarily a backend engineer. I feel right at home with data modeling, APIs, and business logic, but whenever I try to build side projects or full prototypes, creating a usable, visually balanced UI/UX becomes my biggest bottleneck. I’ve started leveraging AI tools (like v0, Claude Artifacts, Bolt, etc.), but since I lack a formal design background, my prompts often yield generic layouts or hard-to-maintain interfaces. I’d love to get your insights on: Master Prompts / Frameworks: Do you have structured prompt patterns or system prompts that help AI output clean, accessible, and modern UI components (e.g., using Tailwind, Shadcn UI)? Backend-to-UI Workflows: How do you structure your workflow when going from a database schema or API spec to a working UI using AI? Context Injection: How do you effectively feed design tokens, component libraries, or layout rules into LLMs so they don't produce random inline styles? Recommended Resources: Are there any repos, prompt libraries, or guides specifically tailored for devs who need design assistance from AI? Any advice, tool recommendations, or prompt examples would be greatly appreciated. Thanks! 👋🖖
已收录讨论
Claude Design... nothing else needed for me.
nice to know ty 👌
I feel the same 😭🤣🤣🤣
thanks for the feedback I will give a look 😃
thanks for the feedback I appreciate 😃
thanks 👍😊
I feel like this is something AI still struggles with. I am a FED so that’s all in my wheel house but my advice would be to teach it what you want with rules. If it does something you don’t like instruct it how to fix the problem and then tell it to set up a config to solve the problem correctly the next time. This usually takes me a handful of iterations to clean it up properly and consistently but this is my go to approach for training AI to write code the way I want it to.
Thanks, i will try impeccable.style, the tasteskill.dev website looks like ai slop for me :D
How resource heavy is that? I just created a pro account a couple weeks ago and I heard it burns through tokens pretty hard, but I don’t know if they optimized it more.
Try component libs that are headless!! eg. Headless UI for react or bits UI for svelte. This kind of UI libs have a better separation of concerns. I feel like after AI /vibe coding era, this type of UI lib works better with AI especially when you need to review/look back at the code when you want to debug the generated code.
claude's great for this but the real trick is feeding it your component library upfront, not just winging it with "make it look good" i paste in my tailwind config and a couple example components i already like, then ask it to follow those patterns. cuts down on the generic slop by like 80%
Try https://impeccable.style/ https://www.tasteskill.dev/
DarthOobie's answer is the one I'd build on. Correct it when it does something you don't like, have it write the correction into a config, repeat. That accumulates your rules going forward. There's a version that works backward, and it's faster if you've already shipped things you liked. Pick three to five interfaces you'd have been happy to ship. Not ones you find inspiring, ones you'd have accepted. For each, write down the numbers. Border radius. Base font size, and how many distinct sizes exist in total. How many grays. Which spacing steps actually appear. Whether a card gets a border, a shadow, or neither. Max content width. Mine came out to four settled numbers and one argument. 8px spacing base, no pure white background, shadow blur capped at 3px, buttons always fully rounded. Card radius is the argument — the ones I liked ran 12 to 16 and I never picked. On your context-injection question: it's a file the agent reads every run, not something I paste in. Mine is on its fifth project. The prompt only ever carries the one thing I still haven't decided.
aidesigner using ultradesign mode for me is my go to for a good starting point. then i just manually clean it up. usually gives me some good ideas to work off of :)