Log in or create a free Rosenverse account to watch this video.
Log in Create free account100s of community videos are available to free members. Conference talks are generally available to Gold members.
Designing Interactive Graphics with AI Code Help
Summary
Should designers learn to program? Back in the days of Flash, designers had tools to make digital experiences for people. Today, designers can again create interactive, data-driven experiences—they just need a little help. In this session, you’ll learn how to combine classic design software with a free AI workflow tool to add animation, interactivity, and live data to SVGs—aka Scalable Vector Graphics (crisp, code-based images that stay sharp at any size, perfect for the web, logos, and illustrations). No programming background required, just curiosity and a sense of play.
Key Insights
-
•
SVG is a powerful, text-based open standard that can encode interactive, animated graphics and is widely supported across browsers.
-
•
Design and programming historically overlapped more closely, as seen with Flash, but have since diverged, limiting designers' ability to directly build working products.
-
•
AI tools excel at language manipulation, making SVG ideal for AI-assisted design iteration through precise textual prompts.
-
•
Design is fundamentally about communication of intent rather than generating generic or statistically average outputs.
-
•
Designers should embrace coding mindset to fully specify product behaviors, which covers much of the programming logic in the process.
-
•
Layer and object naming in SVG files is critical to communicate clearly with AI and enable precise interactive modifications.
-
•
SVG files encapsulate data, styling, and interactivity in a single file, allowing designers to upload ready-to-use components that respond to live data.
-
•
AI's iterative, conversational feedback is valuable for debugging and refining designs based on explicit and evolving instructions.
-
•
The use of SVG sandboxes avoids CSS bleed, allowing safer and more modular dashboard or UI component assembly.
-
•
Open standards like SVG empower creativity and reduce dependence on proprietary platforms, enabling more direct designer innovation.
Notable Quotes
"The big distinction between design and programming is kind of being erased, and that’s an interesting opportunity for designers."
"AI design tools are great for sketching or inspiration, but designers are never asked to create statistically average designs."
"Design is the communication of intent—understanding exactly what you want and specifying it clearly is the hardest part."
"A mockup is worth a thousand prompts—visual context reduces ambiguity more than text alone."
"Naming your layers is really, really important; it helps the AI understand exactly what to manipulate."
"SVG is like bizarro HTML—you can style, animate, and make it interactive all within one language-based file."
"When developers saw the interactive color wheel I made in SVG, they were surprised but realized it reduced their workload."
"The success of this approach depends on being a good communicator and iterating constantly with the AI."
"It’s strange that despite all our technology, we’re still struggling to bring design and code closer together."
"Open standards rock. Proprietary monopolies keep you from making stuff and limit creativity."
Or choose a question:
More Videos
"Storytelling helps us speak in the language and context that motivates each team and stakeholder."
Christian Crumlish Wendy Johansson Rich Mironov Aditi Ruiz Adam ThomasAfternoon Insights Panel
December 6, 2022
"Total cost of ownership includes integration, customization, support, and ongoing operational effort that can be easily overlooked."
Jon Temple Kalee Dankner Bruce Falk Lauren GalanterPanel: Stacks, Security, and Stakeholders: The Hidden Work of UXR Tool Procurement
March 12, 2026
"Create islands of joy at work, because everybody in this world is yearning for happiness."
Himanshu BharadwajIf design had a heart
April 16, 2026
"Everything is a prototype — every program is different based on feedback from managers, participants, and speakers."
Nicole UmphressDelivering Design Education During a Global Pandemic: Lessons Learned
June 9, 2022
"Code-switching between your native tongue and someone else’s helps foster better connection."
Smitha Papolu Nova Wehman-Brown Melissa Schmidt Adam MenterTheme 3 Discussion
January 8, 2024
"Data is like a black box. It’s owned by IT. I’m not allowed to know how it works, but I kind of resent that it introduces delays into my marketing processes."
Sarah FlamionComplex Problem? Add Clarity by Combining Research and Systems Thinking
March 31, 2020
"We flipped some onboarding traditions from physical notes to online kudos boards, keeping the welcoming spirit alive."
Marjorie Stainback Molly Fargotstein Stephanie MarshWhat Research Ops Professionals Have Learned from COVID-19
July 16, 2020
"The Rosen Bot can turn a simple prompt into a five-week training program for your team."
Louis Rosenfeld Peter Van DijckGenAI for UXers: A Rosenbot Demo and Discussion
September 11, 2025
"Before sharing insights, I try to prime the room by acknowledging feelings and starting fresh."
Jerome “Axle” BrownHow to Use Self-Directed Learning to Ensure Your Research Insights are Heard and Acted Upon
March 11, 2021
Latest Books All books
Dig deeper with the Rosenbot
How could universal acceptance and personalized learning journeys change college admissions and education?
In what ways is AI reshaping design practice and education, according to experts like TJ McLeish?
What are effective behaviors that design operations teams should focus on to deliver value and build trust?