Design drift: reasons why screen three is not like screen one
All vibe coded apps that I make share the same hidden problem. In the first page, everything feels planned out. But on the third page, the buttons have a new corner radius, the space becomes looser, and one of the headers features a font weight that I didn’t select.
Why? Every prompt is a new choice, and the AI doesn’t remember any design choices until you tell it to. I decided to use a tiny style guide on top of the project with five style rules: one accent color, one corner radius, eight pixel spacing options, two body text sizes, and one button style.
And yet it isn't perfect, and I hesitate from over-engineering a weekend project. Full-fledged design system is too much; a brief note seems more appropriate.
I wonder how many use Tailwind config, components library or copy-pasted CSS block for their assistant. Who gets better guidance in their work? Is there any way to detect the drift before making the screenshot?
Replies
What works for me is making drift impossible to write rather than describing the style. Screen code may not contain a raw color, a raw text style or a hardcoded padding: colors come from one palette, with a light and a dark value for every token, text from one typography helper, spacing from one sizes file. A new color means adding a token to both palettes first. And anything used on two screens becomes its own widget, never a copy, so there is exactly one switch control in the whole app. The rules themselves fit in a few lines, close to your five, they are just phrased as what code may not contain.