InterfaceKit is a design tool to make real time visual edits to your app then copy a prompt for your agent to ship the changes. Just pushed the alpha to Interface Craft members; available to everyone soon. Fun to jam with will on this one 💪

Grab it here: And if you're not a member yet, consider joining! Much more fun stuff like this in the works.

Forgot to add: React only for now. Vue, Svelte, and Solid support (just for you @kitlangton 😘) at public launch once I work out the alpha bugs.

huuuge 👀👀

@willdphan Love this. Have been using Retune ( recently and really like the element selection for nested layers. Maybe some inspo in here

@willdphan We been cooking this for a while; roadmap is long but we’ll get there sooner rather than later :)

@willdphan christmas in march! 🎁

@willdphan 🎅🙇

@floguo @willdphan 🫡

@willdphan You're on a heater! Can't wait to try this

@willdphan All gas no brakes baby!

@willdphan Oh wow

@willdphan I’ve got a backlog of things to try from you.

@willdphan it's the weekend baby, LFG!

@willdphan niceeee. i am tinkering with something similar :

@liammatteson @willdphan 🔥

@willdphan Craaazy stuff Josh!

@willdphan i have issues with paddings in my panel

@willdphan Thanks for the feedback! What browser/OS?

@willdphan chrome/windows

@willdphan Wait. So I can just design as I normally would, and this thing writes the prompt for me? That’s brilliant

@willdphan I do try to only have good ideas and not bad ones! 🤣 still beta

@floguo @willdphan Been using this quite a bit this week! Really loving it Thank you!!

@floguo @willdphan Isn’t it similar to @benjitaylor’s agentation ?

@floguo @willdphan @benjitaylor This is specifically for giving you a live WYSIWYG editor on your app or website. Benji’s wonderful tool is general purpose for all sorts of feedback or guidance to agents. I use Agentation every day!

@floguo @willdphan @benjitaylor Right, I see the distinction. Adding this to my dev tools with dialkit. Btw is amazing! Would have loved to pay more for it! :)

@floguo @willdphan @benjitaylor My goal for this year is it’s worth 10-100x cost of membership 🙇

@floguo @willdphan @benjitaylor One of the few people who genuinely makes me excited about the future of design. Looking forward!

@willdphan One of my favorite designers, love the shit you’ve been putting out for us!!!

@willdphan 🙇🙏

@willdphan nice, always wanted inspect element to have a save button

@willdphan Dialkit and Interfacekit together gonna be wild

@willdphan I didn’t get them merged for alpha, but it’s coming 🤝

@willdphan I'm a member - where do I access the alpha?

@willdphan Link in thread!

@willdphan Ohhh so just need to update it in my codebase? sorry didn't know if there was a specific version i needed!

@willdphan Ah no it’s different than Dial Kit; check out the Interface Kit Overview article for details.

@willdphan Ahh - dial kit was the one I had been using! lovely, will play now :) thanks!

@willdphan Excited to try this out today! One thing I still love about agentation is being able to give critique on the page itself to refine, remove, etc and copy the prompt to the div itself.

@willdphan this is sick!

@willdphan love it! thank you @joshpuckett is there a way to expand possible font size variants when working with Tailwind? the tool has broken my design because it's capped to text-5xl

@willdphan Ya will adjust!

@willdphan legend! thank you for all the hard work ❤️

@willdphan And the villagers most definitely rejoiced

@willdphan the villagers should use it and send feedback!

@willdphan Loosely translated they’re saying “will do”

@floguo @willdphan i’ve lost count of how many times i’ve tried to set this up for this exact use case. excited to try this out. seriously such an awesome tool 🫡

@floguo @willdphan We gochu fam 🙌

@floguo @willdphan yes sirrrr 🫡

@willdphan What a good time to be a member 🚀🥳. Thanks Josh & Will , you're amazing!

@willdphan Yesssirrrr gonna have fun playing around with this

@willdphan Looks great! Have been working on a very similar project recently, DMd you

@willdphan Real-time visual edits with prompt export is killer for rapid iteration—cuts the dev loop dramatically. How's the agent handling edge cases like stateful components or CSS-in-JS conflicts?

@willdphan Not well at the moment! But we have a whole Interactions tab coming soon and more ideas on statefulness as well

@willdphan Appreciate the transparency! Statefulness is the hardest part to get right in visual builders. That Interactions tab sounds like exactly what's needed.

@willdphan Dialkit has made my localhost:3000 my figma file honestly.

@willdphan Interesting.

@willdphan visual edit then prompt copy is way smarter than trying to generate the code directly

@willdphan The real-time visual editing combined with agent prompts is brilliant - removes that translation layer between design intent and actual implementation. Looking forward to seeing this in action when it's public.

@willdphan This is the right workflow for design-to-code. Most AI tools start from text, but starting from VISUAL intent then generating the agent prompt is backwards in the best way. Agents need precise context about what changed, not vague descriptions.

@willdphan Couldn’t you ask for these parameters to be added to DialKit or no?

@willdphan you could, but that would be extremely onerous every time (and the controls aren’t optimized for that)

@willdphan Ah ok. Haven’t dug into all the setup videos on yet, so that’ll probably clarify the different use cases for each. I’m glad you called out the install of this is dev only by default. DialKit’s install didn’t do that. 😅

@willdphan it would be really cool if we could select layers like we do in figma like double click to go deeper, actually tried building something of of this recently modifying dialkit but kept failing lol