Loading video...

Video Failed to Load

Go Home

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's profile picture

joshpuckett

37,174 subscribers

57,872 views • 3 months ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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.
0:28

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

104,578 views • 5 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 • 5 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

82,065 views • 6 months ago

Introducing the Visual Copilot CLI Surgically apply any Figma design changes to your existing components Available to everyone today
0:29

Introducing the Visual Copilot CLI Surgically apply any Figma design changes to your existing components Available to everyone today

Steve (Builder.io)

15,515 views • 1 year 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

🎨 Design freely with Agent 4. - Design while the agent builds. - Explore multiple UI variants on an infinite canvas. - Make precise UI edits that you can apply directly to your app.
0:30

🎨 Design freely with Agent 4. - Design while the agent builds. - Explore multiple UI variants on an infinite canvas. - Make precise UI edits that you can apply directly to your app.

Replit ⠕

184,057 views • 4 months ago

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅
0:20

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

joshpuckett

54,515 views • 2 months ago

Your phone is one of your greatest weapons. Your phone should be set up to make you money, not to waste your time. Remove all the apps you waste your time on. Download the one app that will show you exactly how to make money Available for all devices.
1:28

Sensitive content

Your phone is one of your greatest weapons. Your phone should be set up to make you money, not to waste your time. Remove all the apps you waste your time on. Download the one app that will show you exactly how to make money Available for all devices.

Andrew Tate

17,751,095 views • 3 years ago

The Wayfinder Foundation 🧭 autonomous agent scheduling a transaction conditional on btc 24h price change. One prompt to create the trigger event and one prompt to say yes to the transaction - this process will be simplified to an event trigger management. We can currently also do things like copy trading -- just a bit hard to demo that (waiting for wallets to trade etc.) and soon will be able to do basically arbitrarily complex things…
2:28

The Wayfinder Foundation 🧭 autonomous agent scheduling a transaction conditional on btc 24h price change. One prompt to create the trigger event and one prompt to say yes to the transaction - this process will be simplified to an event trigger management. We can currently also do things like copy trading -- just a bit hard to demo that (waiting for wallets to trade etc.) and soon will be able to do basically arbitrarily complex things…

//Kalos

40,464 views • 1 year ago

Now you can add a mobile app to the website you’ve been building on Replit. Ship it to the App Store from your existing project. Just open your app and ask the Agent.
0:30

Now you can add a mobile app to the website you’ve been building on Replit. Ship it to the App Store from your existing project. Just open your app and ask the Agent.

Zhen Li

381,826 views • 3 months ago

Today we're announcing the Vibecode CLI Your OpenClaw (or any agent) can build and deploy up to 20 apps in parallel in a single prompt. Your agent will communicate with Vibecode to build your app(s). Frontend, Backend, Database, Deployments, APIs. Works with OpenClaw, Claude Code, Perplexity Computer, Manus, and any agent with access to a terminal. Just add this to your prompt: "Please use vibecode . dev CLI to build these apps"
2:20

Today we're announcing the Vibecode CLI Your OpenClaw (or any agent) can build and deploy up to 20 apps in parallel in a single prompt. Your agent will communicate with Vibecode to build your app(s). Frontend, Backend, Database, Deployments, APIs. Works with OpenClaw, Claude Code, Perplexity Computer, Manus, and any agent with access to a terminal. Just add this to your prompt: "Please use vibecode . dev CLI to build these apps"

vibecode.dev

114,468 views • 4 months ago

While building SEV0, I ran into moments where natural language prompting just wasn't enough - too vague, too indirect. So I started using a method that bridges that gap. I call it Bridged Prompting - a technique where you temporarily step out of the prompt-response loop to manipulate something directly using an AI-generated UI, then step back in. Think of it like GenUI, but more user-driven and transient. AI generates a UI on-the-fly, tailored to your prompt, and lets you manipulate the artifact directly before resuming the conversation. Sure, you could build a full tool, switch tabs, wire it up and round-trip your data. But with Bridged Prompting, the AI just spins up a temporary interface right in the flow. In the video below, I used it to construct the hallway system to closely match the layout of the severed floor. This is something I needed to do for this one project, this one time - I didn't need to make a whole separate app. Bridged Prompting lets you: - Make precise edits visually or structurally - "Hit save" to persist changes to local storage or a backend - Return to your natural language prompt
0:05

While building SEV0, I ran into moments where natural language prompting just wasn't enough - too vague, too indirect. So I started using a method that bridges that gap. I call it Bridged Prompting - a technique where you temporarily step out of the prompt-response loop to manipulate something directly using an AI-generated UI, then step back in. Think of it like GenUI, but more user-driven and transient. AI generates a UI on-the-fly, tailored to your prompt, and lets you manipulate the artifact directly before resuming the conversation. Sure, you could build a full tool, switch tabs, wire it up and round-trip your data. But with Bridged Prompting, the AI just spins up a temporary interface right in the flow. In the video below, I used it to construct the hallway system to closely match the layout of the severed floor. This is something I needed to do for this one project, this one time - I didn't need to make a whole separate app. Bridged Prompting lets you: - Make precise edits visually or structurally - "Hit save" to persist changes to local storage or a backend - Return to your natural language prompt

Chris Tate

42,558 views • 1 year ago

I love using GLM 5.2 for web app iteration. My workflow: generate 6 variations, then pick the best one and continue iterating on it. I built Recast to make this even easier. Give it a prompt, get 6 variations, download the code for your favorite version, then continue iterating in your own coding agent. GLM 5.2 works really well for this use case since it's fast, cheap, and great at design. On average, you can make 3-6 landing pages with GLM 5.2 for every one you can generate with Opus 4.8. And the design variety of the GLM landing pages helps a lot with trying to think through what style you want to go with. Recast is launching soon (as a web app + skill).
0:34

I love using GLM 5.2 for web app iteration. My workflow: generate 6 variations, then pick the best one and continue iterating on it. I built Recast to make this even easier. Give it a prompt, get 6 variations, download the code for your favorite version, then continue iterating in your own coding agent. GLM 5.2 works really well for this use case since it's fast, cheap, and great at design. On average, you can make 3-6 landing pages with GLM 5.2 for every one you can generate with Opus 4.8. And the design variety of the GLM landing pages helps a lot with trying to think through what style you want to go with. Recast is launching soon (as a web app + skill).

Hassan

20,164 views • 24 days ago

Google is taking a big swing at the core browser / search interface for the first time They're testing GenTabs, which turns a user's open tabs into a custom web app (ex. to plan a trip) 👇 The user can text prompt the web app to make changes
0:21

Google is taking a big swing at the core browser / search interface for the first time They're testing GenTabs, which turns a user's open tabs into a custom web app (ex. to plan a trip) 👇 The user can text prompt the web app to make changes

Olivia Moore

147,713 views • 7 months ago

Build an iOS app from my phone, while on the couch… With Claude Code… Then ship to App Store. Soon will be able to ship to the vibecode.dev App Store as well.
2:19

Build an iOS app from my phone, while on the couch… With Claude Code… Then ship to App Store. Soon will be able to ship to the vibecode.dev App Store as well.

Riley Brown

135,161 views • 8 months ago

The Apple App Store is DEAD. You can add Claude Code / Codex to your iMessage Then build a Swift app directly to your home screen Wait no... not one iOS app. an entire personal app store. (8 apps in one prompt) All you have to do is Chorus Marketing Agent
15:31

The Apple App Store is DEAD. You can add Claude Code / Codex to your iMessage Then build a Swift app directly to your home screen Wait no... not one iOS app. an entire personal app store. (8 apps in one prompt) All you have to do is Chorus Marketing Agent

Riley Brown

218,807 views • 1 month ago

Your design is the prompt Bring your existing ideas to life with Figma Make #Config2025
10:19

Your design is the prompt Bring your existing ideas to life with Figma Make #Config2025

Figma

323,827 views • 1 year ago

This is actually one of my secrets but since it's the new year, I thought of sharing it to everyone. Try this Ask Claude or ChatGPT to describe a screenshot of a website Then, use the prompt to create an app with You can edit the prompt based on your preference before generating You're welcome!
1:03

This is actually one of my secrets but since it's the new year, I thought of sharing it to everyone. Try this Ask Claude or ChatGPT to describe a screenshot of a website Then, use the prompt to create an app with You can edit the prompt based on your preference before generating You're welcome!

Melvin Vivas

95,943 views • 1 year ago