I’ve been trying a new approach to designing new screens. Instead of starting in Figma, I’m going straight to code with AI.
The idea came after reflecting on the rapid progress AI is making these days. While I’ve already made a concerted effort to adopt AI into my workflow, I feel like I need to experiment with new ways to make the most of the advances.
The opportunity presented itself at work with a new project I’m working on. I’m designing a new settings screen that will be used by our WordPress AI assistant. Rather than mockup older parts of the experience, I wanted to skip that phase entirely and work directly in WordPress.
The setup
I started with Cursor and WordPress Studio for my local development environment. Since WordPress plugin development is so well established, I picked that as my way to get started.
While the tools and approach worked well initially, it fell apart as soon as I deviated out of classic WordPress territory and tried to us our newer components. Plus my Cursor credits on a paid plan ran out. A colleague suggested using Claude Code because it feels like you never run out of credits.
I followed their advice and also switched to a more modern WordPress development with a Docker environment. Thankfully, I had Claude Code setup everything for me because I didn’t have days to read through the documentation and figure it out for myself.
What worked
The prototyping fidelity was fantastic. When you’re building something real, you can’t gloss over decisions. You have to think through every interaction, every state, every edge case. It’s real and tangable.
I found a good way to explore design directions too. I built a disposable UI component that let me toggle between different options. This allowed me to evaluate them in context, see what worked, and move fast.
Sharing my overall approach internally opened doors. I got invited to present to different groups about the workflow. People were curious about how it changed the process.
Where it broke down
As I mentioned, I hit some technical issues partway through. I had a deadline coming up. So I switched back to Figma to deliver on time.
But here’s the thing. Once I had the mockups done, I went back to the prototype. With my new setup, I quickly turned those static designs into a fully working prototype. I even identified some new edge cases that needed to be covered. That’s when the handoff challenge became clear.
You can click around a prototype. You can work through all the edge cases yourself. But developers still need to build this stuff. They need specs. Details. A working prototype doesn’t communicate the same way annotated mockups do.
My colleague mentioned that AI could help with documentation and handoff. I haven’t tried that yet but I will on my next project or when I have some time.
Still figuring it out
While the workflow isn’t perfect, the speed is hard to ignore. Building in context also forces better decisions than designing in a vacuum ever could. I’m going to keep experimenting and see where this goes.