I’ve been creating design prototypes with Claude Code for a while now, and I’ve noticed some patterns that make my experience much smoother. These aren’t your typical “write a detailed spec first” approaches, which are also a big part of my workflow.
Rather, think of these like like knolling or mise-en-place: ways to prepare your workspace so that you can iterate quickly without creating a tangled mess.
1. Build Components in Isolation First
It’s tempting to build features directly into the page where they’ll live. But this often leads to components that are entangled with their surroundings, making them hard to modify or reuse.
Build standalone components first, independent of where they’ll eventually go.
Think of it like designing a button in Figma before placing it in your mockups. You’re defining the component’s basic contract: what information does it need? What actions can it perform? What does it look like in different states?
This approach has three benefits:
- Your components stay flexible as you iterate—they don’t break when you change the context around them.
- When working with AI, you can refer to components by name and file path, making your instructions much more precise.
- You can easily test them in isolation. I like to make component sandbox pages where I can play with properties.
2. Separate Your Data from Your Interface
When your data and interface are mixed together, it’s hard to understand either one clearly. Changes become risky because you’re not sure what you’ll break.
Put your data in a separate file (like JSON) and create a “provider” component that loads it and makes it available to your interface.
This is similar to how you might create a content document separate from your design file. The structure of your information is independent from how it’s displayed.
The benefits:
- You understand your data structure before you commit to a visual design.
- You can change data or interface independently.
- You can easily test edge cases by creating variations of your data.
3. Use State Machines to Stay Organized
When you’re rapidly building something, it’s easy to end up with confusing code where you can’t tell what’s happening at any given moment. Is the form submitting? Has it already submitted? Is it showing an error? This is sometimes called “boolean soup” when states are overlapping and implicit.
State machines help you explicitly define all the possible states your interface can be in, and the rules for moving between them.
Think of it like a flow chart for your interface. Instead of having vague conditions scattered everywhere, you define:
- All possible states (loading, success, error, idle)
- What actions can happen in each state
- Where those actions lead
This is especially powerful when working with AI because it gives you precise vocabulary. Instead of saying “when it’s loading,” you can say “in the submitting state.” The AI understands exactly what you mean, and you both stay aligned as you iterate.
Wrapping up
These three principles create a foundation that’s easy to iterate on. They help you stay organized even when you’re moving fast, and they make it easier to communicate precisely with AI tools about what you want to build.
Zooming out, all of these approaches increase the specificity of language. They result in unambiguous terms and separated concerns, which makes prompting and context management more precise.