Spotlight on Canva: Empowering the world to design with code

Introduction and Overview of Canva 00:14

  • Danny Woo, Head of AI Products at Canva, introduces the session, sharing insights on Canva Code and the integration of AI, particularly with Anthropic's Claude models.
  • Canva’s mission is to empower the world to design, making the entire design process simple and accessible on one platform.
  • Historically, design was complex, costly, and fragmented across multiple tools; Canva unified these steps onto a single platform, supporting creation, publishing, printing, and more.
  • Canva is designed to support everyone, from students to enterprise creatives, across languages and devices.
  • AI supercharges Canva’s mission by enabling faster, easier, and more powerful design creation for all users.

Canva’s AI Strategy and Evolution 02:31

  • Canva’s AI approach involves three pillars: developing proprietary models for unique design needs, integrating best-in-class commercial or open-source models, and offering an app ecosystem for developers.
  • The AI journey began in 2017 with machine learning for search ranking and color recommendations.
  • Key AI-powered features include background remover, Magic Write, Magic Edit, and Magic Design, integrated within Canva Magic Studio.
  • Recent launches include Canva AI, Canva Sheet, and Canva Code, expanding the AI feature set.

The Genesis and Purpose of Canva Code 04:49

  • Canva Code uses Claude to generate interactive prototypes based on user prompts, enabling non-technical users to create websites and interactive content without coding knowledge.
  • The product idea emerged from the desire to transform the prototyping process, moving from confusion (“chaos”) to clarity when developing new product ideas.
  • Interactive prototypes were found to be highly effective at communicating ideas, but traditionally required significant engineering resources.
  • Internally, Canva teams leveraged Claude to rapidly create, share, and iterate interactive artifacts during product development.

Unlocking Prototyping and Empowering Non-Developers 07:46

  • Prototyping with Claude enabled more teams to make more prototypes, accelerating experimentation and feedback.
  • Embedding working prototypes in Canva designs demonstrated the tool’s potential beyond internal use, highlighting immense value for non-technical users (e.g., teachers, planners, marketers).
  • Only about 0.5% of internet users know how to code, so Canva Code aims to democratize interactive creation for the remaining 99.5%.

Building and Iterating Canva Code 10:20

  • A functional prototype using Claude Sonnet 3.5 was quickly developed for real-world testing, allowing rapid iteration on UX and concept evaluation.
  • User testing with minimal guidance revealed natural use cases, confusions, and “magic moments,” feeding back into product improvements.
  • Canva Code supports embedding user-generated content (using iframes) in designs, mirroring existing approaches for supporting embeds in Canva.

Model Selection and User Experience Considerations 12:37

  • Model choice for Canva Code factored in not just correctness (evals), but also user delight, ability to infer intent from minimal prompts, web design quality, latency, scalability, and capacity.
  • Comparative testing showed Claude Sonnet models excelled at generating visually pleasing, interactive web content and SVGs, important for Canva’s user base.
  • The team highlighted the importance of evaluating models based on holistic user experience, not just benchmarks.

Key Lessons Learned 15:25

  • Clearly communicate AI limitations within the product, to prevent user confusion when generated code or features (e.g., contact forms) are only functional on the front-end.
  • Functional prototypes are invaluable: rapid prototyping outside the main codebase accelerates learning and innovation before formal development begins.
  • Differentiation is crucial: Canva Code focuses on nontechnical users, leveraging Canva’s integrated design editing to offer features (e.g., color pickers, brand fonts) that empower novices and unlock new levels of creativity.

Q&A and Future Perspectives 20:36

  • Tips for generating beautiful UIs with AI involve careful prompt engineering: instruct models on design principles, color choices, and information hierarchy, embedding these in prompt defaults.
  • Future of AI in design is seen as a powerful enhancer of human creativity—AI reduces tedious tasks, enables rapid prototyping, and unlocks new possibilities for creative processes.
  • The session concludes with audience appreciation and closing remarks.