The 20 Rules for AI-First Design. Ignore at your own peril
Prevent Spaghetti before it happens. Clear-Box Vibe Coding
The 20 Rules for AI-First Design: Precepts to Build By
Vibe coding has a shelf life.
You can prompt your way to a working prototype in an afternoon. It feels like magic. Then you try to add a feature, and the whole thing collapses. You ask the AI to fix it, and it makes it worse. You are three hours into debugging something that took twenty minutes to build.
You are just a puppet, tangled in your… strings. Of Spaghetti.
This is not an AI problem. This is a structure problem. The AI did exactly what you asked. You just asked it to build on sand.
Measure twice, cut once.
In my last article, I talked about the death of the translation layer—how designers can now go straight from idea to production code. But that power is useless if what you produce is spaghetti. Speed without structure is just faster failure.
These 20 precepts are the structure. They are not a tutorial. They are not a framework you install. They are habits, boundaries, and practices that keep AI-generated code from becoming a maintenance nightmare.
Think of them as the manifesto for making vibe coding actually work.
During Episode 11 of my podcast series, I demoed the whole thing: the architecture, the cascade coherence system. I ran out of time before I could cover these 20 precepts. They were sitting in a Mural board, waiting. So here they are.
Each one follows the same structure: what you do (the practice) and why it matters for AI (the payoff). These are not theoretical. I use all of them.
Phase 1: Before You Write Any Code
1. Define the problem you are solving
AI cannot solve undefined problems.
If you cannot articulate what you are building and why, the AI will hallucinate scope. Write a one-sentence problem statement before you write a single prompt.
2. Map user journey before code
AI follows paths you draw.
Sketch the flow first. Even a napkin diagram beats nothing. The AI will generate code that serves the journey instead of code that wanders.
3. Establish folder architecture early
AI knows where to put things.
Create your folder structure before you start generating components. The AI will place files where they belong instead of dumping everything in /src.
4. Design system tokens first
AI respects boundaries you set.
Define your colors, spacing, and typography as variables before the AI touches styling. It will use them consistently instead of inventing new values every time.
Resource: Tokens Studio or just a simple CSS variables file.
5. Stub services before implementation
AI fills containers you create.
Write empty function signatures with clear names. The AI will implement them correctly because you gave it a shape to fill.
Phase 2: Architecture Patterns
6. Keep business logic separate from UI
AI cannot untangle spaghetti later.
Put your logic in services, not components. AI can refactor clean separations. It cannot untangle logic that is smeared across your entire UI layer.
7. Use hooks for state management
AI writes hooks, not prop drilling.
When you establish hooks as the pattern, AI generates clean state logic. When you do not, it creates prop-drilling nightmares that compound with every new component.
8. Inspector centralizes editing context
Single source of truth for AI context.
If your editing state lives in one place, the AI can reason about it. If it is scattered across components, the AI will lose track and generate conflicting updates.
9. Panel patterns before modals
Simpler components for AI to generate.
Panels are easier to generate correctly than modals. Modals require overlay logic, focus trapping, and escape handling. Start with panels; add modals when you actually need them.
10. Cascade checks enforce coherence
AI maintains coherence across changes.
Build systems that detect downstream impacts. When you change something upstream, the system should flag what broke. AI cannot track this implicitly; you need explicit checks.
Phase 3: Development Rhythm
11. Build vanilla prototype to validate
Patterns emerge before AI scales them.
Build the first version in plain JavaScript or HTML. Once you see the patterns, the AI can scale them. If you skip this step, you scale chaos.
12. Add AI functions one at a time
Catch errors before they compound.
Integrate one AI capability, test it, then add the next. If you add five at once and something breaks, you will not know which one caused it.
13. Test each feature before next
Quality gates prevent drift.
Do not move to the next feature until the current one works. AI-generated code drifts fast. Quality gates keep you honest.
14. Branch for experiments, then merge
Safe space for AI experiments.
Create a branch before you let AI try something risky. If it works, merge. If it does not, delete the branch. Your main branch stays clean.
15. Commit often with clear messages
Rollback points save your project.
Every commit is a save point. When AI generates something that breaks your app, you can revert cleanly. Vague commits make rollbacks a guessing game.
Phase 4: Scaling and Shipping
16. Migrate to React after patterns clear
AI migrates patterns, not chaos.
I replatformed from vanilla JS to React in under an hour. That was only possible because the patterns were clean. Migrate structure, not mess.
17. Ship incrementally, not all at once
Momentum beats perfection.
Ship small pieces that work. Do not wait for the whole thing to be perfect. Momentum compounds. Perfection stalls.
18. Changelog tracks architectural decisions
AI learns from your decisions.
Keep a changelog of why you made architectural choices. When you need to explain context to AI later, you have a reference. When you forget why you did something, you have a record.
19. AI generates within your constraints
Constraints unlock AI creativity.
The tighter your constraints, the better the output. “Build a component” gets you slop. “Build a 200-line React component using our design tokens that handles these three states” gets you something useful.
20. Human reviews every AI output
You remain the architect.
AI generates. You approve. Never let AI output go live without reading it. You are the architect; AI is the contractor.
I once had strings, but now I’m free; there are no strings on me!
This is all a work in progress. This is not the finish line. This is the starting blocks. All you have now is a place to start where you won’t be piling on more spaghetti. You can change any of these specifics, this is more like a best-practices starter kit.
But, if you do follow these 20 precepts, you will have a codebase that is spaghetti-resistant. You will have structure the AI can work within. You will have patterns it can scale instead of chaos it will multiply, and YOU will be better at this because you’re forcing yourself to have good form, just like practicing a musical instrument or sport.
What you will not have yet is a product. You still need to build the thing. You still need to make decisions the AI cannot make for you. You still need imagination, judgment, and vision.
But you will have a foundation that does not collapse the moment you try to add something new. And, you will not have a black-box AI slop app owned by a vendor (no shade to Lovable, Figma, etc, but it’s true).
You will have your code, your repo, your structure all contained and compartmentalized. Like all things should be.
Vibe coding is real. People are building with AI right now, shipping things that would have taken teams and months. But most of what gets built this way is brittle. It works until it does not. It scales until it shatters.
These precepts are how you vibe code without the regret. How you move fast without making a mess you cannot clean up later.
The manifesto for making AI-first design an actual process, not just a lucky streak.
This article accompanies Episode 11 of my podcast on storytelling, AI, and design. Watch the full demo there.