Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 8 Monaten •via X (Twitter)

62 Kommentare

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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.

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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.

Profilbild von Simon
Simonvor 8 Monaten

Like on steroids

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

@benjitaylor paving the way, per usual 🐐

Profilbild von brian benitez
brian benitezvor 8 Monaten

Dude, you’re absolutely crushing it 🔥

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von brian benitez
brian benitezvor 8 Monaten

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

Profilbild von Ridd 🤿
Ridd 🤿vor 8 Monaten

Dude you are on fire 🔥

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

🙇 Gotta blaze a path to light the way!

Profilbild von Owen Williams ⚡
Owen Williams ⚡vor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Owen Williams ⚡
Owen Williams ⚡vor 8 Monaten

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!

Profilbild von dudu
duduvor 8 Monaten

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?

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von DZ
DZvor 8 Monaten

This looks awesome Josh :) great work

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Andrew Pouliot
Andrew Pouliotvor 8 Monaten

ooh, this is really nice!

Profilbild von Riz
Rizvor 8 Monaten

@KEMOS4BE

Profilbild von Gaddafi Rusli
Gaddafi Ruslivor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Gaddafi Rusli
Gaddafi Ruslivor 8 Monaten

I figured 😂

Profilbild von Anthony
Anthonyvor 8 Monaten

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.

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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!

Profilbild von Anthony
Anthonyvor 8 Monaten

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?

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

Yep! As I mentioned the DSL is agnostic of agent

Profilbild von Anthony
Anthonyvor 8 Monaten

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

Profilbild von Morgan
Morganvor 8 Monaten

sick! how does it work??

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Morgan
Morganvor 8 Monaten

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

Profilbild von Iqbal Aqaba | Upwork Freelancer | Framer Dev
Iqbal Aqaba | Upwork Freelancer | Framer Devvor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Seey
Seeyvor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

This is quite literally the opposite of a shortcut 🤣

Profilbild von Derek Embry
Derek Embryvor 7 Monaten

Unreal. I can’t wait to try this!

Profilbild von Gonçalo Medeiros
Gonçalo Medeirosvor 8 Monaten

Damn, I'm excited mannnn!!!

Profilbild von HobbyMonitor
HobbyMonitorvor 8 Monaten

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

Profilbild von Chris Welch
Chris Welchvor 8 Monaten

This would be incredibly useful right now. Damn.

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Saïd Aitmbarek
Saïd Aitmbarekvor 8 Monaten

based work, visually slick

Profilbild von Raj
Rajvor 8 Monaten

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

Profilbild von GC
GCvor 8 Monaten

Insane idea!!! Thank you

Profilbild von isha
ishavor 8 Monaten

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

Profilbild von Sam
Samvor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

thank you Sam!

Profilbild von TY
TYvor 8 Monaten

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.

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von Tom Johnson
Tom Johnsonvor 7 Monaten

👀👀👀👀👀

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

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

Profilbild von Daniel White
Daniel Whitevor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

@DanielWhit21874 Just a Next.js app!

Profilbild von Daniel White
Daniel Whitevor 8 Monaten

Beautiful app man, great job

Profilbild von symbols
symbolsvor 8 Monaten

Legit

Profilbild von gala
galavor 8 Monaten

Thanks, Josh! Excited to use this :)

Profilbild von Axon
Axonvor 8 Monaten

This removes a surprising amount of friction 👏

Profilbild von Taras
Tarasvor 7 Monaten

Sick

Profilbild von Arsyad Fadly
Arsyad Fadlyvor 8 Monaten

@mattgperry 👀

Profilbild von John Cafazza
John Cafazzavor 8 Monaten

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

Profilbild von joshpuckett
joshpuckettvor 8 Monaten

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

Profilbild von John Cafazza
John Cafazzavor 8 Monaten

Keep bringing the 🔥

Profilbild von Sanket
Sanketvor 8 Monaten

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

Profilbild von Hashim Warren
Hashim Warrenvor 8 Monaten

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.

Profilbild von Jason Beggs
Jason Beggsvor 8 Monaten

👀

Ähnliche 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 Aufrufe • vor 9 Monaten