Загрузка видео...

Не удалось загрузить видео

На главную

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 месяцев назад