How I AI: Atlassian's Joel Unger on Prototyping UI, Animating Logos, and Illustrating Puppies
Join me, Claire Vo, as I sit down with Joel Unger, Design Director at Atlassian, to break down his incredible AI workflows. We dive deep into how he uses Cursor to build interactive Trello prototypes from Figma images and recreate animated SVG logos, plus his process for exploring character designs with Midjourney.
Claire Vo
For this episode, I was so excited to sit down with Joel Unger, a Design Director at Atlassian. He's spent the last decade shaping products many of us use daily, like Confluence, Bitbucket, and Trello.
Joel is that rare mix of a designer who also thinks like an engineer, and he’s using AI to connect those two worlds in some really interesting ways. As designers, we’re often stuck in the world of static images and specs. We hand off pixel-perfect mockups and just hope they get translated into fluid, intuitive experiences. But what if we could actually build and feel those experiences ourselves, before a single line of production code gets written? That's what Joel is doing.
In our chat, Joel walks us through three different workflows he’s using to change up his design process. We'll look at how he uses Cursor to take a static Figma screenshot and turn it into a fully interactive prototype for Trello. Then, he’ll show us how he handled a last-minute emergency by using AI to recreate a complex, animated brand asset from scratch. Finally, we'll get into the creative side with Midjourney and see how he uses it to explore character designs for Trello's beloved mascot, Taco the husky.
These aren't just about saving time; they're about expanding what a designer can do. These workflows help designers take on more complex challenges, communicate their vision more clearly, and spend less time on tedious tasks so they can focus on what really matters: creative problem-solving.
Workflow 1: Prototyping Interactive UI with Cursor
Context: The Trello team was shifting the product to become a "personal productivity powerhouse." This meant adding new features like an inbox and a planner alongside the classic Kanban board. The big design problem was how to make all these panels live together on one screen. The layout needed to feel tactile and be configurable, letting users resize and rearrange things. A static Figma mockup just wasn't going to cut it for this kind of dynamic experience.
Step 1: Hitting the Limits of Traditional Tools
Joel started where most designers do: in Figma. He created detailed specs with pixel values and widths for different layouts. But after the feature launched to beta, the user feedback was immediate. People wanted more control. They needed to drag and resize the panels to fit their unique screen setups, from giant ultra-wides to browsers docked to the side of their screen. This is the kind of interactivity where a tool like Figma starts to fall short.
Step 2: From Figma Screenshot to Live Code
Instead of trying to describe the interaction with even more static specs, Joel turned to Cursor, an AI-first code editor. After getting his development environment set up, his starting point was incredibly simple: a screenshot of his Figma design.
He pasted the image right into the Cursor chat and gave it a prompt in plain English:
build me a three panel system with a toolbar to toggle on and off panels.
As Joel joked, spelling doesn't even matter. The AI understood what he wanted and immediately started generating the HTML, CSS, and JavaScript needed to build the interface.
Step 3: Discovering Edge Cases Through Interaction
The output wasn't just a block of code; it was a working prototype. Joel could now physically drag the panels around and see how the layout responded in real time. This helped him find subtle responsive design issues that he never would have spotted in Figma.
"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, like, let's go try it out."
Being able to test things this way was essential for understanding what the user experience would actually feel like.
Step 4: A New Way to Collaborate with Engineering
Joel was clear that this prototype code wasn't ready for production—it didn't have the unit tests or enterprise-grade quality his development team needs. But it turned out to be an amazing communication tool. Instead of trying to describe breakpoints and minimum widths in a document, he just recorded a quick Loom video of the interactive prototype.
He could show the engineers exactly what he meant: "If you drag it past this breakpoint, it needs to collapse all the way to the edge." They instantly got what he was after. This approach made the designer-developer handoff much smoother, and the feature is now live in the product.
Workflow 2: Recreating an Animated SVG Logo with Cursor
Context: Every product team has been there: a last-minute request right before a deadline. Just two days before a major code freeze, Joel was asked to update a logo across Trello. It seemed easy enough, until he hovered over it and remembered it was animated. This was more than just an asset swap; it was a motion design project, but he had no source files and the clock was ticking.
Step 1: The Mystery of the Animated GIF
The existing logo animation was an old animated GIF. The original After Effects files were long gone. The normal route would have been to recreate the whole animation by hand, which would have taken a lot of time and required a specialized software license. Joel figured there had to be a better way with AI.
Step 2: Prompting an Animation into Existence
Joel knew that SVGs (Scalable Vector Graphics) can be animated with code. His big idea was to see if Cursor could write that code for him. He started by giving Cursor the static vector art for the new logo and asking it to do something simple, like create a clipping mask, which it did easily.
Then, he went for the main event with a simple, descriptive prompt:
Can you make these little bars go up and down? ...dance the little animation up and down.
Step 3: Adding the Human Touch
The AI spit out a ton of complex math and code—what Joel called "robot speak." To get the animation to feel just right, it needed a bit of human guidance. Joel used an online tool to analyze the original GIF to find its exact duration in milliseconds. He gave this key piece of information to the AI to make sure the timing was perfect.
The last part of the process was a bit of back-and-forth, which he laughingly called "fighting with Cursor." He gave it small notes like, "Oh no, you have a few pixels to the left, a few pixels to the right," until the animation was pixel-perfect.
Step 4: The Hero Moment
The result was a perfectly recreated, fully scalable, and performant animated SVG. Joel dropped the new assets into the team chat, hitting the tight deadline and saving everyone from having to either ship with an old logo or delay the launch. It was a huge win, all thanks to a totally new kind of creative workflow.
Workflow 3: Exploring Character Design with Midjourney
Context: Not every AI workflow has to end with production-ready code or assets. Sometimes, you just want to explore creative ideas. For this, Joel turned to Midjourney to play with new visual styles for Taco, Trello's beloved husky mascot.
Step 1: Prompting for Character Consistency
Joel wanted to see how close Midjourney could get to Taco's established illustration style. He spent an afternoon playing around with detailed prompts to steer the AI in the right direction.
Cute cartoon husky clip art, blue collar, grey fur, solid blue eyes, etc.
He also shared a great general tip: you can give Midjourney a black-and-white image, like a logo, and use it as a mask to generate creative variations. For example, you could prompt "company logo in a swamp as an aerial view of an island."
Step 2: The Output as a Mood Board
The results for Taco were, in Joel's words, "okay... not perfect." Midjourney had a hard time keeping the character perfectly consistent across all the generated images, which is a common challenge with current image models. But Joel still found the process incredibly valuable by just changing his goal.
He decided to treat the generated images not as final assets, but as a mood board. They became a rich starting point for a creative conversation with his design team.
Step 3: From AI Exploration to a Human-Defined Style Guide
This collection of AI-generated ideas will now be the starting point for an upcoming "design day," where the team will get together to jam on the assets and formally define Taco's style guide. The Midjourney images help them ask and answer the really important, subtle questions:
- How floofy should the fur be?
- Does he have black eyebrows or grey?
- Are his paws pink or black?
This workflow is a great example of how AI can be a brainstorming partner. It can speed up the initial idea-generation phase and give you something tangible to ground a strategic design conversation.
Conclusion: Accelerating the Designer's Craft
Joel's workflows give us a really clear look at where design is heading. He showed how AI can be used for technical prototyping, fast-paced problem-solving, and wide-open creative exploration. He admitted that, like a lot of us, he was a little anxious about these tools at first. But he quickly learned that they don't replace a designer's thinking—they just make it faster and more direct.
By taking care of the tedious parts of coding and image generation, these tools free up designers to get ideas out of their heads and focus on what he calls "the gnarly parts of the problems." We can all operate at a higher level—focusing on motion, interaction, and brand strategy—instead of getting stuck making static mockups.
I hope Joel’s practical examples inspire you to try these tools yourself. Grab a developer friend to help you get set up on Cursor, or just spend an afternoon on Midjourney exploring your brand's visual identity. It's never been easier to get started, and the potential to improve your work is huge.
A Special Thanks to Our Sponsors
- Paragon—Ship every SaaS integration your customers want
- WorkOS—Make your app Enterprise Ready today with WorkOS
