Introducing Code on Canvas in 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.show more

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`

Or typography on a circle. We don't have such a tool, but you can make one bespoke that fits your needs.

Or polygon/star tool. One shotted. No need for an extension store. Just ask Claude/Codex and you get the tool generated on-the-fly for your specific needs.

Another example, this tool fits as many rectangles, squares or circles into the bounding box with predefined padding as possible. This tool was create in couple minutes by Opus. It'd be so much pain to replicate all of these objects manually and maintain it. Design is becoming modular and you can essentially create the right toolset for your job on the spot.

This is an on-the-fly generated chart tool, a custom one, you probably want slightly different charts, bespoke charts, none of tools would be perfect for your design, just ask the agent to tweak it how you want it, past custom data, or ask agent to fill it with custom data.

@pendev this is next level stuff right here

@pendev 🫡

@pendev i've tried many many tools atm, Pencil is my favourite, just because it's the extension of my thoughts paired with a massive kaparthy-LLM wiki about product design directly infused in CC + Pencil

@pendev yeees!

@pendev ✏️🚀

@pendev This is sick. I’m gonna try this weekend!

@pendev 🫡

@pendev This is a nice update guys!

@pendev 🙌

@pendev sickkkkkk

@pendev got any sample prompts you'd like to share for us to try all the cool new hotness?!

@pendev Yup

@pendev you're cooking, man

Really smart way of integrating code in design 👏🏻 seems more optimized for generating code artifacts/nodes inside a design doc than building a full site in code. Am I reading that right? curious if you’re sandboxing it. been building something similar and very complex canvases can get slow.

yes, it's sandboxed, basically mini scripts directly on the design canvas. You can build custom design tools or interactive components. This gauge was just a photo from a car that I gave to the agent and told it to create me a script component. In couple minutes I had something like this, then did couple tweaks to it to make it perfect.

@pendev beeeeeeeeautay! will be updating

@pendev 🔥🚀

@pendev so good, love it!

@pendev The handoff is the part that usually breaks for me. Shared canvas plus code probably keeps intent intact way longer. Curious how messy it gets once people start editing both sides fast.

@pendev Without the option to change keyboard shortcuts is unusable... each user should be able to adjust to their own workflow when switching from other design tools

@pendev 🔥

@pendev The handoff between AI output and manual tweaking is where every agent workflow dies. It's not the model's fault, it's the UX. If you need to copy-paste from Claude to VS Code, you don't have an agent, you have an assistant.

@pendev Love it!

@pendev Ayooooo this is what i was waiting for baby let’s gooo

@pendev 🙌

@pendev cool!!!

@pendev Fireeee

@pendev 🔥🔥🔥

@pendev Very cool!!!

@pendev Wow 😍

@pendev Amazing! I'm really impressed with and I'm a big fan. Are you planning to add support for pages? Currently, it's one file per page. I'd like to import my component library from Figma, which is currently divided into a dozen or so pages.

@pendev FNYES Free Currently -- thank you. I recall your launch and I didnt have a need - but now I have a need and you released this -- this is EPIC ... grats!

@pendev 🚀shipping velocity is 🔥

@pendev very good stuff here, Tom!

@pendev oooh, I would love to see some kind of a cool mini tool from you in Pencil ✏️

@pendev this 🔥

@pendev bro just keeps shipping

@pendev yoooo 🔥

@pendev shipping the future of design x code 🫡

@pendev Would be awesome if canvas supported auto-play animations. Right now it doesn’t really let you plan shaders/WebGL animations in real time.

@pendev Yep, coming soon.

@pendev just got the new update let me try it

@pendev awesome!!!