Designing in code
summary
Demonstrations show production code flowing into the design canvas: Code layers clone GitHub repos into canvas and create interactive, branchable windows that agents modify to produce side‑by‑side variations. Make connects to the local repo so edits are real, uses annotations instead of long prompts, and auto‑commit after each prompt to preserve history. Agents generate multiple code branches, extract screens, detect component properties and variables, and can push changes back as pull requests, with live UI edits working as shown.
AI-written summary · about
chapters (8)
- 0:00Designing with code
- 1:17Why it matters now
- 5:50Figma code prototyping
- 14:49Prototyping vs production
- 22:07Designing on production code
- 30:10Collaborating with designers
- 40:49Key principles behind tools
- 41:51Q&A
related talks
22mCrafting design context for agentic coding workflows
29mDesign to Code: Roundtable discussion with Code Connect users
31mPrompt Like a Pro & Vibe Code with AI Tools
31mDesign to Code in 2026: Context-First Development with Figma MCP
25mA Unified Agent Experience
01h 20mReal World Development with GitHub Copilot and VS Code
30mDesigning with React
17mSoftware Development Agents: What Works and What Doesn't