Filip Santa

Something we’ve been cooking for a while

Claude Fable 5 tests in @pencildev

Claude Fable 5 tests in @pencildev

Pencil just crossed 1M downloads on Cursor Extensions marketplace. With Composer 2.5, it's a killer AI design combo. Just flies. Designs a full website for desktop and mobile sub-minute. Fully editable on canvas inside Cursor. Video at 1x speed.

Inspired by the great Manchester Central Library

Pencil scripting on canvas #6

Pencil scripting on canvas #5

Pencil scripting on canvas #4

Pencil scripting on canvas #3

Pencil scripting #2

Pencil scripting #1

@pencildev Also, you can now one-shot almost any kind of plugin or custom tool for Pencil. Just ask agent to make one for you. For instance, a Superellipse tool: `create a script node for superellipse tool, let me control various parameters`

Introducing Code on Canvas in @pencildev AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

🏔️🏔️🏔️ via @pencildev

👨‍🎨👨‍🎨👨‍🎨 design via @pencildev

design via @pencildev

designing my new personal site with @pencildev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

🐝🐝🐝

@abeyang I like to create a new frame for each design, so I can then easily compare them next to each other. That's why I usually say "create a new design"

@FilipSanta Thanks for sharing the prompts — helpful to see! Are you making dupes as you go, or just changing the same page every time?

✏️ Pencil Prompts page design iteration via Pencil, using our existing homepage as the base design. > Prompts in the thread

✨ Final result -- designed and built via Pencil in about a day. Get inspired at pencil.dev/prompts Happy designing!

<prompt #16> <selected design #15> <new chat> Look at the selected design. Now design a mobile version for it. Create a new design.