Design Tools Should Read and Write Code
summary
Claim: a visual IDE called Henosia reads and writes code so designers edit real React + TypeScript components instead of exporting drawings. Demo uses Next.js + Material UI, GitHub commits show precise prop changes, a data panel imports CSVs to populate live cards, and multiplayer editing lets designers and devs change UI and push surgical commits. It runs a browser code engine at interactive framerates but is still early alpha so the team hasn't yet fully rebuilt their own site.
AI-written summary · about
chapters (8)
- 0:00Introduction and context
- 3:08The flaws in current workflows
- 6:24Bridging the product island
- 9:24The visual IDE concept
- 16:55Building with Kenosha
- 35:17Prototyping and future tech
- 38:40Why now for visual IDEs
- 41:26Q&A and closing thoughts
related talks
30mDesigning with React
36mTechnical Challenges of Building a Visual IDE for React Components
39mDesigning with Components
20mUsing AI to turn designs into clean code
10mBuilding UI with AI and Visual Editing
35mDesign system - From a Developer Point-of-View
29mRethinking Design Practices
35mScalable Design Systems with TypeScript