Josh Puckett - Crafting interfaces with uncommon care

2026-03-12 - 54 min - source - Read full transcript

Ridd (host)Josh Puckett

Key insights

AI collapses the gap between an ambitious idea and a working prototype, so designers should spend the reclaimed time going deeper on fewer things rather than shipping more scope.

Josh argues explicitly against using AI-driven speed to add more features or surface area. Instead he frames the opportunity as taking the smaller, truly essential scope and executing it to a bar users have never seen, citing his own gift-card and onboarding work as an example of depth over breadth.

design-restraint

You do not need technical vocabulary to direct AI toward a specific visual or interaction outcome; describing intent in plain language works, and the correct technical terms (like 'sine wave' or 'Lissajous curve') can be learned afterward from what the AI produces.

Josh describes prompting for a generative graphic without knowing the term 'sine wave' in advance, and separately discovering the Lissajous curve concept only after asking AI to solve the abstract problem of controlling three values with one input. He treats each successful result as a vocabulary lesson for future prompts.

ai-assisted-craft

A single well-designed control can replace several labeled sliders, trading legibility for mystery and play, which increases what Josh calls 'fidgetability.'

The Lissajous-curve slider on the card customization screen drives frequency, amplitude, and phase simultaneously. Josh explicitly compares this to the unshipped alternative of three separate labeled sliders, arguing the single unlabeled control creates curiosity ('what is it going to do when I drag that') rather than a checklist to operate.

fidgetability

Cheap AI-driven iteration turns hours-long prototyping reps into minutes, so designers should optimize for volume of attempts to build intuition, not for getting it right on the first try.

Josh cites trying roughly 38 different card-picker layouts before settling on the infinite-canvas version, and references a Kanye West lyric ('five beats a day for three summers,' i.e. quantity is a quality of its own) and a Mr. Beast quote about making 100 videos before questions stop mattering, as the mental model for building design intuition through repetition now that each rep is cheap.

ai-assisted-craft

Uncommon care in small interaction details (morphing a button into 'Done' instead of opening a dialog, auto-focusing an input, fading surrounding content to signal focus) signals to users that the maker cares, which builds trust and perceived value even when none of it is functionally required.

Walking through the name-edit and signature-edit flows on the library card, Josh explains each micro-decision (why he avoided a destructive-looking clear button, why the label changes to 'type to edit') as a deliberate signal of care that increases user affinity toward the whole product, not just that one screen.

onboarding-design

A single consistent metaphor, applied all the way down, gives an otherwise open-ended product coherence and generates its own feature ideas.

Josh chose 'library' because his content was broad and unstructured, then mined the metaphor for concrete product decisions: shelves become collections, library cards become the personal onboarding token, and scanning a card in a machine becomes the drag-to-enter gesture borrowed from Mailbox's waitlist coin.

onboarding-design

Restraint, not addition, is the real differentiator once implementation is cheap, and the discipline should be applied even after something already works.

Josh quotes Dieter Rams's 'less but better' and a Bruce Lee line his co-founder Todd Adam Kela taught him ('not daily increase, but daily decrease, hack away at the inessential'), and self-critiques his own shipped 'Done' button as unnecessary when it could just be a checkmark, arguing that unlike reducing a sauce, you cannot over-edit a design.

design-restraint

Sound design is a first-class craft layer worth outsourcing to a specialist, not an afterthought bolted on at the end.

Josh brought in sound designer Josh Dunsterville to create custom scratch-off sounds that vary by scratch direction rather than looping one clip, and a distinct success sound for the card drag-in gesture, describing the collaboration as happening in about a day once he realized custom sound was an option.

fidgetability

For a small, self-selected, expert audience, a maker can consciously trade usability and accessibility rigor for a more expressive, personal experience, a call that would differ for a mass-market product.

Josh notes his buyers are mostly designers and engineers, a small audience, so he accepted more usability/accessibility liability on unlabeled, gesture-based controls in exchange for a more distinctive feel, framing it explicitly as fighting for what he believes is right rather than diluting the idea to satisfy generic conventions.

design-restraint

Generating many AI-driven permutations surfaces options a designer would not have designed by hand, and some of those accidental discoveries end up better than the original plan.

Josh describes asking AI to generate a million random parameter permutations for his card graphics and finding one combination ('like a tunnel') he would never have designed intentionally but considers genuinely good, treating AI's search breadth as a source of ideas rather than only an execution tool.

ai-assisted-craft

Media referenced

Family Values (benji.org write-up on morphing interfaces) - article - Josh cites Benji from Family as the person who popularized morphing-control interfaces (buttons transforming into other controls), the pattern behind his card-editing UI.
Interface Craft - other - Josh's own paid library/course on design craft, the subject of the episode; launched website Jan 13, library opened Feb 10, built with a library-card metaphor and onboarding walked through live.

Companies

Wealthfront - One of the products Josh spent nearly two decades designing, cited in his intro bio.
Dropbox - Another product from Josh's design career, also the parent company that acquired Mailbox, whose onboarding he cites as an inspiration.
Stripe - The checkout flow buyers land on after purchasing Interface Craft, before reaching the personalized library-card onboarding.
Figma - Josh calls Figma 'a lie' for full-fidelity dialing-in because its color/type rendering differs from the browser, but still valuable for rough interaction sketches pasted into an AI coding agent.
Vercel (V0) - AI tool Josh uses to one-shot generative graphics and interaction prototypes from prompts and pasted Figma screenshots; Vercel partnered with him to give founding members a free month of V0 Pro.
Anthropic / Claude - Claude Code is one of Josh's AI collaborators for implementing prototypes; Anthropic partnered with him to give founding members a free month of Claude Pro.
Arc (The Browser Company) - Cited alongside Dropbox as one of the few onboarding experiences Josh respects, though he wanted his own to go further.
Mailbox - Gentry Underwood's product (later acquired by Dropbox); its waitlist coin redeemed in a virtual machine is the direct inspiration for Josh's library-card drag-in interaction.
Mobbin - Sponsor segment; Josh uses it daily for real-world UI pattern references and recommends dive.club/mobbin.
Framer - Sponsor segment and part of Josh's personal tool stack; he built the Dive Club website page entirely in Framer's design-pages feature.

Techniques and frameworks

Wave-function-driven generative graphics - Josh's card graphics are generated from a wave function (sine wave); he prompts AI to expose sliders for rows, items per row, opacity range, frequency, amplitude, and phase rather than hand-designing each variant in Figma.
Lissajous-curve slider - A single slider that maps a position on a Lissajous curve to three parameters at once (frequency, amplitude, phase offset), solving what Josh calls 'the three slider problem' and producing the infinity-symbol-shaped control on the card customization screen.
Conceptual range and conceptual depth - Josh's informal framework for craft: first range (brainstorm many ways to solve a moment, e.g. reveal credits via confetti, an unboxing animation, a scratch-off card), then depth (push the chosen concept far past the obvious execution).
Separation of concerns in prototyping - Josh sketches interaction logic in deliberately low-fidelity color blocks (ignoring visual design entirely), screenshots them, and pastes them into Claude Code or V0 to communicate intent to a coding agent.
BowKit - A design tool Josh released that is a refined version of his live-tuning parametric visualization panel, letting anyone quickly explore generative-graphic permutations.

Summary

Josh Puckett, a nearly-two-decade product designer (Wealthfront, Dropbox, and dozens of startups) and creator of the paid design library Interface Craft, walks Dive Club host Ridd through the onboarding flow he built for his own product. The whole experience runs on a library metaphor: buyers get a personalized library card they can customize, sign, and later use to "check into" the library when it opens, echoing Mailbox's waitlist-coin onboarding that Josh has admired for years. Nearly every screen-sharing segment doubles as a live demonstration of how he collaborates with AI tools (V0, Claude Code, Codex) to build things that would have been technically out of reach or too time-consuming by hand just a few years ago.

The technical core of the conversation centers on generative, parameter-driven graphics. Josh's card artwork is produced by wave functions, and rather than hand-designing dozens of variants in Figma, he built a live-tuning tool (later shipped publicly as BowKit) that exposes sliders for frequency, amplitude, phase, and layout so he can explore results in real time, including asking AI to generate a million random permutations to surface combinations he'd never have designed intentionally. The standout technique is his "Lissajous-curve slider," a single control that maps a position on a Lissajous curve to three parameters simultaneously, solving what he calls "the three slider problem" while adding a layer of mystery that increases what he repeatedly calls "fidgetability."

A recurring thread is that vocabulary is not a prerequisite for using AI well. Josh didn't know the term "sine wave" before prompting for it, and only learned about Lissajous curves after describing his goal (one control, three effects) and letting AI surface the concept. He contrasts this with his separation-of-concerns prototyping style: extremely rough, deliberately unstyled color-block sketches, screenshotted and pasted straight into an AI coding agent to convey interaction logic without wasting time on visuals that don't matter yet. He argues Figma remains valuable for exactly this kind of rough sketching, but is "a lie" for dialing in final fidelity since its rendering never matches the real browser output.

Philosophically, Josh keeps returning to restraint over addition. He references his side hobby of Shaker-style woodworking ("make it as well as you can and make it as simple as you can"), Dieter Rams's "less but better," and a Bruce Lee line from his co-founder Todd Adam Kela ("not daily increase, but daily decrease, hack away at the inessential") to argue that AI-compressed implementation time should be reinvested in distillation, not scope creep. He self-critiques his own shipped work in real time, noting an inconsistent control-bar height and an unnecessary "Done" label that could just be a checkmark, insisting that unlike reducing a sauce, a design can basically never be over-edited.

The episode closes on the value proposition of designers in an AI-saturated workflow. Josh's framing is that AI doesn't replace design judgment, it compresses the distance between an idea and a working prototype, so a designer's "reach" (ambitious ideas previously blocked by implementation cost) can now exceed their prior "grasp." His advice to less experienced designers is volume over cleverness: cite Kanye West's "five beats a day for three summers" and Mr. Beast's "make 100 videos" advice, arguing that cheap AI-assisted reps (he estimates trying about 38 variants of one card-picker interaction alone) build the intuition that used to take years of slower, hand-built iteration to acquire.

Notable Quotes

"Instead of creating more scope, how do we take the limited amount of scope that is really essential and just execute it to a bar that folks maybe haven't ever seen before." - Josh Puckett

"It's not daily increase, but the daily decrease. Hack away at the inessential." - Josh Puckett (quoting Bruce Lee, via his co-founder Todd Adam Kela)

"All of these details communicate to you like, he really cares about design or about this experience, and that builds trust, that builds perceived value. Your affinity to this product increases because it works just a little bit better or differently than you expected to." - Josh Puckett

"Make it as well as you can and make it as simple as you can." - Josh Puckett, describing the Shaker furniture-making philosophy

"There's a great old Kanye lyric that I really love, which is something like, I made five beats a day for three summers. Quantity is a quality of its own." - Josh Puckett