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.

105,348 views • 8 months ago •via X (Twitter)

62 Comments

joshpuckett's profile picture
joshpuckett8 months ago

Oh, and it's also a full component library editor and theme designer too. Beta will be available exclusively to members of then everyone at launch. Obvious thanks and credit to @benjitaylor for inspiring aspects of this with Agentation.

joshpuckett's profile picture
joshpuckett8 months ago

Some earlier, related thinking for those curious: Prompting and generative tools are a great way to get started. But to actually finish something, I've found I want fine-grained control and direct manipulation, not a conversation back and forth.

Simon's profile picture
Simon8 months ago

Like on steroids

joshpuckett's profile picture
joshpuckett8 months ago

@benjitaylor paving the way, per usual 🐐

brian benitez's profile picture
brian benitez8 months ago

Dude, you’re absolutely crushing it 🔥

joshpuckett's profile picture
joshpuckett8 months ago

🙏 Put Tokyo Forum 2027 on the calendar already so I can block it off!

brian benitez's profile picture
brian benitez8 months ago

YES!! Earlier heads-up next time around, I promise!

Ridd 🤿's profile picture
Ridd 🤿8 months ago

Dude you are on fire 🔥

joshpuckett's profile picture
joshpuckett8 months ago

🙇 Gotta blaze a path to light the way!

Owen Williams ⚡'s profile picture
Owen Williams ⚡8 months ago

Oh man so good! I was working on a prop panel for our internal prototyping tool but never really figured it out. Looks like you did, so cool! Would be curious how you did it

joshpuckett's profile picture
joshpuckett8 months ago

will definitely be sharing more! What are you most curious about?

Owen Williams ⚡'s profile picture
Owen Williams ⚡8 months ago

Just DM’d ya but I can see this slotting into our custom prototyping tool perfectly!! I’ve been trying to figure out a way to allow more direct visualization and handoff of changes to the LLM without having to sit and wait for it to try first - this looks to solve that!

dudu's profile picture
dudu8 months ago

Been using agentation and love it but always wanted it to inherit the flexibility of the inline browser in cursor Im guessing access opens feb 10 for this too?

joshpuckett's profile picture
joshpuckett8 months ago

I’m aiming for at least an alpha available for members, hopefully🤞

DZ's profile picture
DZ8 months ago

This looks awesome Josh :) great work

joshpuckett's profile picture
joshpuckett8 months ago

Thanks Daniel! I hope it’s useful, excited to get it in people’s hands

Andrew Pouliot's profile picture
Andrew Pouliot8 months ago

ooh, this is really nice!

Riz's profile picture
Riz8 months ago

@KEMOS4BE

Gaddafi Rusli's profile picture
Gaddafi Rusli8 months ago

Love it. This will be gold for SwiftUI development too 👀

joshpuckett's profile picture
joshpuckett8 months ago

ya, a native version will be a little to a lot bit trickier 😅

Gaddafi Rusli's profile picture
Gaddafi Rusli8 months ago

I figured 😂

Anthony's profile picture
Anthony8 months ago

Hey Josh! Two questions… 1. What’s the difference between this and going into “design mode” in your LLM of choice? 2. Can the output be dropped into the chat interface of Cursor and V0? I’m still getting used to what needs a terminal vs. chat.

joshpuckett's profile picture
joshpuckett8 months ago

Claude doesn’t have “design mode” (yet). Interface Kit is more than just this quick demo; and also agnostic of any specific coding agent so you can use it with and for anything!

Anthony's profile picture
Anthony8 months ago

Ah! I haven’t played with Claude Code yet (it’s in my AI tool backlog). I’ve been liking the design mode in Cursor and v0, but it’s only for stying updates, not animation. I’m curious, would pasting the output directly into a chat interface of other coding agents work?

joshpuckett's profile picture
joshpuckett8 months ago

Yep! As I mentioned the DSL is agnostic of agent

Anthony's profile picture
Anthony8 months ago

Very cool! Need to carve out time to try this and Agentation out!

Morgan's profile picture
Morgan8 months ago

sick! how does it work??

joshpuckett's profile picture
joshpuckett8 months ago

Overwrites styles inline to elements so you can preview, then a simple DSL copied as markdown prompt to tell your agent what to update in your code

Morgan's profile picture
Morgan8 months ago

that's dope dude! embedded browser in a wrapper? brilliant idea.

Iqbal Aqaba | Upwork Freelancer | Framer Dev's profile picture
Iqbal Aqaba | Upwork Freelancer | Framer Dev8 months ago

Nice works! Do we get the ability to deploy to the server as well or we need to deploy it by ourselves? thanks :)

joshpuckett's profile picture
joshpuckett8 months ago

You’d use this in a dev environment, make changes, and then deploy to wherever you’d like!

Seey's profile picture
Seey8 months ago

Looks like a shortcut. Often leads to more complexity. 🌀

joshpuckett's profile picture
joshpuckett8 months ago

This is quite literally the opposite of a shortcut 🤣

Derek Embry's profile picture
Derek Embry7 months ago

Unreal. I can’t wait to try this!

Gonçalo Medeiros's profile picture
Gonçalo Medeiros8 months ago

Damn, I'm excited mannnn!!!

HobbyMonitor's profile picture
HobbyMonitor8 months ago

Excited to give this a try! I’ll have to take some before and afters of my site and mobile app for you on the journey

Chris Welch's profile picture
Chris Welch8 months ago

This would be incredibly useful right now. Damn.

joshpuckett's profile picture
joshpuckett8 months ago

working as hard as I can on nights and weekends to get it in your hands asap 🫡

Saïd Aitmbarek's profile picture
Saïd Aitmbarek8 months ago

based work, visually slick

Raj's profile picture
Raj8 months ago

super cool- can't wait to try this out!

GC's profile picture
GC8 months ago

Insane idea!!! Thank you

isha's profile picture
isha8 months ago

this is amazing and i needed it like… yesterday. can’t wait for access!!

Sam's profile picture
Sam8 months ago

Even more hyped now. Really looking forward to this man! Excellent work here.

joshpuckett's profile picture
joshpuckett8 months ago

thank you Sam!

TY's profile picture
TY8 months ago

Love this. Looking for more inspiration of leveraging Ai for UI experiences. I know it’s not as interactive, but have you seen @variantui ? Designs are incredible.

joshpuckett's profile picture
joshpuckett8 months ago

@variantui Yea, I've used it! (@bnj 's a legend) I think it's a class of tool that is absolutely valuable and see this as compatible with it or any other generative tool.

Tom Johnson's profile picture
Tom Johnson7 months ago

👀👀👀👀👀

joshpuckett's profile picture
joshpuckett7 months ago

it's already way beyond this heh. Been cooking with @willdphan 🤫

Daniel White's profile picture
Daniel White8 months ago

This is one of the best tools I’ve seen honestly, if you don’t mind me asking what tech stack did you use ?,

joshpuckett's profile picture
joshpuckett8 months ago

@DanielWhit21874 Just a Next.js app!

Daniel White's profile picture
Daniel White8 months ago

Beautiful app man, great job

symbols's profile picture
symbols8 months ago

Legit

gala's profile picture
gala8 months ago

Thanks, Josh! Excited to use this :)

Axon's profile picture
Axon8 months ago

This removes a surprising amount of friction 👏

Taras's profile picture
Taras7 months ago

Sick

Arsyad Fadly's profile picture
Arsyad Fadly8 months ago

@mattgperry 👀

John Cafazza's profile picture
John Cafazza8 months ago

Yaaasss! Can’t wait to tinker and create with it.

joshpuckett's profile picture
joshpuckett8 months ago

It’s made the last mile so much easier to dial in ✨

John Cafazza's profile picture
John Cafazza8 months ago

Keep bringing the 🔥

Sanket's profile picture
Sanket8 months ago

Excited to try it (already a member!) and create content for it on my community building platform 😀

Hashim Warren's profile picture
Hashim Warren8 months ago

I used and reviewed Agentation and still preferred the feedback flow that Simple Browser has in VS Code / GitHub Copilot But this InterfaceKit looks great because the iteration loop is shorter.

Jason Beggs's profile picture
Jason Beggs8 months ago

👀

Related Videos

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,950 views • 9 months ago