Consistant App Design #430
|
Hi, One question I have for Felix (or anyone who might know an answer to this as well) how do you get your UI/UX design so consistent? A lot of it was vibe coded, and I constantly have the issue myself that designs look either "AI generated" or just plain inconsistent overall. I did try making like UI/UX design .md files with examples, but that hasn't worked well either. Any answer would help, thanks! |
Replies: 2 comments 1 reply
|
One thing that helps me a lot is giving the model visual references instead of only text instructions. If I want a certain UI direction, I’ll usually provide screenshots/images of the kind of layout, spacing, mood, or component style I’m aiming for, and then ask it to adapt that into the existing app instead of inventing something from scratch. The important part is still to keep it constrained: reuse existing components, match the current spacing/colors, and manually review the result. Otherwise it can still drift into that generic “AI UI” look pretty quickly. So for me it’s usually: visual reference first, then implementation, then manual cleanup :) |
|
Hey, thank you for your answer! I will try that out. |
|
Late reply, but for anyone who finds this: a design .md file alone doesn't hold because nothing checks it. The agent reads it, then invents a new spacing value or gray three prompts later. What actually keeps a vibe-coded app consistent is a loop: measure the values the app uses today, pick a small set (spacing steps, font sizes, color roles), move the code onto them, then add a lint check that fails when anything new doesn't fit. The check is the part that makes the agent obey, because it has to fix what the check reports. I built a set of agent skills that runs that whole loop, including a DESIGN.md with explicit "Never" rules and the lint check (I'm the author): https://github.com/MaxPrehoda/motif. To see how inconsistent a project is right now, without installing anything: |
One thing that helps me a lot is giving the model visual references instead of only text instructions.
If I want a certain UI direction, I’ll usually provide screenshots/images of the kind of layout, spacing, mood, or component style I’m aiming for, and then ask it to adapt that into the existing app instead of inventing something from scratch.
The important part is still to keep it constrained: reuse existing components, match the current spacing/colors, and manually review the result. Otherwise it can still drift into that generic “AI UI” look pretty quickly.
So for me it’s usually: visual reference first, then implementation, then manual cleanup :)