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

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

На главную

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

98,806 просмотров • 7 месяцев назад •via X (Twitter)

Комментарии: 54

Фото профиля joshpuckett
joshpuckett7 месяцев назад

npm install dialkit motion or visit to see more on how you can use it. Feedback and PRs welcome!

Фото профиля joshpuckett
joshpuckett7 месяцев назад

Live tuning is one of those ways of working that once you learn it, you don't go back. Use it to dial in animations, layouts, effects, or anything you think of.

Фото профиля Kyler Phillips
Kyler Phillips7 месяцев назад

Love this, some notion of pages, accordions for subset/grouping would be killer. Thanks for working on it.

Фото профиля joshpuckett
joshpuckett7 месяцев назад

collapsible groups are already in there, bb!

Фото профиля Kyler Phillips
Kyler Phillips7 месяцев назад

Ah amazing!

Фото профиля Eduardo Sonnino
Eduardo Sonnino7 месяцев назад

Thats awesome @joshpuckett !

Фото профиля joshpuckett
joshpuckett7 месяцев назад

😅

Фото профиля Soren
Soren7 месяцев назад

so cool! have to give this a try.

Фото профиля diip3sh
diip3sh7 месяцев назад

Working on new component, will test with it

Фото профиля joshpuckett
joshpuckett7 месяцев назад

@yordaniawono was doing something similar!

Фото профиля Kyle
Kyle7 месяцев назад

looks lovely, thanks @chazza for telling me about this.

Фото профиля joshpuckett
joshpuckett7 месяцев назад

@chazza I hope you find it useful!

Фото профиля Sharif
Sharif7 месяцев назад

I’ve been waiting for this!

Фото профиля joshpuckett
joshpuckett7 месяцев назад

let me know what you think!

Фото профиля William Bout
William Bout7 месяцев назад

Nice pics 👀

Фото профиля joshpuckett
joshpuckett7 месяцев назад

Must have been taken by a very talented (and handsome) photographer! 😘

Фото профиля Mike Lee
Mike Lee7 месяцев назад

Very impressive work Josh! At the moment I use Leva for this use case but I will definitely try this too, my only feedback so far from the demo is that it would be awesome if we were able to drag the panel around, since I typically move this component around in my presentations while I walk through various details

Фото профиля joshpuckett
joshpuckett7 месяцев назад

You can specify anchor position currently, but will looking into drag anywhere positioning

Фото профиля Jason Bradley
Jason Bradley7 месяцев назад

Wanted to dm about it so this is clutch

Фото профиля Milind Mishra
Milind Mishra7 месяцев назад

Love this, thanks for all the hardwork! 🙌🏻

Фото профиля YottaYocta
YottaYocta7 месяцев назад

Game changer if we had this in svelte

Фото профиля joshpuckett
joshpuckett7 месяцев назад

submit a PR! Will look to add eventually.

Фото профиля Deep lakhani
Deep lakhani7 месяцев назад

It's more like tweakpane but much better thanks @joshpuckett

Фото профиля joshpuckett
joshpuckett7 месяцев назад

exactly. I wanted to call it "Tweak", resurrecting this project from 12 years ago, but that'd be too confusing

Фото профиля Deep lakhani
Deep lakhani7 месяцев назад

It's great way to tweak with motion

Фото профиля Jason Anderson
Jason Anderson7 месяцев назад

This looks really cool! And amazing docs

Фото профиля joshpuckett
joshpuckett6 месяцев назад

🙏

Фото профиля cam
cam7 месяцев назад

absolutely goated. stoked to use this

Фото профиля Corey O’Neal
Corey O’Neal7 месяцев назад

between this and — it's making me want to switch away from svelte

Фото профиля aditya
aditya7 месяцев назад

as an interface craft user, been using this for everything in my workflow and it's just game changer! btw raised a pr for a papercut 😅

Фото профиля Toolfolio
Toolfolio6 месяцев назад

Pretty UI

Фото профиля Jon
Jon6 месяцев назад

I recognize that slider from mile now 😎 That part of the course was mind-blowing to me

Фото профиля joshpuckett
joshpuckett6 месяцев назад

Always go the extra mile 🙏 Unless you’re running a race, then you probably don’t need to.

Фото профиля cristi
cristi7 месяцев назад

exactly when needed awesome job sir

Фото профиля seán
seán7 месяцев назад

Bought the course just last night so I could get access to this damn 😅 but i'm sure I'll still learn loads!

Фото профиля joshpuckett
joshpuckett7 месяцев назад

I go a lot deeper on it in Interface Craft. There are also other skills (and coming tools) that are exclusive to members.

Фото профиля seán
seán7 месяцев назад

Sweet looking forward to diving in!

Фото профиля Kailash
Kailash7 месяцев назад

Just saw this at interfacecraft. Trying it asap

Фото профиля Saura ☕
Saura ☕6 месяцев назад

OMG!

Фото профиля Corey Haines
Corey Haines7 месяцев назад

@zstvns

Фото профиля BuildTradePlay
BuildTradePlay7 месяцев назад

This looks great, will give it a go 👌

Фото профиля izaias
izaias7 месяцев назад

This feels bigger than tuning. If those parameters connect to canonical components, you are not just tweaking visuals, you are evolving the system. Code defines the primitive. Canvas shapes it in context. Prompt reasons over it. One object, multiple ways to interact.

Фото профиля James Burke
James Burke7 месяцев назад

Nice one @joshpuckett. I will give it a whirl. Did you also see Tweakpane? Pretty cool project that is similar to yours.

Фото профиля James McDonald
James McDonald6 месяцев назад

You're on fire right now mate. Played around with this earlier... so good!

Фото профиля the ikid
the ikid7 месяцев назад

Would this give context of dom to the agent ? Been using agentation for a few weeks which I like a lot but this is going much further

Фото профиля joshpuckett
joshpuckett6 месяцев назад

Different; you design params in your code and then yes, prompt has specific context to update them. Agentation is complementary too; I use both daily

Фото профиля Igor Syvets
Igor Syvets6 месяцев назад

Love this. Just a couple days ago was building such panel for myself and was glad to discover a much polished version in Interface Craft! Except in mine I copy config json and not prompt.

Фото профиля Marchen
Marchen7 месяцев назад

curious how it integrates with existing animation libs

Фото профиля joshpuckett
joshpuckett7 месяцев назад

it makes working with @motiondotdev a dream; but works with anything.

Фото профиля Marchen
Marchen7 месяцев назад

@motiondotdev motion compatibility is huge. makes sense it works anywhere

Фото профиля Ben Gold
Ben Gold7 месяцев назад

This is so freaking cool.

Фото профиля Terry Carson
Terry Carson7 месяцев назад

Congrats on the launch! Live tuning parameters sounds like a game changer. Excited to try it out and see how it improves app workflows.

Фото профиля Greg Huntoon
Greg Huntoon7 месяцев назад

@brettmcm This is a layer of abstraction above what we’ve been working on. Stellar concept. Love it. So well done, @joshpuckett. Gonna have to give the tool a spin.

Фото профиля Leo
Leo7 месяцев назад

already have dialkit in one of my projects. the speed of dialing in the right values without guessing is genuinely great. nice work @joshpuckett thank you!

Похожие видео

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,659 просмотров • 8 месяцев назад