Free guide for product designers
AI for Designers: My Workflow for Beautiful UI + Web Design
Most AI output looks generic because the model is working blind. This guide gives it real references, design skills, and project rules, so the first result looks designed instead of generated. It's almost ready - join the waitlist and I'll send it the moment it's live.
Free. Join the waitlist and I'll email you the moment it's ready, then the occasional new workflow. Unsubscribe anytime.
Almost there - confirm your email
I just sent a confirmation link to that address. Click it to lock in your spot, and I'll email you the moment the guide is ready. If it's not there in a minute, check spam or promotions.
Claude Code
Codex
Cursor
The problem
You can tell when a screen came out of an AI with no setup. The spacing is close but not right. The components are almost your components. Every page has the same hero, the same three cards, the same gradient button. It works, and it looks like everyone else's.
So designers end up in one of two places. Some fight it, redoing every screen by hand and wondering what the fuss is about. Others let it run and ship interfaces that feel generic. Neither is where you want to be.
The gap is almost never the prompt. It is what the model can see and what it is allowed to do. Give it real references, your design rules, and a way to check its own work, and the first result looks like yours. That setup is the whole guide.
What's in the guide
- 01
Toolkit
Claude Code, Codex and Cursor, set up the way I run them: install, the config file for each, and the
CLAUDE.md,AGENTS.mdand settings templates that give the agent your rules before you type a prompt. - 02
Resources
What I feed the agents: Mobbin for real product screens, skill libraries, UI reference sites, and the rest of my stack with what each one is for. Discounts applied where I have them.
- 03
Skills
The skills and subagents I use for design work: pull references, respect a system, review the output. Drop-in, with a line on when to reach for each.
- 04
MCP servers
Copy-paste configs so the agent can research real screens and read your Figma file before it designs anything, plus the one gotcha that trips people up on install.
- 05
Prompts
The handful that matter, tied to the skills above. Prompts are the smallest part of a good setup, which is why they come last.
Who this is for
Product + UI/UX designers
You design apps and systems, and AI keeps handing you screens that ignore your components, spacing, and states. The guide gives the agent real product references, your design rules in a CLAUDE.md, and a review skill that checks its own work against them.
Web designers
You build marketing sites and landing pages, and AI output looks like every other template. The guide gives the agent reference sites to study, a page-building skill, and a Claude Code and Framer workflow that ships a finished page instead of a generic one.
Questions
Yes. Nothing in the guide requires writing code. You paste a config, drop a folder into ~/.claude, and describe what you want. The setup exists so the model does the engineering while you do the directing. If you can tell a good screen from a generic one, you are the person this is for.
Claude Code, Codex and Cursor, set up side by side. The resources around them, Mobbin, skill libraries, reference sites, are the same whichever agent you pick. Skills and templates are plain markdown, so they carry to whatever comes next.
The tools will change and so will the guide. It lives at one link that always points at the current version, and every update comes with a short email saying what changed and what to re-copy. You never end up with a stale PDF.
That is who it is for. Most people using it daily accept the defaults, and it shows in the output. The guide is the difference between an agent that guesses and one that researched real references, follows your rules, and reviewed its own work before you saw it.
Free, with no tier behind a wall. The stack section links to tools with my referral codes, which get you a discount and pay me a small fee. That is disclosed where it happens and it does not change what I recommend.
Each agent needs its own plan: Claude Code a Claude plan, Codex a ChatGPT plan, Cursor a Cursor plan. Of the resources, only Mobbin's MCP needs a paid tier; the rest work free for the setup. The guide marks a minimum setup for beginners and the full setup I run.
Want early access?
The guide is almost ready. Join the waitlist and I'll send it the moment it's live: MCP configs, skills, agents, templates, and the tool stack, plus every future update, free.
No spam. Unsubscribe anytime.
Almost there - confirm your email
Click the confirmation link I just emailed you to lock in your spot. I'll email you the moment the guide is ready.