Dive Club 🤿 – "The Trick to AI Prototyping with Your Design System"
Host: Rid
Guests: Lewis Healy & Kyler Hall (Atlassian)
Release Date: January 2, 2026
Episode Overview
This episode of Dive Club dives deep into how Atlassian has scaled AI-powered prototyping across their vast organization by tightly integrating their design system with new AI tools like Figma Make and Replit. Rid hosts Lewis Healy and Kyler Hall, who reveal the technical and organizational tactics, challenges, and learnings from the frontlines of enabling thousands of employees—from designers to PMs and engineers—to prototype quickly and consistently using AI.
The conversation covers practical template creation, prompt engineering, documentation strategies, scaling design system adoption, and what it means to run a design system in an era where anyone can ship a product interface with AI. The team also looks ahead at the future of design systems in an AI-native organization.
Key Discussion Points & Insights
1. AI Prototyping at Scale: From Chaos to Cohesion
- Traditional prototyping was ad hoc: people used prompts or screenshots to cobble together mock interfaces, which quickly became inconsistent and diverged from Atlassian’s design language.
- Solution: The Atlassian design system team developed abstracted, high-fidelity templates—not tied to any one product, but consisting of reusable elements—allowing AIs (and users) to assemble prototypes that feel unmistakably "Atlassian".
“We realized that if we create this kind of base template, then you get these things like the top nav and the side nav kind of consistent, but then also allows them to then make their own version.”
– Lewis Healy [03:02]
Notable technique:
- Code the persistent UI elements (e.g., top nav & side nav) up front; let AI and users modify content and layout without breaking overall identity and wayfinding.
Timestamp: 01:18–05:33
2. Reducing Hallucinations & Prompt Frustration
- AI would misgenerate icons, navs, and design details—referred to as "hallucinations."
- Key innovations to address these:
- Configuration objects and hard-coded constants for products/icons to give AIs reliable context.
- Copyable commands and “recipes”—small code/instruction blobs users could paste to enact common changes (e.g., enabling dark mode, swapping logos).
- “Vibe coding”: Lewis and Kyler manually wrote out large sets of instructional documentation, learning through iteration what helped the AI most.
"We found that hallucinations of this icon and this logo were very, very common... by having a configuration object of just some hard constants... we found that actually it hallucinated a lot less."
– Lewis Healy [08:47]
Recipe example:
- Switching to dark mode was non-trivial, so they provided a recipe for easy application.
Timestamp: 08:08–12:46
3. From Design System Documentation to AI-Ready Instructions
- Big lesson: Dumping lengthy, human-targeted design docs into the AI didn't work ("it would just truncate the information and only create a subset of the components").
- Instead, they wrote concise, context-aware instruction files. These included:
- "Translating from Tailwind" sections (e.g., mapping utility classes to custom components).
- Samples that directly matched how AIs (especially LLMs) are “used” to seeing UI code on the internet.
- Prioritized essential usage and core 80% cases over comprehensive but confusing variants.
"We try and instruct it to kind of think in tailwind still... we have, in every instruction, in every one of our components, a translating from tailwind section..."
– Lewis Healy [13:52]
Timestamp: 13:17–16:24
4. Iteration & “Vibe Coding” for Rapid Progress
- Their early approach was "just vibe coding" – manually generating instruction files and updating them constantly as they saw what the AIs misunderstood (or hallucinated).
- Maintained these as growing files (5,000+ lines!), then distilled to more concise, maintainable versions (~2,000–3,000 lines).
"A lot of that was just hallucinated originally until... we could go in and be like, hey, these are all the wrong media queries. Let’s go and fill in the right..."
– Kyler Hall [17:18]
Timestamp: 16:24–20:36
5. Engineering for Maintainability and Automation
- All template code and instruction files are stored and version-controlled in Atlassian’s monorepo, updated as the design system evolves. They automate documentation and guideline generation from source code files, striving for parity across all internal docs and prototyping tools.
"...These guideline files...are generated actually from a very large amount of other content...we have a bunch of sort of code, gen and script, basically to crawl the entire monorepo..."
– Kyler Hall [34:23]
Timestamp: 32:58–41:48
6. User Education & Widespread Adoption
- With thousands of potential users, education was critical:
- Created multi-format training (videos, written, masterclasses)
- Ran company-wide "AI Builders Week" for hands-on learning
- Developed a Slack bot that sent personalized group DMs to prompt inactive users and collect feedback, overcoming "Slack fatigue" and driving higher engagement.
"If you build it, they do not come. You really have to make sure it's as simple as possible and also in the different formats that people learn in."
– Lewis Healy [27:34]
Timestamp: 27:08–32:58
7. Culture Shift & Leadership Buy-in
- Viral adoption often started top-down: when design leaders used the tools in visible reviews, it spurred teams to try as well.
- Fully-functional, AI-generated prototypes provided a "buzz" in meetings that static mocks couldn't match.
"A lot of this is coming in our design reviews... seeing that from your design leader...promoted a lot of virality where it's like, oh, my boss’s boss is doing this. Maybe I should do this..."
– Kyler Hall [32:58]
8. AI is Reshaping the Role of Design Systems
- Night-and-day shift: Instead of reinforcing practice via programs and habits, it’s about “teaching” the AI—and “adoption” now means guiding the LLM’s outputs.
- Need to re-think naming, structure, and conventions to match what AIs can understand and generate.
"With AI, it's a lot more about, okay, how do we document this so it’s available in the AI, in the LLM’s memory at all times, as opposed to...design reviews, that sort of stuff. Now it’s like, can we just tell it exactly what we care about?"
– Kyler Hall [42:05]
Timestamp: 41:48–45:39
9. Looking Forward—The “AI-Native Design System”
- The remit of design systems is exploding: as AI lets anyone ship, design systems must now serve far more types of users, contexts, and endpoints.
- Dream: End-to-end AI agents that handle full product cycles, not just prototyping.
- The challenge is immense: Atlassian’s full platform is 5,000+ packages, not just the design system’s 75.
"We’re trying to look at like, what does an AI native design system look like? ... what can we actually do today to bring the future forward?"
– Lewis Healy [46:11]
"How do I enable a designer to ship to a Jira customer? And that’s a very scary thing...the further we go with prototyping, people are no longer asking about how do I work with the design system. The design system’s almost like—check—we’ve done that."
– Kyler Hall [48:42]
Timestamp: 45:39–51:49
Notable Quotes & Memorable Moments
- Lewis Healy [03:02]: "We realized that if we create this kind of base template, then you get these things like the top nav and the side nav kind of consistent...also allows them to then make their own version."
- Rid [06:43]: "It's genius because I've spent so much time just making little tweaks to the shell of my UI when actually the only thing that I want to prototype is...a different layout."
- Kyler Hall [10:13]: "Before this, we just tried to give people a set of prompts...and a lot of that’s like, we have a bunch of theming...it’s very hard to ask an LLM to do that. The only way to really do it is basically have an engineer tell you how to do it."
- Lewis Healy [21:45]: "It was getting like 50, 60% accuracy...with the hybrid template approach, it was, you know, getting a lot higher. It was hallucinating otherwise...I was obsessed with trying to just get it higher and higher."
- Lewis Healy [27:34]: "If you build it, they do not come. You really have to make sure it's as simple as possible and also in the different formats that people learn in."
- Kyler Hall [42:05]: "With AI, it's a lot more about like, okay, how do we document this so that it's available in the AI, in the LLM’s memory at all times, as opposed to...the way I see that we would do these things is through programs and people and cultural reinforcement, design reviews, that sort of stuff. Now it's like, okay, can we just tell it exactly what we care about?"
- Lewis Healy [46:11]: "We're trying to look at like, what does an AI native design system look like? We don't know the answer necessarily, but it's very much important to look ahead..."
Timestamps for Major Segments
| Segment Topic | Start | End | |--------------------------------------------|------------|------------| | Introduction & Problem Space | 00:00 | 05:33 | | Template Strategy & Hallucinations | 05:36 | 12:46 | | Documenting/Instruction for AIs | 13:17 | 16:24 | | Early Iterations & File Growth | 16:24 | 20:36 | | Measuring AI Accuracy & "Sticker Sheets" | 21:18 | 26:39 | | Training, Adoption, and Slack Bot | 27:08 | 32:58 | | Behind-the-Scenes Code & Automation | 32:58 | 41:48 | | The New Role of Design Systems | 41:48 | 45:39 | | The Future: AI-Native Design System | 45:39 | 51:49 |
Conclusion
This episode gives an in-the-weeds look at what it takes to get thousands of people prototyping effectively with AI—not just technically, but organizationally and culturally. The Atlassian team’s hybrid approach (smarter templates, better prompts, scalable documentation, and relentless focus on user education) shows how design systems can both empower and adapt to AI-native workflows.
Key takeaway: The design system’s new role is not just to serve designers, but to teach AIs how to generate interfaces with the same care and standards that designers once provided manually.
For full episodes, resources, and takeaways, visit Dive Club.