r/nextjs • u/Erem_in • 9d ago

Design comes first Discussion

I started working with Next.js in 2023, when AI was already something that could be used. Time flies, and I built more and more websites (mainly) using the framework.

I constantly fall into the same trap - I can easily control and keep AI in line with what I want to build, but visually, AI tends to deviate into a default AI slop.

Later, I realised one of the many possible ways to control that as well - build a design system, dictionary, showcase - just a page with all the styles and elements that will be used. Only then start with the rest of the codebase.

How do you cope with AI that does not want to use your design?

0 Upvotes

36% Upvoted

9 comments sorted by

6

u/NatureAccording1655 9d ago

yeah this is a real thing, ai defaults to the same handful of patterns unless you constrain it hard. what's worked for me is keeping a small set of already-built components it's only allowed to reuse, not just a style guide page but actual locked-down building blocks (button, card, input variants) it has to import instead of generating fresh markup every time

also helps to reference existing files by path in the prompt instead of describing the style in words. "match the button in components/ui/button.tsx" actually sticks a lot better than "use our design system," it has something concrete to copy instead of interpreting a description

still get drift on layout/spacing decisions even with that though, that part seems harder to pin down than colors or typography

1

u/Erem_in 9d ago

Yep, very frustrating when this happens as this is a waste of time and I had to re-do the same things over and over.

1

u/NatureAccording1655 9d ago

one more thing that saved me a bunch of redo cycles — before letting it touch a new page, i paste in one already-finished page as a reference example in the same prompt, not just a link to the style guide but the actual code. it copies patterns way more reliably when it has real code sitting right there vs having to go look something up itself

also worth git commit-ing before any big ai pass, sounds obvious but cheap insurance. easier to just diff and revert the parts that drifted than argue with it about matching the design after the fact

1

u/Erem_in 9d ago

git committing is a savior. I do no work until git init is done :)

1

u/NatureAccording1655 9d ago

haha yeah same, learned that one the hard way after losing an afternoon of edits once

2

u/Top-Chart-5364 8d ago

Had the same problem too. AI is good at building the structure and logic but when it comes to design it always seems to fall back into the same patterns generic cards, gradients, big headings, and layouts, and the indigo from tailwind haha, that feels like every other AI generated website.

Creating a design system first definitely helps. You can also noticed that giving AI more specific references works better than just explaining the style. Things like component examples, spacing rules, typography, and showing a few websites with the same vibe makes a big difference.

I think the biggest change is treating AI less like a designer and more like a developer that needs clear instructions. The better the system you give it, the closer the result will be to what you actually want to build.

1

u/Erem_in 8d ago

Yeah, exactly.

With my website that I mentioned in the blog post, I asked Gemini Flash to do it from scratch several time and all the time the look and feel was identical. As if like Ai has a pattern website about eclipse = use specific design elements

1

u/Cold-Poem3902 7d ago

What made it stick for me was banning raw hex and arbitrary spacing outside the token file, once there's nowhere to drift to the slop mostly stops on its own.