Using AI to turn designs into clean code
summary
Builder.io demos a visual editor that connects to a real Next.js repo running in a VM, ingests a Figma import mapped to the project’s design system, and edits live code to add pages, accordions, carousels and interactive behavior. The AI generates commits, extracts reusable components, refactors files on request, and opens a pull request with minimal diffs that reuse existing components and tokens. Works with React/Tailwind but claims support for any stack and CLI workflows.
AI-written summary · about
chapters (10)
- 0:00AI in design to code
- 1:50Builder’s AI editor demo
- 3:55Figma designs into code
- 6:45Pull requests from visual edits
- 8:33Design updates to live code
- 11:42Dynamic components from Figma
- 12:45Real-world use cases
- 15:10Internal tools automation
- 16:33Everyone a developer with AI
- 17:14Testing wild prompts
related talks
10mBuilding UI with AI and Visual Editing
12mThe future of design systems and AI
20mAI will upend your process—for the better
26mFigma to Code: AI Generated UI Code with Your Design System
34mFrom Figma to Quality Code: Code Connect + AI
29mAre Design Systems Ready for the AI Revolution?
49mDesign Tools Should Read and Write Code
18mAI for UI