Loading video...

Video Failed to Load

Go Home

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

joshpuckett's profile picture

joshpuckett

34,296 subscribers

104,166 views • 4 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

InterfaceKit is a design tool to make real time visual edits to your app then copy a prompt for your agent to ship the changes. Just pushed the alpha to Interface Craft members; available to everyone soon. Fun to jam with will on this one 💪
0:25

InterfaceKit is a design tool to make real time visual edits to your app then copy a prompt for your agent to ship the changes. Just pushed the alpha to Interface Craft members; available to everyone soon. Fun to jam with will on this one 💪

joshpuckett

55,883 views • 2 months ago

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.
0:23

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

joshpuckett

97,829 views • 3 months ago

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!
0:30

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

joshpuckett

81,788 views • 5 months ago

Need a beautiful design for your next Replit app? Head to 21st⁠.dev and: - Find a design - Copy the prompt into Replit Agent - Iterate and add Replit’s built-in tools and databases - Deploy your app to the public - Profit Share what you build and tag us!
0:35

Need a beautiful design for your next Replit app? Head to 21st⁠.dev and: - Find a design - Copy the prompt into Replit Agent - Iterate and add Replit’s built-in tools and databases - Deploy your app to the public - Profit Share what you build and tag us!

Replit ⠕

50,651 views • 1 year ago

AI agents can now see your UI like you do. Select any element in your live app, leave a comment, and your AI agent fixes it in your local codebase automatically. This is wild for React devs. 100% Opensource and Local.
0:33

AI agents can now see your UI like you do. Select any element in your live app, leave a comment, and your AI agent fixes it in your local codebase automatically. This is wild for React devs. 100% Opensource and Local.

Unwind AI

12,591 views • 10 months ago

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)
0:25

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)

nate parrott

10,550 views • 1 year ago

Introducing Cleo, a new AI developer tool for React. Select an element, write a prompt, and watch your changes happen in real time.
0:39

Introducing Cleo, a new AI developer tool for React. Select an element, write a prompt, and watch your changes happen in real time.

Houssein Djirdeh

30,866 views • 6 months ago

Make Stitch designs real with AI Studio From design to a live app in under 60 seconds. Here's how you can now take your Stitch designs and make them real with Google AI Studio: 1. Design in Stitch. 2. Export the HTML. 3. Prompt AI Studio to convert it into a working app. And the best part? This is the manual way. We're working on making this a 1-click experience. Consider this the warm-up.👟
1:00

Make Stitch designs real with AI Studio From design to a live app in under 60 seconds. Here's how you can now take your Stitch designs and make them real with Google AI Studio: 1. Design in Stitch. 2. Export the HTML. 3. Prompt AI Studio to convert it into a working app. And the best part? This is the manual way. We're working on making this a 1-click experience. Consider this the warm-up.👟

Stitch by Google

41,584 views • 8 months ago

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,415 views • 3 months ago

We shipped big changes for Cloudflare Developers AI Search! Every agent needs search and it shouldn't take a week to set up. AI Search is the search primitive for your agents. Create an instance, upload your data, and search it. Comes with hybrid retrieval with vector and BM25.
0:24

We shipped big changes for Cloudflare Developers AI Search! Every agent needs search and it shouldn't take a week to set up. AI Search is the search primitive for your agents. Create an instance, upload your data, and search it. Comes with hybrid retrieval with vector and BM25.

Anni Wang

12,935 views • 1 month ago

THE FIRST EVER AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Motion Design was never that easy. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.
0:37

THE FIRST EVER AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Motion Design was never that easy. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.

Higgsfield AI 🧩

3,113,480 views • 4 months ago

Today we're announcing Polyscope - the free agent orchestration tool of my dreams. Run dozens of AI agents at the same time, blazing fast copy on write clones, a built-in preview browser you can use to visually prompt your agents, and much more.
0:35

Today we're announcing Polyscope - the free agent orchestration tool of my dreams. Run dozens of AI agents at the same time, blazing fast copy on write clones, a built-in preview browser you can use to visually prompt your agents, and much more.

Marcel Pociot 🧪

113,329 views • 3 months ago

Hgraph AI Data Agent ✨ Now Live! Instantly chat with @Hedera data in your browser for free using our new data agent. Meet the network explorer that explores for you. Send a prompt → Watch now fast it is...
1:34

Hgraph AI Data Agent ✨ Now Live! Instantly chat with @Hedera data in your browser for free using our new data agent. Meet the network explorer that explores for you. Send a prompt → Watch now fast it is...

Hgraph

25,116 views • 5 months ago

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.
1:00

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

Pietro Schirano

53,079 views • 1 year ago

Use this FREE tool to analyze data in 10 sec. This tool is used by more than 500,000 researchers. 1. Go to and log in 2. Click on Data Analysis and upload your data file. 3. Write your prompt for data analysis. 4. E.g., generate graphs for exploratory data analysis. 5. Liner will generate a variety of graphs for you. 6. It also generates an insightful data analysis report. ✦ You can edit the report. For example, you can: ✦ Insert citations in the report ✦ Make changes to the text ✦ Add/remove any graphs After making changes, you can download the report. Try Liner today. It’s FREE. Liner link:
0:53

Use this FREE tool to analyze data in 10 sec. This tool is used by more than 500,000 researchers. 1. Go to and log in 2. Click on Data Analysis and upload your data file. 3. Write your prompt for data analysis. 4. E.g., generate graphs for exploratory data analysis. 5. Liner will generate a variety of graphs for you. 6. It also generates an insightful data analysis report. ✦ You can edit the report. For example, you can: ✦ Insert citations in the report ✦ Make changes to the text ✦ Add/remove any graphs After making changes, you can download the report. Try Liner today. It’s FREE. Liner link:

Faheem Ullah

11,898 views • 2 months ago

It became easier to make money with Replit with our integration with Stripe! 💸 - Add subscriptions or one-time payments to your app with Stripe in one click - Build payment flows, product catalogues, and more - Publish your app and start accepting live payments Now available to everyone 🚀
0:35

It became easier to make money with Replit with our integration with Stripe! 💸 - Add subscriptions or one-time payments to your app with Stripe in one click - Build payment flows, product catalogues, and more - Publish your app and start accepting live payments Now available to everyone 🚀

Replit ⠕

476,195 views • 6 months ago

Introducing Design Mode on v0: • Quickly tweak your generation — copy, typography, layout, colors, styling, and more • Preview changes and save when ready • No need to spend credits or wait for an LLM • Tailwind and shadcn native
0:23

Introducing Design Mode on v0: • Quickly tweak your generation — copy, typography, layout, colors, styling, and more • Preview changes and save when ready • No need to spend credits or wait for an LLM • Tailwind and shadcn native

v0

561,557 views • 1 year ago

Here's DetailsPro MCP sharing SwiftUI designs directly with Xcode! Ask your favorite agent to grab one of your designs and watch as DetailsPro provides the SwiftUI code. Tweak and iterate on your design live and let the agent know to grab the changes.
0:46

Here's DetailsPro MCP sharing SwiftUI designs directly with Xcode! Ask your favorite agent to grab one of your designs and watch as DetailsPro provides the SwiftUI code. Tweak and iterate on your design live and let the agent know to grab the changes.

DetailsPro

15,408 views • 4 months ago

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.
1:09

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

FHILY👑

57,007 views • 22 days ago

Higgsfield AI just ENDED 20 more creative jobs. THE FIRST AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Powered by Anthropic's Claude. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.
0:41

Higgsfield AI just ENDED 20 more creative jobs. THE FIRST AI motion design tool with full real-time control. Higgsfield Vibe-Motion is LIVE. Powered by Anthropic's Claude. One prompt creates any motion design you can imagine. Refine every parameter live on canvas. No creative limits.

Higgsfield AI 🧩

975,700 views • 4 months ago