joshpuckett's banner

joshpuckett

@joshpuckett • 34,092 subscribers

Designing at @IterationDesign, teaching at https://t.co/Jn9brli34Y. Previously led teams at Dropbox, Wealthfront, Groupon & more.

Shorts

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

522,124 просмотров

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

1,075,641 просмотров

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

52,074 просмотров

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

253,073 просмотров

It's really, really good y'all. Grilli Type is without a doubt my favorite foundry.

It's really, really good y'all. Grilli Type is without a doubt my favorite foundry.

60,489 просмотров

Always make a jig. Whenever I'm making something that's repetitive or highly dynamic, I try and make a tool to aid me. For the categorization quiz in Pica, each font card hops into the style you select. I made this lil curved path editor to dial it in.

Always make a jig. Whenever I'm making something that's repetitive or highly dynamic, I try and make a tool to aid me. For the categorization quiz in Pica, each font card hops into the style you select. I made this lil curved path editor to dial it in.

37,062 просмотров

I'm hosting a private tour of the Matisse exhibit at SFMOMA on Tuesday, June 23rd. I hope it'll be an inspiring way to kick off Config week in San Francisco! Spots are limited; apply here:

I'm hosting a private tour of the Matisse exhibit at SFMOMA on Tuesday, June 23rd. I hope it'll be an inspiring way to kick off Config week in San Francisco! Spots are limited; apply here:

15,080 просмотров

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

101,540 просмотров

Three levels of popover interaction design:

Three levels of popover interaction design:

102,389 просмотров

Had some time tonight and wanted to help everyone have smooth, fluid steppers: Pasito is a dependency-free, fully-customizable component for all your step indication needs. 𝚗𝚙𝚖 𝚒 𝚙𝚊𝚜𝚒𝚝𝚘

Had some time tonight and wanted to help everyone have smooth, fluid steppers: Pasito is a dependency-free, fully-customizable component for all your step indication needs. 𝚗𝚙𝚖 𝚒 𝚙𝚊𝚜𝚒𝚝𝚘

65,299 просмотров

what if claude code auto-compactor felt like this...

what if claude code auto-compactor felt like this...

92,726 просмотров

I use the latest coding agents in a lot of the material for Interface Craft. I wanted everyone to be able to use them, so I reached out to my friends at v0 and Claude who were generous enough to provide every founding member with one month of Pro.

I use the latest coding agents in a lot of the material for Interface Craft. I wanted everyone to be able to use them, so I reached out to my friends at v0 and Claude who were generous enough to provide every founding member with one month of Pro.

61,976 просмотров

Tonight's tool: a simple way to preview any text in all of my local fonts at once. Would you find it useful if I cleaned up and released?

Tonight's tool: a simple way to preview any text in all of my local fonts at once. Would you find it useful if I cleaned up and released?

45,071 просмотров

Good software is durable. Here's an quick example of what that means, at an interface level. In X, you can choose a custom emoji reaction. The popover looks like what I expect, but it does not work like I expect. I want to use the ‼ emoji, so the first thing I try is obviously '!'. No results. The sum of a million little papercuts like this means X feels like broken software, not well designed or made. Which is a shame, because it's a brilliant product and network.

Good software is durable. Here's an quick example of what that means, at an interface level. In X, you can choose a custom emoji reaction. The popover looks like what I expect, but it does not work like I expect. I want to use the ‼ emoji, so the first thing I try is obviously '!'. No results. The sum of a million little papercuts like this means X feels like broken software, not well designed or made. Which is a shame, because it's a brilliant product and network.

55,420 просмотров

Ok not to Bieber out over here, but my Christmas wish is for Apple to fix whatever this nav paradigm is in the Phone app. Why are Voicemails a weird filter on the Calls tab?!?

Ok not to Bieber out over here, but my Christmas wish is for Apple to fix whatever this nav paradigm is in the Phone app. Why are Voicemails a weird filter on the Calls tab?!?

59,778 просмотров

DialKit now has css easing curve support for transitions, a number of other minor improves. And thanks to Kit Langton now works with SolidJS in addition to React. Over 25,000 weekly installs already! npm install dialkit

DialKit now has css easing curve support for transitions, a number of other minor improves. And thanks to Kit Langton now works with SolidJS in addition to React. Over 25,000 weekly installs already! npm install dialkit

31,941 просмотров

Just noticed Benji Taylor made the Agentation toolbar freely draggable, and also added a lovely tilt effect based on drag position. Great products and tools are the sum of a thousand little details like these.

Just noticed Benji Taylor made the Agentation toolbar freely draggable, and also added a lovely tilt effect based on drag position. Great products and tools are the sum of a thousand little details like these.

27,702 просмотров

Tonight's 10-minute tool: Pixelator. Render and animate pixelated versions of logos.

Tonight's 10-minute tool: Pixelator. Render and animate pixelated versions of logos.

65,895 просмотров

Even the most utilitarian of interfaces can be made delightful.

Even the most utilitarian of interfaces can be made delightful.

25,514 просмотров

Library Updates, Feb 12th 2026 — Added Mark as Read & Bookmark; synced across devices, optimistic writes, local caching so no flicker onload etc. — Added Next/Previous links at bottom of articles — Added keyboard shortcuts for Practical Demonstrations (j/k) — Fixed external links to open in a new tab — Fixed switching pages to reset scroll position — Improved general performance & stability Thank you for all the feedback and patience with working out issues!

Library Updates, Feb 12th 2026 — Added Mark as Read & Bookmark; synced across devices, optimistic writes, local caching so no flicker onload etc. — Added Next/Previous links at bottom of articles — Added keyboard shortcuts for Practical Demonstrations (j/k) — Fixed external links to open in a new tab — Fixed switching pages to reset scroll position — Improved general performance & stability Thank you for all the feedback and patience with working out issues!

19,659 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

I love how Jony and Flavio predicted the precise, immediate response we're seeing to the Luce. It's almost like they're good designers who know a thing or two about design! Clip from Cleo Abram's interview, a must watch.

I love how Jony and Flavio predicted the precise, immediate response we're seeing to the Luce. It's almost like they're good designers who know a thing or two about design! Clip from Cleo Abram's interview, a must watch.

379,807 просмотров • 9 дней назад

Interface Craft is now open. It’s a growing library of resources for those who are committed to crafting experiences and interfaces with uncommon care. I hope you’ll consider joining:

Interface Craft is now open. It’s a growing library of resources for those who are committed to crafting experiences and interfaces with uncommon care. I hope you’ll consider joining:

471,233 просмотров • 3 месяцев назад

I truly cannot wait to share this with you all.

I truly cannot wait to share this with you all.

200,013 просмотров • 4 месяцев назад

I can't believe over 30k of you willingly follow me on here. I am both honored and horrified. To celebrate, is 30% off for the next 30 hours. Join members from over 114 countries who are committed to growing and designing with uncommon care.

I can't believe over 30k of you willingly follow me on here. I am both honored and horrified. To celebrate, is 30% off for the next 30 hours. Join members from over 114 countries who are committed to growing and designing with uncommon care.

82,742 просмотров • 1 месяц назад

Vibe coded this little app for my dad on the flight home yesterday. Let's him easily generate personalized stories for the kids he tutors in reading every week. Fun little ship to sneak in before the new year!

Vibe coded this little app for my dad on the flight home yesterday. Let's him easily generate personalized stories for the kids he tutors in reading every week. Fun little ship to sneak in before the new year!

175,766 просмотров • 5 месяцев назад

Polished up Locale some more tonight: - change font size, weight, and italic - view on dark/light/image background - save fonts to a short list (per session) - inspect all styles per family - jump to alphabetical section (hit any letter key)

Polished up Locale some more tonight: - change font size, weight, and italic - view on dark/light/image background - save fonts to a short list (per session) - inspect all styles per family - jump to alphabetical section (hit any letter key)

99,287 просмотров • 2 месяцев назад

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

54,076 просмотров • 1 месяц назад

Tonight's refinements: - visualize custom brand colors - upload a logo to preview it next to a wordmark - focus on a single font style full screen - keyboard jumping snaps vs animated scroll Enjoy!

83,867 просмотров • 2 месяцев назад

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.

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.

97,829 просмотров • 3 месяцев назад

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.

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.

104,081 просмотров • 4 месяцев назад

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

102,712 просмотров • 4 месяцев назад

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 💪

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 💪

52,806 просмотров • 2 месяцев назад

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!

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!

81,730 просмотров • 4 месяцев назад

DialKit 1.2 is live. - Vue support (🙏 gabrielstuff) - Full light/dark mode support - Keyboard shortcuts (🙏 Josh Millgate) - Prod environment guard - Draggable entry FAB - Many bug fixes & refinements 𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

DialKit 1.2 is live. - Vue support (🙏 gabrielstuff) - Full light/dark mode support - Keyboard shortcuts (🙏 Josh Millgate) - Prod environment guard - Draggable entry FAB - Many bug fixes & refinements 𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

38,353 просмотров • 2 месяцев назад

I'm hosting a breakfast/co-work/hangout in Barcelona on May 14th, along with the wonderful Juli. We've got a lovely cafe booked for half the day, coffee and food provided. Request an invite here: Hope to see you there!

I'm hosting a breakfast/co-work/hangout in Barcelona on May 14th, along with the wonderful Juli. We've got a lovely cafe booked for half the day, coffee and food provided. Request an invite here: Hope to see you there!

28,245 просмотров • 1 месяц назад

The best part about crafting personal software—like this little budget app—is adding extra touches of delight and humor. Watch til the end 🙈

The best part about crafting personal software—like this little budget app—is adding extra touches of delight and humor. Watch til the end 🙈

44,788 просмотров • 5 месяцев назад

How we feeling about this padding control? WIP on Interface Kit, wanted to make it feel a lil more playful than your typical control...

How we feeling about this padding control? WIP on Interface Kit, wanted to make it feel a lil more playful than your typical control...

14,001 просмотров • 3 месяцев назад

I think most designers don't understand or appreciate Inter enough. I made this quick playground to show how expressive and customizable it can be, thanks to a rich use of OpenType features and craft from Rasmus Andersson.

I think most designers don't understand or appreciate Inter enough. I made this quick playground to show how expressive and customizable it can be, thanks to a rich use of OpenType features and craft from Rasmus Andersson.

38,736 просмотров • 1 год назад

Больше нет контента для загрузки