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.

105,348 görüntüleme • 8 ay önce •via X (Twitter)

62 Yorum

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

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 profil fotoğrafı
Simon8 ay önce

Like on steroids

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

@benjitaylor paving the way, per usual 🐐

brian benitez profil fotoğrafı
brian benitez8 ay önce

Dude, you’re absolutely crushing it 🔥

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

brian benitez profil fotoğrafı
brian benitez8 ay önce

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

Ridd 🤿 profil fotoğrafı
Ridd 🤿8 ay önce

Dude you are on fire 🔥

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

🙇 Gotta blaze a path to light the way!

Owen Williams ⚡ profil fotoğrafı
Owen Williams ⚡8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

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

Owen Williams ⚡ profil fotoğrafı
Owen Williams ⚡8 ay önce

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 profil fotoğrafı
dudu8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

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

DZ profil fotoğrafı
DZ8 ay önce

This looks awesome Josh :) great work

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

Andrew Pouliot profil fotoğrafı
Andrew Pouliot8 ay önce

ooh, this is really nice!

Riz profil fotoğrafı
Riz8 ay önce

@KEMOS4BE

Gaddafi Rusli profil fotoğrafı
Gaddafi Rusli8 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

Gaddafi Rusli profil fotoğrafı
Gaddafi Rusli8 ay önce

I figured 😂

Anthony profil fotoğrafı
Anthony8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

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 profil fotoğrafı
Anthony8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

Yep! As I mentioned the DSL is agnostic of agent

Anthony profil fotoğrafı
Anthony8 ay önce

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

Morgan profil fotoğrafı
Morgan8 ay önce

sick! how does it work??

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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 profil fotoğrafı
Morgan8 ay önce

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

Iqbal Aqaba | Upwork Freelancer | Framer Dev profil fotoğrafı
Iqbal Aqaba | Upwork Freelancer | Framer Dev8 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

Seey profil fotoğrafı
Seey8 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

This is quite literally the opposite of a shortcut 🤣

Derek Embry profil fotoğrafı
Derek Embry7 ay önce

Unreal. I can’t wait to try this!

Gonçalo Medeiros profil fotoğrafı
Gonçalo Medeiros8 ay önce

Damn, I'm excited mannnn!!!

HobbyMonitor profil fotoğrafı
HobbyMonitor8 ay önce

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 profil fotoğrafı
Chris Welch8 ay önce

This would be incredibly useful right now. Damn.

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

Saïd Aitmbarek profil fotoğrafı
Saïd Aitmbarek8 ay önce

based work, visually slick

Raj profil fotoğrafı
Raj8 ay önce

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

GC profil fotoğrafı
GC8 ay önce

Insane idea!!! Thank you

isha profil fotoğrafı
isha8 ay önce

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

Sam profil fotoğrafı
Sam8 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

thank you Sam!

TY profil fotoğrafı
TY8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

@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 profil fotoğrafı
Tom Johnson7 ay önce

👀👀👀👀👀

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

Daniel White profil fotoğrafı
Daniel White8 ay önce

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 profil fotoğrafı
joshpuckett8 ay önce

@DanielWhit21874 Just a Next.js app!

Daniel White profil fotoğrafı
Daniel White8 ay önce

Beautiful app man, great job

symbols profil fotoğrafı
symbols8 ay önce

Legit

gala profil fotoğrafı
gala8 ay önce

Thanks, Josh! Excited to use this :)

Axon profil fotoğrafı
Axon8 ay önce

This removes a surprising amount of friction 👏

Taras profil fotoğrafı
Taras7 ay önce

Sick

Arsyad Fadly profil fotoğrafı
Arsyad Fadly8 ay önce

@mattgperry 👀

John Cafazza profil fotoğrafı
John Cafazza8 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett8 ay önce

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

John Cafazza profil fotoğrafı
John Cafazza8 ay önce

Keep bringing the 🔥

Sanket profil fotoğrafı
Sanket8 ay önce

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

Hashim Warren profil fotoğrafı
Hashim Warren8 ay önce

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 profil fotoğrafı
Jason Beggs8 ay önce

👀

Benzer Videolar

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