From ChatGPT to Claude Code: What Actually Changes
Moving from browser-based AI chat to a codebase-aware agent is not an upgrade. It is a fundamentally different way of working - and it requires different skills.
Read articleWhy Your UI Keeps Breaking With AI
Your AI follows design rules for one component, then forgets them in the next. This is not a prompting problem - it is a systems problem with a straightforward fix.
After the third session where you fix the same button border, you start to realize the problem is not the AI.
The AI is not making random mistakes. It is making consistent ones - the same inconsistencies that appear every time you start a new session. The spacing changes slightly. The border width shifts. The font treatment drifts. Each component looks close enough in isolation, but side by side they do not match.
You described the rules clearly. You showed examples. It worked once. Then it did not.
The Session Problem
AI tools do not carry memory between sessions. When you start a new conversation, the agent starts from zero. It has no record of the rules you established three sessions ago, the component patterns you agreed on, or the specific border treatment that makes your UI look right.
This is not a flaw in the tool. It is how language models work. Each session is independent. Each component is generated in isolation. Without a file to read your rules from, the agent improvises based on training data.
Session drift is not a behavior failure. It is a memory failure - and prompts do not fix memory problems.The instinct is to write a longer prompt. Include the full design system at the start of every session. Paste your token list before every request. This works once. It does not work across a project - because the rules live in your clipboard, not in your codebase.
What Happens Without a Source of Truth
When the AI generates without a reference file, it makes decisions from context. One session it chooses a 2px border. The next session it chooses 1px. Neither is wrong in isolation. Together they are inconsistent.
This compounds fast. Three sessions in, you have three slightly different border treatments across your components. Five sessions in, the spacing is drifting. Ten sessions in, you are spending more time correcting than building.
No source of truth
- Every session resets design decisions
- Components drift across sessions and contributors
- You fix the same issues repeatedly
- Inconsistency compounds as the project grows
- The AI improvises from training data, not your system
With a source of truth
- Rules load automatically before every session
- Every component follows the same system
- Violations are caught immediately after each change
- Consistency holds regardless of session length
- The AI reads your rules, not its own defaults
The operators who notice this first are the ones building fast - multiple components per session, multiple sessions per week. They see the drift early because they generate a lot of output.
The Fix Is a File, Not a Better Prompt
What solves this is not a longer prompt. It is a file structure that the AI reads automatically - before any prompt, before any request.
When your design rules live in a DESIGN.md file in your project root, the agent has a source of truth to reference every session. You do not paste rules into the chat. You run one command at the start of a session, and from that point the agent has your full system in context.
The second piece is enforcement. A hook that fires automatically after every component file save checks the edit against your rules. Wrong borders, incorrect fonts, missing patterns - caught before they compound into habits.
When the rules are in a file your agent reads every session, you stop being the enforcer. The system is.Three parts make this work together.
A design rules file. DESIGN.md in your project root defines your tokens, component patterns, spacing, fonts, and border rules in plain language. Not a document for humans to read once - a file your agent reads and applies every session.
A pre-session skill. /design-context loads your rules before the first edit. One command at the start of a session. After that, the agent has your complete design system in context - not from your clipboard, from the file.
A post-edit hook. A hook fires automatically after every component file save. It checks the edit against your rules and surfaces violations before they become the new normal.
What runs automatically
/design-context- loads your rules before the first edit of every session/generate-component- scaffolds new components with your patterns pre-applied/check-design- validates every edit against your rules immediately after savePreToolUse hook- reminds the agent of your standards before touching any component filePostToolUse hook- catches violations right after each change
What Changes
The difference is not noticeable in the first session. A small project will not feel dramatically faster once this is running.
The difference is in compounding. A project with 50 components does not drift. A project with 200 components stays coherent. A project with multiple contributors - or multiple AI sessions from different people - stays consistent because the rules are in the repo, not in someone’s memory.
That is what consistent UI actually means: not that you check carefully enough, but that the system does not allow inconsistency to take hold.
Consistency is not maintained by effort. It is maintained by a system that enforces itself.Get the Blueprint
We built this as a free blueprint. The repo includes the DESIGN.md template, three documentation templates, three Claude Code skills, and two hooks. Everything is pre-wired. Setup takes 15 minutes from clone to running.
Free Blueprint
UI Consistency System
Design rules that load before every AI session, components that follow your patterns automatically, violations caught after every save.
Get free access →More from Growth
Claude.ai, Cowork, or Code: Three Tools, Three Different Relationships
Anthropic ships three tools under the Claude name. Each one places the agent at a different distance from your work - and choosing the wrong one is less about preference and more about where you are as a builder.
Read article
How to Install Claude Code, Gemini CLI, and Codex
Three terminal AI agents are now available from the major labs. This guide covers the exact setup for Claude Code, Gemini CLI, and Codex - from dependencies to verification - in one afternoon.
Read article