🤿 templates + recipes

a novel approach to AI prototyping with your design system

We talk a lot about using AI at startups…

But what are more established companies doing to scale AI prototyping?

What are the best ways to use AI to prototype with your design system?

That's what today's episode is all about because we're talking with Lewis Healey and Kylor Hall about how they scaled AI prototyping at Atlassian.

Some highlights 👇

  • Their vision for a truly AI-native design system

  • What's worked to scale AI prototyping adoption

  • Tips for reducing hallucinations when prototyping

  • Ways to help AI make sense of your design system

  • Their novel approach to prototyping with “templates”

  • How the role of design system designers is changing with AI

  • + a lot more

Watch on Youtube, Spotify, Apple or wherever you get your podcasts 👇

🤝 WITH RAYCAST

So I got a new computer recently… and what do you think was the first app that I installed?

If you’ve been listening to this show for a bit, you probably guessed that the answer is Raycast.

At this point it’s an extension of my fingertips and the core way that I use my computer.

And I’m not alone… I see this sentiment from people I look up to on Twitter all the time so if you’re still on the fence, just do it.

Download Raycast and thank me later. Click the link to get started 👇

🔑 KEY TAKEAWAYS

Atlassian just totally changed how I think about prototyping with AI

I’ll admit… I usually gravitate toward smaller, more nimble teams (especially when it comes to AI workflows).

So I was a bit skeptical when Lewis pinged me about what they’re cooking up at Atlassian.

Then he walked me through what they’re doing and I haven’t stopped thinking about it since.

Here’s what I find so interesting:

How Atlassian uses “templates”

Lewis and Kylor built templates for Replit and Figma Make that anyone on the team can use as a starting point when prototyping.

But this screenshot below doesn’t actually map to any specific Atlassian experience.

Instead it’s simply a launching point designed to help people get better results when prompting.

“it’s an abstracted template where it’s not actually a specific product, it’s just a bunch of elements that the ai would usually get quite wrong like top navs and sidebars”

Lewis Healey

What they’ve found is that when you upload a screenshot and ask a model to build something from scratch, it tends to hallucinate. Like, a lot.

But when you give the model a base of existing code and then ask it to modify that code to match the screenshot, the results improve dramatically.

Improving prompts with pre-built “recipes”

So how do you help people use these templates effectively?

This is where it starts to get a little meta in a fun way.

Lewis and Kylor created “recipes” which are pre-built, coded instructions that let anyone spin up specific experiences on demand.

Things like:

  • switching a UI to dark mode

  • dropping in an instance of Rovo (their AI chat experience)

Instead of asking people to write a prompt from scratch, the recipe does the heavy lifting and is written in a way the model understands.

“we're trying to think of the user experience of a non-technical person using code… and we found that it hallucinated a lot less when we gave people a copyable command rather than saying ‘change logo to Jira’”

Lewis Healey

Baking in guideline files

Each template comes with a robust guideline.md file.

It’s job is simple: teach the model how to wield the Atlassian design system.

One of the biggest unlocks here is creating specific instructions for translating from Tailwind.

“we try and instruct it to think in tailwind still because that’s what the models are trained on… so every one of our components have a ‘translating from Tailwind’ section where we say ‘if you see these class names, it should actually be this React code’.”

Lewis Healey

This brings up a separate point that I found interesting…

When I asked how they’re thinking about what comes next, they pointed to the network effects around today’s dominant frameworks and libraries.

“AI primarily knows Shadcn, Radix, and whatever it is trained on… so how can we make our components more closely aligned with that?”

Lewis Healey

Web technology is entering the most extreme homogenization we’ve ever seen.

Why this all matters

Lewis and Kylor are firm believers that product teams are entering into a more fluid model where anyone with any tool can ship directly to a customer.

“how do I enable product managers, product designers, content designers to generate Atlassian experiences with the design system?”

Lewis Healey

Funny enough, Lewis was pretty skeptical of AI in the beginning because he viewed it as a threat to design system adoption.

Now, he sees it almost the opposite way.

Design systems are the thing that makes AI usable at scale.

In his words, the design system becomes the “core of an AI-native, high-velocity organization”.

So if you’re into design systems, modern prototyping workflows, or just want a glimpse at how large teams are adapting to this moment, then I think you’re going to like this episode 👇

🤝 WITH GENWAY

Alright here’s the thing… you don’t need another dashboard. You need to talk to customers 👀

So I want to introduce you to Genway AI

You can think of it like vibe researching to validate your ideas quickly

Just draft your questions, select an ICP, and their AI agent runs interviews on your behalf by pulling from a panel of global participants.

Set it up in the morning and get actionable insights by lunch time. It’s validation at your fingertips.

And you can try it out free for 14 days just click the link to get started 👇

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