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.
Related Insights
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.
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.
Instead of writing detailed specs, product teams at Google use AI Studio to build functional prototypes. They provide a screenshot of an existing UI and prompt the AI to clone it while adding new features, dramatically accelerating the product exploration and innovation cycle.
Move beyond basic AI prototyping by exporting your design system into a machine-readable format like JSON. By feeding this into an AI agent, you can generate high-fidelity, on-brand components and code that engineers can use directly, dramatically accelerating the path from idea to implementation.
Instead of building UI elements from scratch, adopt modern libraries like Tailwind's Catalyst or Shad CN. They provide pre-built, accessible components, allowing founders to focus engineering efforts on unique features rather than reinventing solved problems like keyboard navigation in dropdowns.
Instead of building monolithic agents, create modular sub-workflows that function as reusable 'tools' (e.g., an 'image-to-video' tool). These can be plugged into any number of different agents. This software engineering principle of modularity dramatically speeds up development and increases scalability across your automation ecosystem.
The panel suggests a best practice for AI prototyping tools: focus on pinpointed interactions or small, specific user flows. Once a prototype grows to encompass the entire product, it's more efficient to move directly into the codebase, as you're past the point of exploration.
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 often generates several good ideas across multiple prototypes. Instead of recreating them manually, use a tool like Subframe that allows you to directly drag and drop components from one AI-generated variant into another. This 'kitbashing' approach accelerates the creation of a polished design.
