Prototypes from your own system: what Atlassian reports

Coding agents are changing the handoff from design to development, since anyone who can describe an interface receives a working result. Atlassian has described unusually openly how well this works within its own design system.

What Atlassian did

According to the report on the Atlassian blog, Atlassian trained almost 1,000 designers and product managers to build prototypes in its own design system with AI tools. To do this, the team wrote around 2,000 lines of its own instructions and bundled them in a single file with a prioritized table of contents instead of spreading them across many files. On top of that came templates for quick prototypes and for more elaborate ones.

Problems in the early phase

At first, the tools invented content, including wrong imports, nonexistent icons, and wrong token names. There were also technical hurdles, because the company's own packages and its own CSS library did not fit the usual prototyping tools.

After the instructions and templates were revised, AI prototyping starting from a screenshot reaches about 70 percent alignment with the design system on the first pass, according to Atlassian, and more with further passes. The report does not state how this was measured.

What follows from this

• The report concerns prototypes. Code for production use is outside its scope. The conclusion “designers now ship production code” goes beyond what it states.
• 70 percent falls short of production level. On the first pass, a noticeable share still deviates from the system. That is sufficient for a prototype; production code requires the same review as any other contribution.
• The instructions require effort. 2,000 lines do not come about on the side and have to be maintained continuously.

What can be transferred

1. An instructions file in the repository. Claude Code reads CLAUDE.md and, if it is missing, AGENTS.md; many other tools such as Codex, Cursor, or Copilot read AGENTS.md. It states which components to use, how testing works, and what is excluded.
2. Tokens as files. With Tokens Studio they can be synced in both directions between Figma and a Git repository.
3. A first step with a small task, counting what the agent invents.

The handoff therefore remains, but it shifts. Decisions that used to be recorded in a specification are now documented in the system itself.

From the series “Design Systems and AI”. Previous: Who checks the agents' code?. Next: Five patterns for AI interfaces that already exist.