A developer explores why AI coding agents produce inconsistent UI across sessions and compares solutions like natural-language rules files, Tailwind config, and structured token specs like Google Labs' design.md, seeking feedback on what works in practice.
Been trying to figure out why every Vibe Coding session ends up producing slightly inconsistent UI even when the project already has a design system documented somewhere. The usual failure mode for me: ask the agent for a button. First time it picks #3B82F6. Next session, #2563EB. Third session, bg-blue-500. All blue, none of them the same blue. Same story with spacing tokens (1rem vs 16px vs gap-4) and font sizes (text-xl vs 1.25rem vs 20px). The root cause feels obvious in hindsight: the agent has no structured palette to reference. The rules file you give it (CLAUDE.md / AGENTS.md / .cursor/rules) is just natural language, so even when you've written "the brand colour is #1A1C1E" in there, the model still has to guess which token to pick at generation time. Natural language is fine for workflow rules but a terrible substitute for a token table. A few things I've been comparing: Pure CLAUDE.md / AGENTS.md with the palette inlined as a Markdown table. Works for one-off projects but the model still drifts after a few turns because it's re-parsing the same prose every time. A tailwind.config.js as the source of truth, then telling the model to read it. Better — it's structured — but Tailwind config only covers what Tailwind covers, and the model doesn't know why a colour exists, so it picks the wrong semantic token (uses accent where primary would be correct). A dedicated design-system spec file that pairs structured tokens (YAML) with prose explaining when each is used. Google Labs recently dropped one called design.md that does exactly this — YAML front matter for tokens, Markdown body for "when to use", plus a CLI with WCAG contrast lint. It's alpha but the structure feels right. Option 3 seems closest to what I actually want, but I'm sceptical it'll survive contact with a real project. A few things I haven't figured out: How do you keep the spec from rotting once the codebase evolves past it? Is anyone running the lint in CI against a tailwind.config.js? For teams already on Figma tokens / Style Dictionary, is there any reason to add yet another format on top, or is it strictly worse than just feeding the model the existing tokens.json? Do agents actually respect a "read this spec first" instruction in CLAUDE.md, or do they only pull it in when the prompt mentions the colour by name? For the people who solved this — did the fix come from a better spec file, a hook that injects tokens into every UI-related prompt, or something else entirely? Genuinely interested in what's working for you. The "explain my brand colour every single time" loop is killing me.
A user built a physical avatar for their coding agent to address UX challenges with monitoring long-running agents, seeking community input on ambient feedback signals for background AI tasks.
The author discovers that instructing AI agents to generate web frontends in Qt style greatly reduces the typical 'slop' in AI-generated UIs, sharing results and calling for further experimentation.
The article discusses the frustrating problem of AI agents losing their trained behaviors when switching environments, and explores solutions like prompts, policy files, and wrappers to maintain consistency.
A developer describes the challenge of building multi-agent AI assistants that fail to handle unexpected situations gracefully, relying on explicit rules that lead to a whack-a-mole problem instead of enabling autonomous reasoning about ambiguity.