I’ve being building Efecto, a design tool where humans collaborate with AI agents on a shared canvas. In this video, I show how to install Efecto, choose design “skills” (graphic, social, web), and use an agent-agnostic workflow with tools like Claude, Codex, and Cursor.
Using Claude, I generate a landing page concept, watch the agent build sections live, and then edit visually using flexbox and tailwind-based properties. I also demo generating layout variations with the built-in AI, viewing/copying the underlying HTML/CSS, previewing and publishing to an efecto.app domain or connecting to Vercel.
The tour also covers tokenized brand systems (colors, fonts, components via shadcn), AI-generated brand guidelines, image/illustration sourcing, and applying shaders/effects to media.
I’ve been building this as a side/passion project by myself… I hope you like using it.
00:00 Meet Efecto
00:36 Install From Terminal
01:58 Launch With Agents
02:24 Build A Landing Page
04:32 Edit On The Canvas
06:07 AI Variations Side By Side
07:36 Export Preview Publish
08:36 Brand Systems And Tokens
11:44 Project Wrap Up
12:31 Shaders And Media Effects
13:51 Final Thanks
