video1.0<iframe src="https://www.loom.com/embed/be91a696a44a4dfea66ec0a08f0e5655" frameborder="0" width="1280" height="960" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>9601280Loomhttps://www.loom.com9601280https://cdn.loom.com/sessions/thumbnails/be91a696a44a4dfea66ec0a08f0e5655-de9a40be153428c1.gif280.096In this video, I introduce ProtoCanvas, my solution for designing directly with code, which allows for a more dynamic and functional approach compared to traditional design tools like Figma. I demonstrate how each prototype acts like a React component within an iframe on an infinite canvas, enabling real-time comparisons and adjustments. I also showcase a mini terminal and an open-source annotation tool called Agentation that lets me comment on design changes easily. My goal is to streamline the design process by allowing Claude to execute my requests based on these annotations. I encourage you to explore this approach and provide feedback on how it can be improved.