Filip Santa

Design @pencildev

[Filip Santa @FilipSanta]

Something we’ve been cooking for a while

[Tom Krcha @tomkrcha]

Excited to launch Pencil
INFINITE DESIGN CANVAS for Claude Code

> Superfast WebGL canvas, fully editable, running parallel design agents
> Runs locally with Claude Code → turn designs into code
> Design files live in your git repo → Open json-based .pen format

[Tom Krcha @tomkrcha]

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.

[Filip Santa @FilipSanta]

Inspired by the great Manchester Central Library

[Filip Santa @FilipSanta]

Pencil scripting on canvas #6

[Filip Santa @FilipSanta]

Pencil scripting on canvas #5

[Filip Santa @FilipSanta]

Pencil scripting on canvas #4

[Filip Santa @FilipSanta]

Pencil scripting on canvas #3

[Filip Santa @FilipSanta]

Pencil scripting #2

[Filip Santa @FilipSanta]

Pencil scripting #1

[Tom Krcha @tomkrcha]

@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`

[Tom Krcha @tomkrcha]

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.

[Filip Santa @FilipSanta]

🏔️🏔️🏔️ via @pencildev

[Filip Santa @FilipSanta]

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

[Filip Santa @FilipSanta]

design via @pencildev

[Sandra @sandraleow]

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

[Filip Santa @FilipSanta]

🐝🐝🐝

[Tom Krcha @tomkrcha]

Pencil just crossed 100,000 users!
Today we are introducing SWARM mode.
A team of AI design agents working with you in parallel.

Your autonomous design agency.
Download now.

[Filip Santa @FilipSanta]

@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"

[Filip Santa @FilipSanta]

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

> Prompts in the thread

[Filip Santa @FilipSanta]

✨ Final result -- designed and built via Pencil in about a day. Get inspired at https://t.co/kuZm4AAVpy

Happy designing!

[Filip Santa @FilipSanta]

<prompt #16> <selected design #15> <new chat>

Look at the selected design. Now design a mobile version for it. Create a new design.