Welcome back. AI code editors are design tools. That's going to need to be said a lot this year.

I'm coming off a caffeinated weekend where I shipped a nostalgic personal site, built a text-based adventure game, and built a visual tracker for designers who ship.

Some are still prototypes, but I was definitely doing design work in very new way.

It feels like 2001 when the internet was the wild west for the creative and curious. It feels like 2009 when small founders could become big companies.

Those were creatively rewarding times to get curious and build. This time is no different.

God help those of you that have to endure the insufferable musings of my dad-cardigan enlightenment.​

—Tommy (@designertom)

the wireframe

• The rise of AI coding assistants
• Building your AI-augmented design stack
• Real-world workflows

the evolution of design tools gets weird

"Should designers learn to code" isn't nearly as cool anymore as "should designers learn to use AI coding assistants".

Yes, there's a difference.

AI coding assistants are fundamentally changing how we can bring ideas to life (check out Steve Sewell's informed perspective on this).

I'm not talking about throwing together quick prototypes that you'll never ship (these are great for that, too).

I'm talking about building and launching real products. In days. Not weeks. Not months. Days.

three types of AI coding assistants

After spending way too much time with these tools, here's how I break them down:

1. Chatbot Assistants

Your familiar friends with new tricks:

• ​Claude and ChatGPT: For scaffolding projects and debugging complex coding issues
• ​Perplexity: For digging deeper into debugging tips or coding docs on the web
• Best for: When you need direction for debugging, where to start, or how to build

2. Web-Based Code Environments

This is where it gets interesting:

• ​Lovable.dev: My current favorite for quick builds that scaffold accurately and look good
• ​v0 by Vercel: For rapid experiments that might turn into something real
• ​Bolt.new: When you need something that looks good out of the box
• Best for: Going from "what if..." to "oh sh** it works" in record time

3. Local Development Assistants

For when you're ready to get serious:

• ​Cursor: The closest thing to having an AI paired programmer
• ​GitHub Copilot: Like autocomplete but for entire features
• ​Windsurf: A more polished version of Cursor
• Best for: When your weekend project starts

Together with Framer​

Designing a Website 🤝🏻 Building a Website

If you’re a designer tasked to create and publish visually stunning websites, there’s a tool for that. If you want to boost creativity while speeding up the overall web development process, you need Framer—no coding required.

The next best no-code website builder for designers, Framer:

• Feels and works like Figma and other design tools you know
• Lets you publish your design as a real website in seconds
• Supports breakpoints, animations, and even a whole CMS

Plus, you can even import designs from Figma using our Figma-to-Framer plugin so you don’t have to start from scratch.

Are you ready to learn how Framer can streamline your web development process?

Learn more now

the AI-augmented designer's stack

I've tried a lot of AI tools meaningfully (my credit card statements prove it).

Here's what's actually working for me:

Core tools (stuff I use daily):

• Research: Perplexity.ai because Google search feels slow now
• Design: Framer or Figma + shadcn/ui design kit​
• UI Framework: Tailwind + shadcn/ui components because I'm not reinventing every button
• Knowledge Management: Notion + Claude + ChatGPT for keeping my brain organized

Development tools (how I'm shipping):

• Primary: Lovable, Bolt.new for quick wins
• Coding: Cursor + VS Code when things get real
• Infrastructure: Supabase, Vercel because I'm not building auth in 2025
• AI Assistance: Claude, ChatGPT for additional coding support

Misc tools (deserve a shoutout):

• Video recording: Screen.studio for screen recordings and gifs, Loom for async
• Notetaking: Granola - I don't take manual notes anymore
• Image Assets: MidJourney continues to be my go-to and their editing updates are strong

real world workflows

Different designers, different needs. But I’ve noticed a few standout patterns emerging with AI coding assistants. Let’s get really specific.

The corporate designer

Goal: Communicate a “blue sky” initiative or feature concept to your PM or dev team.

1. Refine a PRD

• Use Claude or ChatGPT to polish your “blue sky” PRD or spec.
• Let the AI highlight key objectives, success metrics, or user flows - edit to completion.

2. Scaffold some visual concepts

• Hop into Figma with the shadcn/ui design system to lay out core screens.
• Keep it minimal - focus on the main user flow that supports the concept.

3. Generate a prototype

• Plug your updated PRD details + Figma wireframes into v0.dev or Lovable.dev.
• Watch it spin up an interactive version that actually looks legit.

4. Iterate and share

• Tweak copy, colors, and micro-interactions in real time.
• Fire up a short Loom video. Send it to your PM, devs, and stakeholders. Show them what’s really possible.

Why this works:​
You’re no longer just handing over big ideas in a deck or static screens. You’ve got a functional prototype that dev and PM can poke at, break, and get excited about.

The weekend hobbyist

Goal: Play, learn, and hopefully spark your next wave of creative curiosity.

1. Start tiny. Even smaller than that.

• Seriously, pick the smallest feature or idea you can imagine.
• Ask ChatGPT or Claude for “the simplest way to implement X.”

2. Use Lovable.dev (or Bolt.new)

• Paste your short “tech PRD” or just a paragraph about your idea (check out this prompt handbook for AI coding)
• Let the AI scaffold an MVP of one feature or workflow at a time.

3. Experiment with one add-on

• Maybe user authentication with Supabase.
• Or a tiny data store so you can save progress.

4. Ship it quick

• “Perfect” is the enemy of learning. Get your half-baked app live on Vercel in under an hour.
• Tweet it out, share with friends, gather that sweet feedback or vanity dap.

5. Keep tinkering

• Go ahead and break it, fix it, tweak it. The more you tinker, the more you learn.
• Prompt the AI again for a new feature: “Add a notification system.” Or copy/paste pre-built shadcn components. Boom, more fun.

Why This Works:
You’re not chasing production-ready output, but you'll get excited at how close you can get. Plus, building things for you is one of the best ways to have fun while learning. You might accidentally build something useful.

The indie founder

Goal: Build small software that can scale just enough - and possibly make money.

Below is my actual step-by-step process when starting a new project:

1. Refine a technical PRD

• Draft your product idea in Notion or ramble away notes on Superwhisper.
• Have Claude 3.5 Sonnet or ChatGPT o1 Pro refine the functional specs, user flows, and technical requirements.

2. Scaffold UI ideas in Figma

• Use shadcn/ui so you’re not reinventing the wheel. It works well with most of the AI coding assistants.
• Keep it modular and consistent.

3. Generate an LLM prompt

• Combine your refined PRD with your Figma visuals to ask Claude or ChatGPT to generate a prompt.
• This becomes your “one-shot generator” request - your starting point.

4. Build in Lovable.dev​

• Paste your epic prompt and watch it generate the basic codebase.
• This is where your design skills shine: micro-iterations, real-time testing, quick design tweaks.

5. Setup auth + database

• Connect Supabase so you can handle user sign-ups and store data.
• This is usually done in a couple of clicks or a single prompt.

6. Iterate and optimize

• Keep working in Lovable for ~20 hours until you hit MVP satisfaction.
• Doesn’t have to be perfect - just enough for your earliest adopters.

7. Migrate to GitHub + VS Code

• Once it’s real enough (and you’re past the “building in the cloud” phase), move it local.
• Now you can add Cursor for deeper debugging, or GitHub Copilot if you prefer.

Why This Works:
You’re not stuck between “hacky prototype” and “full-blown engineering fiasco.” You can validate your concept, onboard real users, and be nimble enough to change directions, without losing your entire product build in the process.

resources that don't suck

The tools are changing faster than crypto prices, but here's where to start:

Learning resources:

• Meng To's DesignCode courses (always solid)
• Steve Sewell's deep dives​
• RIley Brown's Cursor guide​
• Shadcn's component guides​
• Alex Finn's build an iOS app in Cursor​
• Building a Lovable + Cursor workflow​
• Nick St. Pierre's Midjourney for creatives​
• Derek Brigg's UI engineering for designers​

Designers building with AI:

• Pietro Schirano’s chatbot that transforms the UI​
• Sam Dape's iOS calendar widget (clean AF)
• Joshua Guo's creative coding (pure inspiration)

If you're building something right now, hit reply and let me know.

the bottom line

This shift in tools and skill sets is an evolution for more people than ever before.

Whether you’re a corporate designer bridging the gap between design and dev, a weekend hobbyist just having fun, or an indie builder on the cusp of your next big thing, AI coding assistants are worth a spot in your toolkit.

They’re design tools, after all. It’s time to start treating them that way.

Until next time: stay caffeinated, stay curious, and keep building.

See you next week,

Tommy

Enjoying this newsletter? Let me know here.​