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.

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.

A prototype-first culture, accelerated by AI tools, allows teams to surface and resolve design and workflow conflicts early. At Webflow, designers were asked to 'harmonize' their separate prototypes, preventing a costly integration problem that would have been much harder to fix later in the development cycle.

Instead of providing a vague functional description, feed prototyping AIs a detailed JSON data model first. This separates data from UI generation, forcing the AI to build a more realistic and higher-quality experience around concrete data, avoiding ambiguity and poor assumptions.

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.