正在加载视频...

视频加载失败

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 次观看 • 8 个月前 •via X (Twitter)

62 条评论

joshpuckett 的头像
joshpuckett8 个月前

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 的头像
joshpuckett8 个月前

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 的头像
Simon8 个月前

Like on steroids

joshpuckett 的头像
joshpuckett8 个月前

@benjitaylor paving the way, per usual 🐐

brian benitez 的头像
brian benitez8 个月前

Dude, you’re absolutely crushing it 🔥

joshpuckett 的头像
joshpuckett8 个月前

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

brian benitez 的头像
brian benitez8 个月前

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

Ridd 🤿 的头像
Ridd 🤿8 个月前

Dude you are on fire 🔥

joshpuckett 的头像
joshpuckett8 个月前

🙇 Gotta blaze a path to light the way!

Owen Williams ⚡ 的头像
Owen Williams ⚡8 个月前

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 的头像
joshpuckett8 个月前

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

Owen Williams ⚡ 的头像
Owen Williams ⚡8 个月前

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 的头像
dudu8 个月前

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 的头像
joshpuckett8 个月前

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

DZ 的头像
DZ8 个月前

This looks awesome Josh :) great work

joshpuckett 的头像
joshpuckett8 个月前

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

Andrew Pouliot 的头像
Andrew Pouliot8 个月前

ooh, this is really nice!

Riz 的头像
Riz8 个月前

@KEMOS4BE

Gaddafi Rusli 的头像
Gaddafi Rusli8 个月前

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

joshpuckett 的头像
joshpuckett8 个月前

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

Gaddafi Rusli 的头像
Gaddafi Rusli8 个月前

I figured 😂

Anthony 的头像
Anthony8 个月前

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 的头像
joshpuckett8 个月前

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 的头像
Anthony8 个月前

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 的头像
joshpuckett8 个月前

Yep! As I mentioned the DSL is agnostic of agent

Anthony 的头像
Anthony8 个月前

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

Morgan 的头像
Morgan8 个月前

sick! how does it work??

joshpuckett 的头像
joshpuckett8 个月前

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 的头像
Morgan8 个月前

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

Iqbal Aqaba | Upwork Freelancer | Framer Dev 的头像
Iqbal Aqaba | Upwork Freelancer | Framer Dev8 个月前

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

joshpuckett 的头像
joshpuckett8 个月前

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

Seey 的头像
Seey8 个月前

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

joshpuckett 的头像
joshpuckett8 个月前

This is quite literally the opposite of a shortcut 🤣

Derek Embry 的头像
Derek Embry7 个月前

Unreal. I can’t wait to try this!

Gonçalo Medeiros 的头像
Gonçalo Medeiros8 个月前

Damn, I'm excited mannnn!!!

HobbyMonitor 的头像
HobbyMonitor8 个月前

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 的头像
Chris Welch8 个月前

This would be incredibly useful right now. Damn.

joshpuckett 的头像
joshpuckett8 个月前

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

Saïd Aitmbarek 的头像
Saïd Aitmbarek8 个月前

based work, visually slick

Raj 的头像
Raj8 个月前

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

GC 的头像
GC8 个月前

Insane idea!!! Thank you

isha 的头像
isha8 个月前

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

Sam 的头像
Sam8 个月前

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

joshpuckett 的头像
joshpuckett8 个月前

thank you Sam!

TY 的头像
TY8 个月前

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 的头像
joshpuckett8 个月前

@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 的头像
Tom Johnson7 个月前

👀👀👀👀👀

joshpuckett 的头像
joshpuckett7 个月前

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

Daniel White 的头像
Daniel White8 个月前

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 的头像
joshpuckett8 个月前

@DanielWhit21874 Just a Next.js app!

Daniel White 的头像
Daniel White8 个月前

Beautiful app man, great job

symbols 的头像
symbols8 个月前

Legit

gala 的头像
gala8 个月前

Thanks, Josh! Excited to use this :)

Axon 的头像
Axon8 个月前

This removes a surprising amount of friction 👏

Taras 的头像
Taras7 个月前

Sick

Arsyad Fadly 的头像
Arsyad Fadly8 个月前

@mattgperry 👀

John Cafazza 的头像
John Cafazza8 个月前

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

joshpuckett 的头像
joshpuckett8 个月前

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

John Cafazza 的头像
John Cafazza8 个月前

Keep bringing the 🔥

Sanket 的头像
Sanket8 个月前

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

Hashim Warren 的头像
Hashim Warren8 个月前

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 的头像
Jason Beggs8 个月前

👀

相关视频

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 次观看 • 9 个月前