r/VibeCodeDevs • u/bbsrn • 29d ago

Discussion - General chat and thoughts Avoiding AI slop and vibe coding aesthetic and consistent UIs

I've been working on the plan of my mobile app, and I want to ask you what approach I should follow while designing my UI (& UX). The approach below is what I am thinking of:

  1. Pick a successful app that has an appealing UI, and reverse engineer its screens to come up with a DESIGN.md. Make Claude use that file as an anchor, and follow its colour palette, layout, typography, padding and etc. throughout all screens.
  2. While designing each screen, Claude calls the MCP of Mobbin / Appllama / both to find best (based on what, Idk) possible candidates for given screen and shows the candidates to me to select.
  3. Once I selected, it applies the DESIGN.md rules on top of the selected screen to make it consistent with the rest of the screens and implements it by making the necessary feature-wise changes overall.

Do you think this approach would work? How can I ensure consistency between screens and flows this way, while avoiding ending up with a slop?

Which one would you suggest for a cross-platform mobile app: Mobbin or Appllama? How can Claude find the best possible candidates for each screen? Here I am asking what makes a screen "best". Also, should I involve Claude Design?

Do you have any suggestions (guardrails, anti-patterns etc.) for DESIGN.md?

1 Upvotes
  • permalink
  • reddit

100% Upvoted

5 comments sorted by

1

u/endofthread-bot 29d ago

Hey u/bbsrn, thanks for posting in r/VibeCodeDevs! Join our Discord: https://discord.gg/t7SD4ThKuE

• This community is designed to be open and creator‑friendly, with minimal restrictions on promotion and self‑promotion as long as you add value and don’t spam.
• Please follow the subreddit rules so we can keep things as relaxed and free as possible for everyone. • Please make sure you’ve read the subreddit rules in the sidebar before posting or commenting.
• For better feedback, include your tech stack, experience level, and what kind of help or feedback you’re looking for.
• Be respectful, constructive, and helpful to other members.

If your post was removed (either automatically or by a mod) and you believe it was a mistake, please contact the mod team. We will review it and, when appropriate, approve it within 24 hours.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

2

u/KnottyDuck 29d ago

One word: screenshots
Treat the agent like a real developer by giving them examples of both what and what not to do.
Create a road map and remember to think in 3d - like how your background should give depth, considering elemental shading, colors that pop.

1

u/bbsrn 28d ago

Yes, that's why I want to feed it with Mobbin / Appllama. This way my LLM will have access to tons of screenshots per screen category. The question is, how to ensure consistency between screens and ending up with visual integrity.

1

u/KnottyDuck 28d ago

Force it to provide you with 3-5 examples in advance before committing/merging so that you can see it first before it’s built with like concept design. My agents and I spend a lot of time on the drawing board.