🤿 70's sex appeal

vibe coding the all-new Google AI Studio

When is vibe coding actually useful for professional designers?

I’ve seen that question asked a lot lately…

So in today’s episode Ammaar Reshi shows exactly how he uses AI to prototype ideas for the new Google AI Studio.

He shares his Figma files and two example prototypes (including how he vibe-coded his own version of AI Studio in a couple of days).

We also go deep into:

  • 4 lessons for vibe-coding like a pro

  • When to rely on mockups vs. AI prototypes

  • Ammaar’s step-by-step process for prompting

  • How Ammaar thinks about the fidelity of his prototypes

  • + a lot more

Watch the full behind-the-scenes 👇

🤝 WITH GRANOLA

By now you probably know how much I love Granola

So I’m gonna toss it to one of my favorite designers James McDonald to share his experience 👇

I couldn’t agree more 💪

I simply cannot imagine life without Granola at this point. So if you’re a designer, you shouldn’t be having a conversation about your work without running Granola.

They’re offering 3 months free for you and anyone on your team all you have to do is click the link 👇

🔗 FEATURED RESOURCE

Ammaar’s go-to resource for component inspiration

In today’s episode Ammaar shared a pretty epic resource that he uses while vibe coding ideas for Google.

It’s called Aceternity UI and it’s a way to copy paste trending components and use them in your websites without having to worry about styling and animations.

For example one of his side projects remixed this 3D tilt effect 👀

Definitely worthy of a bookmark for later 👇

🔗 FEATURED RESOURCE

Dev Mode MCP: How to improve design to code

If you’re interested in diving deeper into Figma’s MCP Server they just released a video full of strategies.

Yarden and Peter walk through some best practices for how to structure your design files to ensure better design to code translation, use annotations and rules to align outputs with your codebase, and provide other tips & tricks for optimizing your MCP outputs.

🔗 FEATURED RESOURCE

How AI patterns can better capture intent

One of my favorite parts of What’s Next for AI Design Patterns was Vitaly’s thoughts on capturing intent in and around chat UI.

So I want to share this article by Sharang Sharma as a follow up.

He shares a bunch of examples that combine chat with familiar components that are dynamically rendered based on the user’s initial query.

Like maybe the user is searching for stock prices 👀

I’d love to see more explorations like this 👇

 

🧃 INSPIRATION JUICE

Things I saved this week

1️⃣ All-new Craft brand

Remember Nick Pattison? Well he just did a rebrand for Craft and I’m obsessed. The website is super fun and these graphics are incredible.

Also if you haven’t listened already, this interview about what it takes to design an award-winning product is a great one.

2️⃣ Clean dashboard panel

Now to balance out this week’s inspo list let’s take a look at some dense dashboard UI shall we?

I’ve been looking for Inflight inspiration lately and saved this one from David 👇

3️⃣ Funky feature cards

I just like how these cards are curved :)

How much did you enjoy this issue?

Never hesitate to reply with feedback too :)

Login or Subscribe to participate in polls.

Meet the Dive partners 

I made a list of my favorite products and asked them to come on as sponsors of the newsletter/podcast. They said yes 🥹

The #1 way to support Dive Club is to check them out👇

Framer​ → How I build my websites

Genway → How I do research

Granola → How I take notes during CRIT

Jitter​ → How I animate my designs

Lovable → How I build my ideas in code

Mobbin → How I find design inspiration

Paper → How I design like a creative

Raycast ​ → How I stay in flow while I work

Thanks for reading! I'm working hard to bring you the best design resources on the planet 🫶

If you want to go even deeper you can always:


See you next week ✌️ 
- Ridd

P.S. if you were forwarded this email you can ​subscribe here