How I AI: Atlassian's Joel Unger on Prototyping UI, Animating Logos, and Illustrating Puppies

Atlassian Design Director Joel Unger uses AI to turn static interface ideas into working interactions, recreate a missing motion asset, and explore visual directions for Trello's mascot.

The workflows extend what Joel can test himself before involving engineering or the wider design team. They do not turn generated code or imagery into approved production assets automatically.

In this episode of How I AI, Joel builds a resizable three-panel prototype from a Figma screenshot, recreates an animated Trello logo as SVG, and uses Midjourney generations as a mood board for Taco the husky.

Each example ends at a different boundary: a behavior demo for engineering, a motion asset that receives production review, and visual exploration that informs a later design session.

Prototype resizable UI in Cursor

The interactive UI prototyping workflow begins with the question a static Figma frame cannot answer, then uses Cursor to create a reversible behavior prototype an engineer and designer can exercise together.

Trello was adding an inbox and planner alongside its Kanban board. Joel needed to explore how several panels could be resized, hidden, and arranged across wide and narrow browser windows.

Identify what the static mockup cannot answer

Joel began with detailed Figma layouts. Beta feedback showed that users wanted more control over panel size and arrangement, especially across ultrawide monitors and narrow docked windows. Those interaction questions were difficult to settle with static frames alone.

Build a behavior prototype from the screenshot

After an engineer helped configure the development environment, Joel pasted a screenshot of the Figma design into Cursor.

He described the core behavior in plain language:

build me a three panel system with a toolbar to toggle on and off panels.

Cursor generated HTML, CSS, and JavaScript for the panel interaction. The screenshot supplied visual context, but it did not encode every state, breakpoint, accessibility requirement, or design-system rule.

Exercise the edge cases

Joel could drag and resize the live prototype, then test combinations that were awkward to simulate in Figma. The interaction exposed responsive cases that needed an explicit product decision.

"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."

Feeling the behavior helped him judge collapse thresholds, panel combinations, and the relationship between pointer movement and layout changes.

Use the prototype as an engineering brief

Joel did not present the generated code as production code. It lacked the tests and reliability expected by Atlassian's engineers. He recorded a Loom walkthrough so the team could see the intended behavior instead of inferring it from a long specification.

The walkthrough demonstrated details such as what should happen when a panel crosses a breakpoint. Engineering then implemented and validated the feature in the product codebase.

Recreate an animated logo as SVG

The animated SVG reconstruction workflow combines the visible reference, available vector assets, clipping logic, and repeated timing checks rather than asking the model to guess from a verbal description alone.

Two days before a code freeze, Joel needed to update an animated Trello logo. The existing asset was a GIF and the original After Effects files were unavailable.

Inspect the existing animation and available source assets

Rebuilding the motion manually would have required recreating the timing and geometry without the source project. Joel tested whether Cursor could generate an SVG version from the approved vector logo.

Generate the clipping and bar animation

He first asked Cursor to create a clipping mask from the new logo, then prompted it to animate the bars.

His motion prompt was deliberately simple:

Can you make these little bars go up and down? ...dance the little animation up and down.

Match the timing and alignment

Cursor generated the animation code. Joel measured the duration of the original GIF and supplied the timing so the SVG could match the established motion.

He then made small positional corrections until the bars aligned with the logo. The visual comparison, not the volume of generated code, determined whether the asset was usable.

Review the asset in its product context

The final SVG was scalable and closely matched the original interaction. A shippable version still needs brand approval, browser testing, performance checks, accessible labeling, and reduced-motion behavior where the animation is not essential.

Explore mascot directions with Midjourney

The Midjourney character-exploration workflow treats generated puppies as a mood board for proportion, expression, texture, and personality. The final style guide remains a human-authored design decision.

Joel used Midjourney to explore possible directions for Taco, Trello's husky mascot. The output was reference material for a design conversation, not a replacement for the character system.

Describe the recognizable character traits

Joel tested prompts that named Taco's fur, collar, eyes, and illustration style. Character consistency remained difficult across generations.

Cute cartoon husky clip art, blue collar, grey fur, solid blue eyes, etc.

He also demonstrated using a black-and-white image as a mask for compositional variations. Teams should upload only assets they are authorized to use and review the image service's terms, retention, and training settings before supplying proprietary brand material.

Treat the generations as a mood board

Joel described the Taco results as acceptable but inconsistent. Instead of approving them as final illustrations, he used them to expose directions and details worth discussing.

The generations became inputs to a creative review with the design team.

Convert reactions into a human-authored style guide

The team planned to use the explorations during a design day to make specific decisions about Taco's style, including:

• How full the fur should appear.
• Whether the eyebrows should be black or grey.
• Whether the paws should be pink or black.

Those decisions belong in a reviewed style guide with approved source assets, not in the model's output history.

Prototype the part that needs to be felt

Joel uses generated code when behavior is hard to communicate statically, generated motion when a source asset is missing, and generated images when the team needs several directions to react to.

The designer still owns the difficult choices: interaction behavior, motion quality, character consistency, accessibility, brand integrity, and the handoff into production systems.

A useful starting point is one reversible prototype with a clear question. Pair with an engineer for environment and code boundaries, save the original design, test the resulting behavior, and decide explicitly whether the output is a demo, a production candidate, or only reference material.

Joel chooses the tool based on what the team needs to learn. Cursor is useful when the unknown is interaction: how a panel resizes, what breaks at narrow widths, or how the state changes under input. SVG generation is useful when the target is visible but the source file is missing. Midjourney is useful when the team wants breadth before committing to one character direction.

None of those outputs has to pretend to be production-ready. A behavior prototype can become a better engineering brief, an SVG recreation can restore a missing starting point, and a set of mascot generations can give a design review something concrete to react to. The value is faster learning, followed by an explicit decision about what deserves real implementation. Joel uses speed to improve the question before the team invests in the answer.

That distinction keeps experimentation honest. A prototype can answer whether an interaction feels understandable without claiming that its code, accessibility, performance, or browser behavior is ready for customers.