33. Rating AI Design to Code Products + Hacks for ChatGPT & Claude [Roger Wong]

Designers are overwhelmed with too many AI products that promise to help them simplify workflows and solve the last mile of design-to-code. With the announcements of Figma Site and Figma Make at the the Config conference, the amount of options to consider has increased even more. 

In this episode you’ll discover:

1. Ranking of which AI design-to-code products are recommended by a UX expert

2. Assessment of whether designers should rely on these tools

3. Learn more hacks on how to get better results from ChatGPT, Claude, and Manus, including deep research versions

This episode will help designers, product managers, developers, and anyone working with tech to elevate their design and production capabilities by leveraging the latest AI capabilities and the "Vibe-coding" trend.

Our special guest is Roger Wong. He is a forward-thinking design leader with extensive experience in cultivating brand loyalty and enhancing customer experiences for prominent tech companies like Apple, Microsoft, Cisco, and Intel. His career spans over two decades during which he founded Wong.Digital, led design at two startups, and managed significant creative teams, notably for Samsung Mobile. His passion for innovation is demonstrated through his cofounding of Transported VR, a pioneering venture in virtual reality real estate, and his side project of developing an AI tool to assist designers in crafting brand strategies. His contributions to the design field have been recognized by Communication Arts, Graphis, One Show, Clio Awards, and Cannes Lions. Holding a BFA in graphic design from the California College of the Arts, he has also contributed to academics as a professor and advisory board member at San Diego City College.

He writes about design, AI, UX, and technology on his blog: https://rogerwong.me

Read his full analysis of the design-to-code AI products: https://rogerwong.me/2025/04/beyond-the-prompt 

What you need to know about this evaluation:

“If you're wanting to close the design-to-code gap, consider Subframe. While AI is part of its feature set, it is not the only selling point. In my opinion, its strength is in being able to design with and manipulate React components visually.

Finally, for quick ideas and prototypes, check out v0. Because the output is mostly unstyled, it makes for great wireframe-like prototypes that are shareable. By playing with working prototypes, it's very quickly apparent what you should incorporate into your designs.“

This episode was hosted by:

Brittany Hobbs is VP of Insights at Huge, a global design and technology consultancy. I lead research initiatives to build the next generation of consumer and business applications for the world’s biggest brands. My focus is on humanizing technology at scale, often leveraging AI to discover breakthroughs in human-computer interaction.

https://www.linkedin.com/in/brittanyhobbs/ 

Arpy Dragffy Guerrero is the Founder & Principal Strategist at PH1 Research. He researches and maps how organizations should leverage emerging technologies to improve products and services. By combining behavioral science and service design methods with UX strategy, he won clients such as Spotify, Microsoft, Mozilla, the National Football League, and dozens more across the private and public sectors.

https://www.linkedin.com/in/adragffy/ 

—-------

Thank you for listening to the Design of AI podcast. 

We provide a pragmatic and practical deep dive into what AI can do and how it is transforming industries. We help designers, researchers, and product managers excel in a rapidly changing future.

If you find this strategic content helpful, make sure to follow us on your fave podcasting app. It really helps us if you leave reviews.

Follow us here:

⁠Spotify https://open.spotify.com/show/3O11vQKPpKI5ZlJhdRGwnf

⁠Apple Podcasts⁠ https://podcasts.apple.com/us/podcast/design-of-ai-product-strategy-innovation-career-growth/id1734499859
 YouTube⁠ https://www.youtube.com/@DesignofAI