正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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... show more

Tom Krcha

21,275 subscribers

78,812 次观看 • 2 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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

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 次观看 • 4 个月前

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.

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 次观看 • 1 个月前

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 🧵

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 次观看 • 3 个月前

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.

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,925 次观看 • 1 年前

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.

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 次观看 • 8 天前

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. 👉

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 次观看 • 1 个月前

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.

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,643 次观看 • 4 个月前

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

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,756 次观看 • 5 个月前

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

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 次观看 • 1 个月前

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

466,248 次观看 • 1 个月前

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.

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 次观看 • 1 年前

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

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 次观看 • 3 个月前

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

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

nate parrott

14,457 次观看 • 1 年前

$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

$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 次观看 • 1 个月前

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.

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 次观看 • 11 个月前

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 👇

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 次观看 • 4 个月前

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 👇

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 次观看 • 8 个月前

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!

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 次观看 • 1 年前

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. 👇

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 次观看 • 2 个月前

Watching 6 AI agents design an app together genuinely blew my mind. In my next episode, Tom Krcha (CEO of Pencil) showed me: → Swarm mode: Spinning up 6 design agents → How it all works under the hood (JSON?!) → How to design inside Cursor & Claude Code 📌 Subscribe to get the full episode tmr:

Watching 6 AI agents design an app together genuinely blew my mind. In my next episode, Tom Krcha (CEO of Pencil) showed me: → Swarm mode: Spinning up 6 design agents → How it all works under the hood (JSON?!) → How to design inside Cursor & Claude Code 📌 Subscribe to get the full episode tmr:

Peter Yang

99,403 次观看 • 3 个月前