Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 4 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 2 ay önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 3 ay önce

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,110,824 görüntüleme • 4 ay önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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,522 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 20 gün önce

How to create Farcaster mini app without coding - Step 1: > Go to ChatGPT > Just type: "I would like to create a Farcaster mini app, can you give me some ideas?" > Choose any one of the ideas - Note: - You can also type your own idea to ChatGPT and alter it - Step 2: - Go to ChatGPT > Paste the first prompt (shared in my channel) > Include the project you chose and tell ChatGPT to alter the prompt according to the idea below - Step 3 - Go to: > Sign up using Gmail or GitHub > Projects -> New Project -> Type the name of your project >Just paste the prompt we created earlier > It will start creating your app > If you need to alter anything, just go to GPT and type: [ I need a prompt to alter "your issue (like changing colour, etc.)" in my app already created in v0app by Vercel ] > Copy the prompt and paste it in v0 > No need to worry about errors , it will rectify them for you > If your project is finished, just click "Publish" on your top right > It will automatically host your app in Vercel > Click "Visit site" to see your app on another device and copy the website URL - Step 4 - Go to: v0 app > Just paste Prompt 2 from the file I provided > Click Publish once it’s completed - Step 5 - Go to: v0 app > Just paste the prompt 3 from the file I provided - Step 6 (Important) > Just paste Prompt 4 from the file I provided - Step 7 > Just paste Prompt 4 from the file I provided - Step 8 > Just paste Prompt 6 from the file I provided > It’s an important step to do — you need to create a manifest inside your app so that you can host it on Farcaster - Step 9 - Go to: > Sign up or Login > Settings → Developers → Mini Apps → Create Manifest (New) > Paste your website URL (remove https) > It should be like: > If you find any error while doing this, just copy and paste it in the v0 app > Once everything is finished, you need to create Account Association > Scan the QR on your mobile and tap and hold the Yes button > It will show an error — just copy and paste those errors into the v0 app > Click Publish again, and then click Refresh in Manifest > Click Open your app > for the main prompt file check our tg channel link in our bio
33:22

How to create Farcaster mini app without coding - Step 1: > Go to ChatGPT > Just type: "I would like to create a Farcaster mini app, can you give me some ideas?" > Choose any one of the ideas - Note: - You can also type your own idea to ChatGPT and alter it - Step 2: - Go to ChatGPT > Paste the first prompt (shared in my channel) > Include the project you chose and tell ChatGPT to alter the prompt according to the idea below - Step 3 - Go to: > Sign up using Gmail or GitHub > Projects -> New Project -> Type the name of your project >Just paste the prompt we created earlier > It will start creating your app > If you need to alter anything, just go to GPT and type: [ I need a prompt to alter "your issue (like changing colour, etc.)" in my app already created in v0app by Vercel ] > Copy the prompt and paste it in v0 > No need to worry about errors , it will rectify them for you > If your project is finished, just click "Publish" on your top right > It will automatically host your app in Vercel > Click "Visit site" to see your app on another device and copy the website URL - Step 4 - Go to: v0 app > Just paste Prompt 2 from the file I provided > Click Publish once it’s completed - Step 5 - Go to: v0 app > Just paste the prompt 3 from the file I provided - Step 6 (Important) > Just paste Prompt 4 from the file I provided - Step 7 > Just paste Prompt 4 from the file I provided - Step 8 > Just paste Prompt 6 from the file I provided > It’s an important step to do — you need to create a manifest inside your app so that you can host it on Farcaster - Step 9 - Go to: > Sign up or Login > Settings → Developers → Mini Apps → Create Manifest (New) > Paste your website URL (remove https) > It should be like: > If you find any error while doing this, just copy and paste it in the v0 app > Once everything is finished, you need to create Account Association > Scan the QR on your mobile and tap and hold the Yes button > It will show an error — just copy and paste those errors into the v0 app > Click Publish again, and then click Refresh in Manifest > Click Open your app > for the main prompt file check our tg channel link in our bio

Maran

48,106 görüntüleme • 6 ay önce