UX & UI for vibe-coded products
Your product works. Now make it feel world-class.
You built your app or tool with Claude Code. It works, but you can tell from every button that an AI designed it. I take that foundation, turn it into best-in-class UX and UI, and teach Claude Code and Codex to understand and use your design system and tokens.
The difference
Same function. A completely different product.
The logic does not change. Information architecture, spacing, color, states, motion, and a real design system make the difference your users actually feel.
✨ Pro Plan ✨
$29/month — billed monthly
Unlock the full potential of your workflow — reports, exports, and team seats — all in one seamless, powerful plan.
- ✅ Unlimited projects — no limits
- ✅ Team members — collaborate seamlessly
- ✅ Priority support — 24/7
👎 maybe later
Pro
PopularEverything your team needs to ship, polished.
Unlimited projects
Spin up as many as your team needs.
Advanced analytics
See product usage clearly and act on it.
Priority support
Real humans, fast response times.
Sound familiar?
It works, but it looks AI-generated
Generic components, countless emojis and gradients… The functionality is solid, but you can tell: Claude was here.
No design system to anchor on
Every screen reinvents spacing, color, and hierarchy. Consistency drifts a little further with every prompt.
Quality drops the moment the agent gets involved
Without tokens and guardrails, Claude Code and Codex keep producing slightly different UI for the same patterns.
Function first. The craft never came.
The features are there, but typography, spacing, states, and flows never got the attention they deserve.
The foundation
A token system your product and your agents build on.
I extract or build the design tokens that hold everything together: color, type, spacing, corner radius, shadows, and so on. Defining them as tokens is only half the work. The real craft is teaching Claude Code and Codex how to work with them. So every new screen stays on style automatically.
Color
Typography
Aa
Heading
Body text
Caption
Spacing
Radius
Shadows
What you get
Best-in-class UX and UI design
For the product you already built. Hierarchy, typography, spacing, color, and states at the level of a senior design team.
- Screen-by-screen redesign of your key surfaces
- Real hover, focus, loading, empty, and error states, designed with care
- Accessible, consistent, and on-brand at every step
- Animation and motion that support the function, not just flash
A real design system and tokens
Not a one-off paint job. A token system and components that grow with you.
- Tokens for color, type, spacing, radius, shadows, and motion
- Reusable components with sensible defaults
- Accessibility as a baseline requirement
- Content that matches your voice and tone. Without — em dashes.
- Documented so both humans and agents can follow it
Claude Code and Codex that respect it
I set up your AI coding tools to understand and use your design system. On one machine or across your whole development landscape. So all future work stays on-system too.
- CLAUDE.md and project rules wired to your tokens
- Guardrails against hardcoded colors, spacing, and radii
- Design SKILLS that genuinely produce better interfaces
- Agents that produce on-brand UI without you lifting a finger
The part that lasts
And it stays on-system after we are done.
A redesign that falls apart with the next prompt is wasted money. So I teach your tools and your engineers the system: I store your tokens in Claude Code and Codex and add SKILLS and guardrails. So the next feature your team ships is on-brand because it is built that way, not by luck.
- Tokens and rules your agents read on every task
- Lint and review gates that block hardcoded values
- SKILLS and docs that drop straight into any new product
## Design system
Always use tokens from design-tokens.ts.
Never hardcode color, spacing, or radius.
// design-tokens.ts
export const tokens = {
color: { brand: '#FFBF00', ink: '#182B52' },
radius: { control: 12, card: 20 },
space: [4, 8, 12, 16, 24, 32],
}
$ npm run lint:design
✓ no hardcoded design valuesHow I work
- 01
Audit
I go through your product surface by surface, map the UX and craft gaps, and find whatever design foundation already exists.
- 02
Design system and tokens
I define or extract your tokens for color, type, spacing, radius, and elevation, plus the core components everything else builds on.
- 03
Redesign the surfaces
I bring your key screens and flows to a highest-class standard, with real states, not just polished happy-path mockups. And if you like, your entire product.
- 04
Wire up Claude Code and Codex
I configure your agents and repo so the design system and tokens are the default, with guardrails that catch drift before it ships.
- 05
Handover
You keep the system, the components, the agent setup, and the rules to keep shipping on-system long after the engagement ends.
Why me
I bring 20 years of design, UX, and product experience. I have built and owned large design systems, led design teams at Trusted Shops, and today I ship real products end to end with Claude Code and AI agents. I know both sides: the craft behind the best UX and exactly how to make AI coding tools deliver it reliably.
Frequently asked questions
What exactly is a vibe-coded product?+
Do you redesign everything or just the surface?+
Will the quality hold after you leave?+
Which AI coding tools do you support?+
Do you use our existing design system or build a new one?+
How long does it take?+
What does it cost?+
Get in touch
Ready to make your product feel as good as it works?
Send me a link to your product or a few screenshots. I will tell you where the biggest UX wins are and how I would approach the design system and agent setup. The first 30-minute call is free.
Prefer formal contact details? See the imprint and contact information.