Loading video...

Video Failed to Load

Go Home

Introducing Code on Canvas in Pencil.dev 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...

tomkrcha's profile picture

Tom Krcha

21,275 subscribers

78,812 views • 2 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too
4:39

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,470 views • 4 months ago

How to use Open Design inside Codex: Ask Codex to deploy Open Design locally, then tell Codex what you want to build. The real unlock: Codex can operate the design tool for you — choosing workflows, filling briefs, inspecting files, testing interactions, and iterating on the result. Design tools are becoming agent-operated.
0:48

How to use Open Design inside Codex: Ask Codex to deploy Open Design locally, then tell Codex what you want to build. The real unlock: Codex can operate the design tool for you — choosing workflows, filling briefs, inspecting files, testing interactions, and iterating on the result. Design tools are becoming agent-operated.

Open Design

131,151 views • 1 month ago

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵
1:29

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Stitch by Google

487,157 views • 3 months ago

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.
0:20

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.

Dylan Field

93,724 views • 6 days ago

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.
1:44

Introducing MagicPath, an infinite canvas to create, refine, and explore with AI. Create beautiful components and functional apps, while providing production ready code. Available today, free, for everyone. The Cursor moment for design is here.

Pietro Schirano

1,879,893 views • 1 year ago

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉
0:53

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉

Open Design

52,206 views • 29 days ago

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.
0:54

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

299,605 views • 4 months ago

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
1:19

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

1,495,690 views • 5 months ago

The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet the new Replit Canvas Your agentic design tool to build beautiful websites, apps, marketing assets and more
1:14

The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet the new Replit Canvas Your agentic design tool to build beautiful websites, apps, marketing assets and more

Replit ⠕

1,691,978 views • 1 month ago

Open Design now works inside Codex. The hardest part of AI design isn’t generating one screen — it’s keeping design intent alive as you iterate, build, and ship. Now your agent can work with the canvas directly. Design → code → motion, in one workflow. Here’s a quick demo:
0:36

Open Design now works inside Codex. The hardest part of AI design isn’t generating one screen — it’s keeping design intent alive as you iterate, build, and ship. Now your agent can work with the canvas directly. Design → code → motion, in one workflow. Here’s a quick demo:

Open Design

465,958 views • 1 month ago

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.
0:45

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.

Meng To

75,640 views • 1 year ago

designing my new personal site with Pencil.dev 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
0:31

designing my new personal site with Pencil.dev 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

Sandra

93,463 views • 3 months ago

WIP design tool: - generate new types of editable interactive objects - place them on a canvas - publish to web
0:30

WIP design tool: - generate new types of editable interactive objects - place them on a canvas - publish to web

nate parrott

14,457 views • 1 year ago

$FIG just launched the Figma Design Agent, a dedicated agent that works alongside users in Figma. The agent lives directly on the canvas, so you can prompt from any design layer, iterate and edit alongside the agent, and hand it boring tasks that would have otherwise taken up a lot of your time. $FIG CEO Dylan Field came on the show today to discuss the launch. Here's our full conversation. 01:18 – Clocking AI-generated designs 03:31 – Figma’s new Design Agent 05:40 – AI code bloat and slop 09:09 – Using AI to augment creativity and branding 15:08 – Why Figma should be the front door to building apps in the AI era 18:53 – How design becomes more important as code commoditizes
20:01

$FIG just launched the Figma Design Agent, a dedicated agent that works alongside users in Figma. The agent lives directly on the canvas, so you can prompt from any design layer, iterate and edit alongside the agent, and hand it boring tasks that would have otherwise taken up a lot of your time. $FIG CEO Dylan Field came on the show today to discuss the launch. Here's our full conversation. 01:18 – Clocking AI-generated designs 03:31 – Figma’s new Design Agent 05:40 – AI code bloat and slop 09:09 – Using AI to augment creativity and branding 15:08 – Why Figma should be the front door to building apps in the AI era 18:53 – How design becomes more important as code commoditizes

TBPN

46,212 views • 1 month ago

A year in the making, my interaction design manual is available today. With 20 chapters and 20 downloadable React components on an interactive custom platform, it includes everything I know about not just interactions, but design. Registration is open for 2 weeks.
0:21

A year in the making, my interaction design manual is available today. With 20 chapters and 20 downloadable React components on an interactive custom platform, it includes everything I know about not just interactions, but design. Registration is open for 2 weeks.

rauno

267,026 views • 11 months ago

This is how the Intercom design team uses AI to prototype directly in code Designers using AI tools should copy this AI workflow to ship faster 👀 Watch the full video on Sneak Peek: Domingo Widen shows how Intercom design team uses Figma Code Connect + Claude to design directly in code 👇
3:28

This is how the Intercom design team uses AI to prototype directly in code Designers using AI tools should copy this AI workflow to ship faster 👀 Watch the full video on Sneak Peek: Domingo Widen shows how Intercom design team uses Figma Code Connect + Claude to design directly in code 👇

Jayneil Dalal

54,117 views • 4 months ago

This design manager vibe coded a Figma plugin with Claude Code in 40 mins to save $2000 per project Every designer should take an inspiration from this and leverage AI to automate boring parts of their design work 👀 Watch the full interview on Sneak Peek: Hammed shows how the Jump design team uses Claude to create custom Figma plugins 👇
1:33

This design manager vibe coded a Figma plugin with Claude Code in 40 mins to save $2000 per project Every designer should take an inspiration from this and leverage AI to automate boring parts of their design work 👀 Watch the full interview on Sneak Peek: Hammed shows how the Jump design team uses Claude to create custom Figma plugins 👇

Jayneil Dalal

65,907 views • 8 months ago

Color contrast accessibility tools are now available in the Figma color picker! Grateful for the chance to design this, and I hope it helps contribute to more design in the world being made more inclusive. Let us know what you think!
2:19

Color contrast accessibility tools are now available in the Figma color picker! Grateful for the chance to design this, and I hope it helps contribute to more design in the world being made more inclusive. Let us know what you think!

Billy Sweeney

92,375 views • 1 year ago

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇
0:33

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇

Stitch by Google

194,246 views • 2 months ago

Going from design to code is going from something built and usable to an unnecessary level of abstraction. It's like finishing a house then asking for the blueprints so someone else can rebuild it. Design is code. Code is design. Use a code-first canvas. Use MagicPath.
0:33

Going from design to code is going from something built and usable to an unnecessary level of abstraction. It's like finishing a house then asking for the blueprints so someone else can rebuild it. Design is code. Code is design. Use a code-first canvas. Use MagicPath.

Pietro Schirano

26,974 views • 4 months ago