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
This video is featured in the UX Watch Party playlist.
Summary
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
"Racism is by design, and there's no way to counter it unless we counter it with design."
Denise Jacobs Nancy Douyon Renee Reid Lisa WelchmanInteractive Keynote: Social Change by Design
January 8, 2024
"I don’t want to be a troublemaker, I just want to poke holes so we can make positive outcomes for the people we serve."
Dan WillisEnterprise Storytelling Sessions
June 8, 2016
"Jazz has those rules of engagement."
Jim KalbachJazz Improvisation as a Model for Team Collaboration
June 4, 2019
"Building a portfolio of talks, refreshed over time, lets you keep evolving and sharing your ideas in different formats."
Louis Rosenfeld Jemma Ahmed Christian Crumlish Uday Gajendar Chris GeisonCoffee with Lou #3: What Makes for a Successful UX Conference Presentation?
May 2, 2024
"Customers can answer what the researcher wants to hear in surveys, making attitude only 28% predictive of real behavior."
Ricardo MartinsUnlocking the power of advanced quantitative methods
March 12, 2025
"Lead with the ask, lead with the value, so people understand what you’re looking for from the start."
Frank DuranPartnership Playbook: Lessons Learned in Effective Partnership
January 8, 2024
"Standard design research looks for pain points, not harms, and harms often cannot be identified in typical user research."
Alexandra SchmidtWhy Ethics Can't Save Tech
November 18, 2022
"We formed a core task force empowered to make decisions quickly, avoiding weeks of delay waiting for formal approvals."
Davis Neable Guy SegalHow to Drive a Design Project When you Don’t Have a Design Team
June 10, 2021
"The experience of using a screen reader is probably 10 times faster as you become more expert with it."
Sam ProulxDesigning For Screen Readers: Understanding the Mental Models and Techniques of Real Users
December 10, 2021
