Inspired by printer calibration sheets, designers create UI 'sticker sheets' and ask the AI to describe what it sees. This reveals the model's perceptual biases, like failing to see subtle borders or truncating complex images. The insights are used to refine prompting instructions and user training.
Atlassian improved AI accuracy by instructing it to first think in a familiar framework like Tailwind CSS, then providing a translation map to their proprietary design system components. This bridges the gap between the AI's training data and the company's unique UI language, reducing component hallucinations.
To avoid inconsistent or 'vibe coded' documentation, Atlassian's design system team built scripts that crawl their front-end monorepo. These scripts automatically generate structured guideline files for AI consumption by extracting component definitions, types, and usage examples directly from the production source code.
Atlassian found users struggled with prompting, using vague language like 'change logo to JIRA' which caused the AI to pull old assets. They embedded pre-written, copyable commands into their prototyping templates. This guides users to interact with the underlying code correctly, reducing hallucinations and boosting confidence.
A key driver for AI prototyping adoption at Atlassian was design leadership actively using the new tools to build and share their own prototypes in reviews. Seeing leaders, including skip-level managers, demonstrate the tools' value created powerful top-down social proof that encouraged individual contributors to engage.
For adding smaller, self-contained components like a chatbox or dark mode toggle, Atlassian created 'recipes.' These are pre-packaged code snippets with instructions that users can paste into an existing prototype. This modular approach avoids needing to start from a full template for minor additions, improving workflow flexibility.
To overcome the challenge of reaching thousands of employees, Atlassian built a Slack bot that sends targeted group DMs instead of posting in noisy public channels. This high-signal approach feels more personal and significantly increased engagement for training announcements and user feedback surveys on new AI tools.
AI prototyping shifts the purpose of a design system from a human-centric resource, reinforced through culture and reviews, to a machine-readable memory bank. The primary function becomes documenting rules and components in a way that provides a persistent, queryable knowledge base for an AI agent to access at all times.
Instead of generating UIs from scratch, Atlassian provides AI tools with a pre-coded template containing complex elements like navigation. The AI is much better at modifying existing code than creating complex layouts from nothing, reducing the error rate for navigation elements from 50% to nearly zero.
AI tooling is creating a 'fluid model' where any employee, regardless of role, can potentially ship code. This dramatically expands the design system team's responsibility, which must now create tooling and guardrails to support a much broader and less technical user base across the entire organization.
