A designer's guide to AI: Why designing in Cursor lets you prototype 10x faster, simplifies collaboration, and accelerates getting ideas out of your head | Joel Unger

Summary

Episode Summary: "A Designer's Guide to AI" with Joel Unger

Podcast: How I AI
Host: Claire Vo
Guest: Joel Unger, Design Director at Atlassian
Release Date: May 12, 2025

---

Introduction

In this episode of How I AI, host Claire Vo engages in an insightful conversation with Joel Unger, the Design Director at Atlassian. With over a decade of experience in creating popular products like Confluence, BitBucket, and Trello, Joel shares his expertise on integrating AI into the design process to enhance efficiency and creativity.

---

Current Work at Trello

Joel begins by discussing his current projects at Trello, highlighting the significant changes and feature additions aimed at transforming Trello into a personal productivity powerhouse.

• Enhanced Feature Integration: Joel explains how Trello has evolved from a traditional Kanban-style tool to incorporate features like Inbox and Planner, which allow users to capture tasks from various sources (e.g., Slack, email, voice notes) and plan their execution.

  [02:59] Joel Unger: "Recently we've been pivoting Trello to become your personal productivity powerhouse. [...] There's not really a center to this view anymore. It's all of these can be up beside each other at any time."

• User-Centric Design: Emphasizing Trello's tactile principles, Joel describes the drag-and-drop interactions between different features, ensuring a seamless and intuitive user experience.

---

AI in Prototyping with Cursor

Transitioning to the role of AI in design, Joel shares his journey of leveraging AI tools to accelerate the prototyping process.

• From Figma to Cursor: Initially using traditional design tools like Figma to create multiple design variations, Joel found the process tedious and time-consuming. The introduction of Cursor, an AI-powered tool, revolutionized his workflow by automating complex tasks.

  [04:43] Joel Unger: "I jumped into Figma and specked out like a ton of variations [...] But it didn't quite get me where I wanted to go with the product."

• Efficient Code Generation: By integrating Cursor, Joel was able to generate responsive, drag-and-drop capable code directly from design images, significantly reducing the time from concept to prototype.

  [06:41] Joel Unger: "I paste in my image from Figma and say, okay, build me a three panel system with a toolbar to toggle on and off panels. [...] It'll interpret it fine."

• Collaboration with Developers: The AI-generated code served as a starting point for discussions with the engineering team, facilitating clearer communication and faster iteration based on user feedback.

  [07:54] Joel Unger: "It got the conversation started and I could start to tell them like, okay, look, the min width needs to be this [...] Instantly understood."

---

AI in Product Development and Collaboration

Joel elaborates on the practical benefits of using AI in product development, particularly in handling nuanced design challenges that traditional tools struggle with.

• Responsive Design Enhancements: AI tools like Cursor enabled Joel to experiment with complex responsive design scenarios that would have been difficult to prototype manually.

  [07:14] Joel Unger: "Really nuanced responsive design choices that I would have never encountered in Figma."

• Iterative Development: The ability to quickly generate and modify design prototypes allowed for rapid testing and incorporation of user feedback, ensuring the final product met diverse user needs.

  [08:00] Joel Unger: "And just shout out to my developers, they caught things that I didn't even catch."

---

AI in Preparing for the Podcast

Demonstrating AI's versatility, Joel shares how he utilized ChatGPT to prepare for the podcast itself.

• Automated Preparation: By inputting a run sheet of topics into ChatGPT, Joel was able to generate a preliminary script, streamlining the preparation process.

  [09:07] Joel Unger: "I pasted them in the chat GPT and said, okay, voice mode, let's prep."

• Human Touch: While the AI-assisted preparation was efficient, Joel notes that the AI lacked the personal charm of a human host, highlighting the importance of human oversight.

  [09:24] Joel Unger: "It didn't give me a lightning round question. [...] It just wasn't as charming as your human host."

---

AI in Design Asset Creation: Animated Logos

Joel recounts a last-minute challenge involving animated logos and how AI facilitated a swift solution.

• Quick Asset Replacement: Faced with the need to replace animated logos across products before a team launch, Joel leveraged Cursor to convert SVGs into animated formats without the extensive time investment typically required.

  [11:35] Joel Unger: "I threw the vector art in there just to get a little start and ask DID to do a clipping mask and it could do that."

• Precision and Iteration: Although some manual adjustments were necessary, the AI provided a substantial head start, enabling Joel to finalize animations efficiently.

  [13:34] Joel Unger: "And it's exactly what we needed."

---

AI in Illustration and Mood Boards with Midjourney

Exploring further creative applications, Joel discusses his use of Midjourney to generate illustrative assets and mood boards for Trello's mascot, Taco.

• Creating Mood Boards: By inputting black-and-white vector images into Midjourney, Joel generated varied illustrations that served as a foundation for refining the mascot's design.

  [14:14] Joel Unger: "Midjourney is amazing. [...] It's more like a mood board. Right."

• Collaborative Design Process: The AI-generated images acted as a starting point for the design team to establish consistent character traits and design standards.

  [16:10] Joel Unger: "We need to make these choices and make a consistent character clearly. And this is a great starting point for that."

---

Re-defining Design Process with AI

Reflecting on the broader impact of AI on design, Joel shares his evolving perspective on the role of designers in an AI-augmented workflow.

• From Anxiety to Empowerment: Initially concerned about AI potentially replacing his role, Joel realized that AI tools primarily serve to expedite idea generation and implementation, enhancing his creative value.

  [17:26] Joel Unger: "I was a little anxious, like, is this thing going to take my job? [...] All it really does is accelerate getting those ideas out of your head faster."

• Focus on High-Level Craftsmanship: With AI handling repetitive and time-consuming tasks, designers can dedicate more time to intricate aspects like motion, interaction, and brand consistency.

  [17:55] Joel Unger: "It's pretty eye opening to me, is realizing how much more value I have actually after using these tools."

---

Lightning Round: Quick Insights and Tips

In a rapid-fire segment, Joel shares his top AI tool recommendations and experiences:

• Top AI Tool Recommendation: Cursor

  [18:33] Joel Unger: "I'm biased, but I think you should jump into cursor [...] your speed just is 10x amazing."

• Challenges with AI in Design: Responsive Design

  [18:47] Joel Unger: "Responsive stuff was surprisingly hard. [...] that problem will be solved very soon once the agent gets access to be able, like, see the browser."

• AI Interaction Techniques: Dealing with Cursor's Limitations

  [19:33] Joel Unger: "It makes me feel bad because if you turn on thinking mode, it will say, user is angry at me. [...]"

---

Conclusion

Joel Unger's integration of AI tools like Cursor and Midjourney into his design workflow exemplifies the transformative potential of AI in product design. By automating mundane tasks and enabling rapid prototyping, AI empowers designers to focus on creative and strategic aspects of their work. Joel's experiences highlight the importance of embracing AI as a collaborative tool that enhances, rather than replaces, human creativity.

For more insights and to follow Joel Unger's work, visit JoelUnger.com or explore Atlassian's Trello platform.

---

Notable Quotes:

• "All it really does is accelerate getting those ideas out of your head faster." — Joel Unger 00:04
• "Figma is maybe 10% of the job, and a lot of the rest of it is just thinking about the problems." — Joel Unger 00:04
• "Responsive stuff was surprisingly hard. Like, it can't see your browser, so you have to kind of like take a bunch of screenshots and send it what it looks like at various sizes." — Joel Unger 18:47

---

This episode offers a comprehensive look into how AI is reshaping the design landscape, providing practical applications and inspiring designers to harness these tools for greater creativity and efficiency.

Transcript

[Host]

How do you think about design differently now than you maybe did before?

[Joel Unger]

Initially I was a little anxious, like, is this thing going to take my job? But you quickly find out what the limitations are and that your thoughts and prompts are the only thing driving it. And all it really does is accelerate getting those ideas out of your head faster. Figma is maybe 10% of the job, and a lot of the rest of it is just thinking about the problems. It's even greater with AI you can get right into the gnarly parts of the problems right away. Foreign.

[Claire Vo]

Welcome to How I AI I'm Claire Vo, product leader and AI enthusiast, here on a mission to help you build better with these new tools. Today we're speaking with Joel Unger, Design Director at Atlassian, who has spent the last decade building great products we all know and love like Confluence, BitBucket and Trello. Joel answers the question, are designers really going to code? With a resounding yes, Showing us how he takes his Trello prototypes, puts them into cursor, and builds interactive specs his engineering team can use to build awesome experiences. Joel is an inspiring combination of designer and engineer and you'll learn so much from his workflows on how to build products, brand assets, and even illustrated puppies. Let's get to it. This episode is brought to you by Paragon, the integration infrastructure for AI SaaS companies our AI features on your 2025 product Roadma. Whether you need to ingest data for RAG from your users external apps like Google Drive Files, Gong Transcripts or Jira Tickets, or build AI agents that automate work across your user's various tools, integrations are key to building useful AI features. However, building every one of these integrations costs months of engineering time you simply can't afford. Given the rapid pace of AI advancement. Paragon is an all in one embedded integration platform for AI products. Industry leaders like ai21u.com and copy AI use Paragon to connect over a hundred of their users SaaS applications to ingest data for rag and provide their AI agents with thousands of integration actions. They've accelerated their integration development velocity by up to 4.50x, allowing their engineering teams to focus on core product features. Want to fast track your integration roadmap this year? Visit useparagon.com howiai to learn how that's use Paragon P-A-R-A G-O-N.com howia hey Joel.

[Host]

So great to have you here. Before we jump into the demos and I'm really excited about what you're going to show us. I know there's a lot of changes happening at Trello, so tell us a.

[Claire Vo]

Little bit about what you're working on right now.

[Joel Unger]

Yeah, I would love to. And I'm going to demo exactly what I've been using Trello for in preparation for this podcast. So traditional Kanban style Trello. I'm sure you're familiar with it. Cards on a board. Recently we've been pivoting Trello to become your personal productivity powerhouse. And what that means is you can now quick capture anything from third party apps like from Slack, email, voice capture notes, right to an inbox. And so that means on the go. All week long I've been having these thoughts about what can we talk about on the podcast and sending them to my inbox from my phone, dragging them into columns and it's really helping me get set up. In addition to that, I have been using Planner, the new feature that lets you not only capture your tasks, but plan time to get them done. So you can see there's a lot of surfaces that have to play together. And one of Trello's principles is tactile. How can we have drag and drop interactions between Inbox to Planner, planner to Boards, boards to planner, etc. And this isn't a traditional like sidebar toggle system where you can just like pop in and out Inbox or Planner. There's not really a center to this view anymore. It's all of these can be up beside each other at any time.

[Host]

So you're adding a lot more features and those features take space and you're trying to figure out the configuration of all of it and build what if you're not watching and you're only listening, is a cool, a quite beautiful product. So how did AI help you get to this great end state as a designer?

[Joel Unger]

Well, I didn't start in AI, of course. I used the traditional design tools. I jumped into Figma and specked out like a ton of variations of like how can Inbox, Planner and board all fit together on a screen, be responsive and be configurable in any sort of which way the user wants to have them up. And it took a while. And I think any designers familiar with this process, like you see specs that outline pixel values and widths. It's a bit tedious, but at the end of the day you get your message across to your developers and it gets built to spec.

[Host]

But it doesn't seem like this got you where you wanted to go with the product.

[Joel Unger]

No, not quite so we launched to beta. We got great feedback. People were finding the panel system intuitive, but they wanted more control. They wanted to resize these panels and customize like exactly how they fit on their screen because we found users had ultra wides or really narrow or they were docking their Chrome browser to the side. So we kind of had to immediately respond to this feedback and say, okay, how do we allow users to drag and drop? And that is where Figma falls short. Now what I did was set up my developer environment cursor and get all the tricky parts out of the way. And eventually it was set up and could just paste a picture into the chat and say, okay, start from here. I have a three panel system. I want to make it drag and drop. So I'm in cursor and I paste in my image from Figma and say, okay, build me a three panel system with a toolbar to toggle on and off panels. Guess what? Spelling doesn't matter. There are no rules. It'll interpret it fine.

[Host]

My favorite feature of AI products is spelling doesn't matter.

[Joel Unger]

So it's going to go off, read the entire system and get it done.

[Host]

Great. So then it's building out this code for you and then what do you get on the other side of this as, as a designer that you found so useful?

[Joel Unger]

It's pretty nuts, but if you have the right libraries to start with, it'll just do. Takes a little bit of knowledge on your end to go search for what it is that can actually achieve these results. But once you're there, like you're set.

[Host]

And what decisions did this help you make?

[Joel Unger]

Right? Really nuanced responsive design choices that I would have never encountered in Figma. As you can see, dragging and dropping means you can literally have this in any layout. It's really nuts. So what happens when you drag from the side all the way to the left and you have three panels open? Like, I don't know, let's go try it out.

[Host]

I see how useful this is just from a user experience testing perspective. Did you hand this code to your engineers? Like, how did you actually take it from this to what we saw earlier, which is this beautiful production, you know, production experience.

[Joel Unger]

I'm pretty close to my dev team and I knew that they couldn't actually use this code. Like they need to write unit tests. They need to actually assure quality at an enterprise scale, which is a completely different ask from a prototype. But it got the conversation started and I could start to tell them like, okay, look, the min width needs to be this and min widths need to stack. And now if you drag it past this breakpoint, it needs to collapse all the way to the edge. And instead of just like describing this, I could show them in a loom video and it was instantly understood.

[Host]

And is this, is this in the product now?

[Joel Unger]

It is in the product.

[Host]

Let me see.

[Joel Unger]

There we go. A little different.

[Claire Vo]

Yeah.

[Joel Unger]

And just shout out to my developers, they caught things that I didn't even catch. Right. So what happens when you actually toggle off all these and it goes full screen? Can you drag from the edge anymore? No. So there's always work to be done.

[Host]

Now that I see podcast prep up here, I'm also going to call out a little last minute AI use case that you told me you did before we started recording. So tell us how you used AI to prep for your AI podcast.

[Joel Unger]

You sent me kind of a run sheet of the topics we would go over. I pasted them in the chat GPT and said, okay, voice mode, let's prep. And off we went.

[Host]

Amazing.

[Joel Unger]

Really great to just have like that live feedback.

[Host]

How did you feel like it did?

[Joel Unger]

I think it missed a few points.

[Host]

Yeah, what point?

[Joel Unger]

It didn't give me a lightning round question. And though context. Windows. Too short.

[Host]

Too short. Okay. And it wasn't. It just wasn't as charming as your human host.

[Joel Unger]

Undoubtedly. Undoubtedly.

[Claire Vo]

This episode is brought to you by. WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. These tools only work well when they have deep access to company systems. Your copilot needs to see your entire code base. Your chatbot needs to search across internal docs. And for enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one to pass. They need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where work OS comes in. WorkOS gives you drop in APIs for enterprise features so your app can become enterprise ready and scale upmarket faster. Think of it like stripe front enterprise features. OpenAI perplexity and cursor are already using work OS to move faster and meet enterprise demands. Join them and hundreds of other industry [e-mail] start building today.

[Host]

Who was the benefit of this work? Your engineering team? You. Did you save time. What was kind of your takeaway from doing this? Prototyping this way?

[Joel Unger]

I mean, my time, right? Like it's so valuable to be Able to spend it doing like the thinking part of the work. You always kind of say, like, you know, Figma is maybe 10% of the job and a lot of the rest of it is just thinking about the problems. It's even greater with AI, you can, you can get right into the gnarly parts of the problems right away.

[Host]

Speaking of saving time, you have another design use case for us that came out of a last minute, pretty big ask of the team. Can you talk us through what you did there?

[Joel Unger]

Just two days ago, I think there was a ask to replace logos across the products before our new team launch in April. And we're approaching a code freeze for that event. So it's down to the wire. And I was like, okay, no big deal, right? Like a simple asset swap, we should be able to handle this. And I roll my mouse over the logo and remember, oh, shoot, it's animated. And we're the only product that has a sort of Easter egg that animates the logo on hover and on page load. And I love it. I'm a sucker for these little micro interactions. So I inspect the code and I think, what are you little animation logo. It's an animated gif. Oh, no. And I think, who knows how old this is? Like, am I going to be able to track down the files? No. And old me would have just eaten the cost of After Effects license and recreated it by hand. But I thought, okay, wait, I have the SVG. I know SVGs can be animated. Can I throw this at cursor? I threw the vector art in there just to get a little start and ask DID to do a clipping mask and it could do that. And then I said, okay, here's the image. Can you make these little bars go up and down? And it interpreted all this crazy math like, I can't even read this stuff like this. This is Robotsby. All I had to do was describe it, say, dance the little animation up and down. And I did have to find exactly how many milliseconds the animation lasts. So I put the GIF in an online tool and it told me, but really, that's it. And the rest was just fighting with cursor. We're saying, oh, no, few pixels to the left, a few pixels to the right, et cetera.

[Host]

Yeah, that's, that's true designer work there, saying, not only do the pixels have to be perfect, but the frame rate has to be perfect. So show us what you got.

[Joel Unger]

So here a moment, I show up to the chat and drop these and it's live.

[Host]

They're so cute.

[Joel Unger]

Animated SVGs. And it's exactly what we needed.

[Host]

And so you got it in last minute ask and you didn't have to sacrifice hours and hours and hours to artisanally crafted animated bars.

[Joel Unger]

Exactly right.

[Host]

Amazing. Okay, and then I'm wondering if you can show us one more demo which is a little bit around generating even more creative assets using one of my favorite tools, which is is Mid Journey. So I'd love to hear a little bit about how you have used Mid Journey. What are some of your prompts and tricks and actually, how are you getting this into the organization as well?

[Joel Unger]

Midjourney is amazing. I've been tinkering with stable diffusion and the like for years now. And one of the most powerful things you can do just to get started is kind of like an image mask. You throw a black and white image at midjourney and it will just generate all sorts of fun variations of that thing. And you can prompt it and say, like, oh, company logo in a swamp as an aerial view of an island. It's really fun.

[Host]

So what you're doing here, just so I understand, is you're taking a kind of black and white vector style image of your logo, you're dropping that into Mid Journey, and then you're prompting it to do something really cool with that.

[Joel Unger]

Exactly.

[Host]

So who is Taco?

[Joel Unger]

Taco is Trello's cutesy little husky mascot, and he pops up for onboarding and empty states and is beloved by fans of Trello. Now, I was curious, how could I nail this illustration style, if it was even possible in Mid Journey? So I spent, I don't know, an afternoon just, like, giving it my best effort. Cute cartoon husky, clipart, blue collar, gray fur, solid blue eyes, et cetera, just to see how close can you really get? And it's okay. I'll say. It's not perfect, but what I found was that it didn't have to be. It's more like a mood board. Right. Like, this is something that you would put together and take it the next step, actually get out your tablet pen and draw it for real. And I think we're going to have a design day coming up soon where the designers just jam on this stuff and redo our assets and decide what is, like, a style guide for Taco. Like, does he have black eyebrows or gray? And does he have a pink ear or, like, what's it, pink paws or black paws? I don't know. We need to make these choices and make a consistent character clearly. And this is a great starting point for that.

[Host]

Got it. So you use Midjourney, 1, to test how consistent of a character output you could get. And from what you're telling me, mid. But two, it creates sort of a mood board for your design team to then go actually articulate what are the design standards that we need around this illustration? And maybe if you come to an agreement around that, then you can loop back around to midjourney and see if you can drive that character consistency in the outputs.

[Joel Unger]

Exactly right. And you got to answer the really important questions, like how floofy should the fur be?

[Host]

You heard it here, keyword in image prompting. Floofy. All right, so, you know, you showed us three very, very, very different features. We saw complex UI interactions that would have been really hard to prototype any other way. We see recreating brand assets with motion.

[Claire Vo]

Which is pretty complicated.

[Host]

And then we see sort of more of the exploratory illustration work that's maybe an input into design work, not an output itself. So I'm curious, now that you've used these tools to do so so many different things, how do you think about design differently now than you maybe did before?

[Joel Unger]

Initially, I was a little anxious, like, is this thing going to take my job? And I think a lot of designers can resonate with that. But you quickly find out what the limitations are and that your thoughts and prompts are the only thing driving it. And all it really does is accelerate getting those ideas out of your head faster. So that was pretty eye opening to me, is realizing how much more value I have actually after using these tools.

[Host]

Cool. Yeah, I agree. I mean, this is a lot of great work. And what I say is it allows designers to sort of operate at the top tier of their craft, which is motion and interaction and brand and all those things that you want to do versus mocking up ui. Okay, thank you for showing us all that stuff. It's really exciting. It's giving us a couple very specific things we can bring into our own design work. But let's hit you with a lightning round and then get you back to all these exciting launches you have going on. So thank you. You showed us a bunch of tools. What's the number one AI tool you think product designers need to know right now?

[Joel Unger]

I'm biased, but I think you should jump into cursor, and it's a little bit of a learning curve. So I'd say partner with a developer friend who can get you set up. But once you are set up, man, you. Your, your speed just is 10x amazing.

[Host]

And so what is a design task that you thought AI would be good at?

[Joel Unger]

That it wasn't, I think, really simple, like, responsive stuff was surprisingly hard. Like, it can't see your browser, so you have to kind of like take a bunch of screenshots and send it what it looks like at various sizes. So that's interesting. And I think that problem will be solved very soon once the agent gets access to be able, like, see the browser.

[Host]

Okay. And then I saw you do what we all do, which is we argue with cursor in the sidebar. What is your go to get cursor unstuck prompt technique? Are you a yeller? Are you a pleader? Do you offer money? What is your style?

[Joel Unger]

It knows it has my money. Yeah, I call it a. An amateur, I think, sometimes.

[Host]

Okay, so you neg. You neg.

[Joel Unger]

What is this junior tiered nonsense? No, it can. It makes me feel bad because if you turn on thinking mode, it will say, user is angry at me. I should be like, you know, I should do my job better. Like that. Oh, no.

[Host]

All right, this has been so fun. Thank you for giving us some practical applications of how you can use this in design. The products look great, the work is exciting, and you're clearly having a lot of fun. So to end, where. Where can we find you and where can we be helpful?

[Joel Unger]

Yeah. Joelunger.com and also Trello, go check it out. It's awesome.

[Host]

Amazing. Well, thank you, Joel.

[Claire Vo]

Thanks so much for watching. If you enjoyed this show, please like and subscribe. Subscribe here on YouTube or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review which will help others find the show. You can see all our episodes and learn more about the [e-mail] See you next time.