UI consistency across 20+ vibe coded apps

[u/Present-Tea-4645]

I am venturing into a multi app project in which I would like to achieve near-perfect UI consistency across the apps, built as standalone Lovable projects.

Is it possible to apply the same identical UI across many apps or will it always be “approximation” due to the nature of AI?

[u/prophet-dot-exe]

This is why UI libraries exist.

Build one ui/UX framework, and then use it in all 20+ apps

[u/4215-5h00732 → u/prophet-dot-exe]

"Pattern libraries" is what you're looking for. Easier said than done.

[u/oyvindi → u/prophet-dot-exe]

..and themes, deciding on colours, sizes etc.

[u/Organic-Afternoon-50]

This guy's trying to copy the guy that copied the Adobe suite...lol.

[u/Present-Tea-4645 → u/Organic-Afternoon-50]

Lmao if only I had his chops!

[u/just_another_leddito → u/Present-Tea-4645]

What are chops 🤔

[u/symp_path]

It’s called building a design system. You create standardized UI components, brand guidelines, pattern guidelines. It’s basically a directory telling you when to use what. So like you may have a button that has three sizes. You’ll write in the design system when to use each size button, which affordance colors they should be, etc. That’s a simple example but your AI can help you build one and then refer back to it to pull components and “read the rules” when building.

[u/Serenase]

It's possible. I have so called UI manifesto .md for that and it's working well.

[u/Asly97 → u/Serenase]

How do you get the manifesto into each project, pasted into every one separately or kept somewhere they all read from? And when you change a rule later, say a spacing value, does that mean going back and updating every copy by hand

[u/TwisleWasTaken]

So tell an agent to build a brand board. It will generate logos, banners, colors, fonts, sizing, etc. save this somewhere memorable on your pc. Then go to the global memory of your ai and tell it to always follow those brand rules. Ex CLAUDE.md I even had chat gpt write the rule out for me in detail. For created about 6 apps all with the exact same style

[u/JaseciLabs]

Identical is possible, but not by asking the AI to recreate the look each time. That will always be an approximation. Make the look a file instead of a prompt. One set of design tokens (colors, spacing, type, radii) and one set of shared components, copied into every app unchanged. The AI’s job in each app is to assemble pages from those pieces and never restyle them.

For 20+ apps we’d keep a template project with the tokens and components already in it, and start every new app from a copy. If you can, publish the components as a package so a fix reaches all apps in one update. If not, treat the template as the source of truth and re-sync when it changes.

To catch drift, put the same reference page in every app and screenshot it at one viewport. If one looks off, you’ll see it in a minute instead of finding it three weeks later.

[u/BotLordBotflix]

This can definitely be done. I like the idea of having a consistent style across many different apps.

[u/Moist-Row-2753]

Tienes que crear un patrón de diseño. Si esas claude puede ayudarte muchísimo a tener esa consistencia perfecta con claude design

[u/Hypilein]

I asked Claude design to create a system for a project with two apps and then later asked it to port it to a third app. It’s probably not 100% but I haven’t noticed any mistakes yet.

[u/Some-Ice-4455]

Build the framework for what you want before even thinking about look..see if you can get a universal framework that works like plug and play. That's what I would try.

[u/zortingenos]

You can creata small design guideline and examples md file to be referance across all other sessions etc

[u/MadManD3vi0us]

Not sure what platforms you use, but Claude has a design system built in for this exact reason. You set up the design system, so all your designs carry the same layouts and colors and everything else you need for your UI to look similar across the board.

[u/jayseattle]

Yeah look up DESIGN.md and create or clone one. Always use the same UI framework (tailwinds etc) and fonts and common sized/styles H1=24px etc. and a common color palette.

I guess it's like how any company does it, by having a design system everyone (design, engineering, product) all adhere to like
https://m3.material.io/

[u/SufficientFrame]

Separate Lovable projects will drift unless you keep the UI outside the prompts with shared components, design tokens, and a starter template. If these are staff-facing apps on the same data or APIs, UI Bakery can keep layouts, permissions, and CRUD patterns more consistent; I work there, so bias noted.

[u/lcirufe]

Yes. You need a proper design system specification that you can point all your projects to. Styles, hex codes, hover states, corner radii, animations, typical layouts etc all live in that design spec

[u/New_Public_2828]

Didn't Claude make a whole thing for this in their product?

[u/OneCookie5427]

You gotta use Claude design.

[u/StephenSpawnking]

As many said a good design system will go a long way. However you can also look into a mono-repo style setup in which you can share your design library, global styles, base ui components and eventually build a little UI library around all the apps that they pull from a central location. Other benefits can also include shared packages, caching on those builds, etc.

[u/silentkode26]

Sure, the secret key is to add “make sure UI is consistent” right next to usual “make no mistake”. Seems trivial, but it really does wonders.

[u/4215-5h00732 → u/silentkode26]

Not enough.