Brett Williams - How a Visual Designer Became a Builder

2026-06-16 - 50 min - source - Read full transcript

Rid (host)Brett Williams

Key insights

Brett went from AI-skeptic to shipping a full Mac app in about a month of active use, after resisting coding tools for years out of concern about devaluing design craft.

He had tried Bolt and Lovable superficially before and dismissed the output as garbage, retreating to Figma. What changed a month before this recording was diving into Claude specifically and discovering the output quality and controllability were fundamentally different from his earlier text-to-app experiments.

ai-assisted-design

The final 20% of visual polish took roughly 80% of the total build time, and Figma's role shrank to a supporting role rather than being the primary design surface.

Brett built Gather's functional structure quickly by prompting Claude directly, without designing in Figma first. Figma only entered for last-mile detail work like copying CSS for a skeuomorphic gradient button via dev mode; he estimates it contributed relatively little to the final shipped design compared to what he expected going in.

design-taste

Precise design vocabulary, not pixel-level manipulation, is what gives a designer real control when directing Claude.

Brett was surprised to find he could get exactly what he wanted from Claude as long as he described it using specific design language - strokes, opacity, gradients, trailing hover states - even without using Claude's visual/design mode. He frames this as the single biggest mental shift of the whole project: AI output is not a lottery if you can articulate intent clearly.

control-and-collaboration

He built a custom 'prototype MD' Claude skill that outputs five clickable HTML variants of any UI decision instead of committing to one AI first draft.

Inspired by a few minutes of a video on Claude skills, Brett created a reusable skill file instructing Claude to always generate five options bundled into one HTML file he can tap through before choosing. He used it the night before this interview to redesign multiple UI elements and called it a game-changer he wished he'd discovered sooner.

prototyping-workflows

Feeding Claude concrete reference material - exported CSS, screenshots, and folders of realistic dummy content or icon assets - produces dramatically better output than describing things in words alone.

Examples include copying CSS from Figma dev mode for a gradient stroke effect that nailed the result immediately, and keeping folders of SVG logos and mock faces so generated prototypes use realistic-looking placeholder content instead of generic emoji or filler.

tool-stack

Building phase-by-phase and one UI element at a time avoids the debugging overhead of a single sweeping prompt.

Brett's workflow is backend first, then frontend, then drilling into individual elements (dropdowns, tabs, filters) one at a time. He explicitly avoids one giant prompt covering everything because it forces him back into tweaking and troubleshooting a tangled result afterward.

ai-assisted-design

He built a Chrome extension to pull X/Twitter bookmarks into his app without using X's official API, working around platform constraints Claude initially said were impossible.

Claude first told him rounded corners weren't achievable in a Chrome extension; Brett pushed back by citing a competing extension that did it, and Claude then proposed stacking an iframe over the page to achieve it. He frames this as evidence that domain experience is still needed to get past AI's first-pass 'not possible' answers.

control-and-collaboration

HTML has become Brett and Rid's 'third way' of exploring ideas, beyond writing code or working in a design canvas.

Both use disposable HTML pages generated by Claude mid-conversation to visualize open-ended questions - for example, Brett had Claude lay out all the metadata options a content card could display as a mini visual mockup, which surfaced three times more ideas than he'd had in his head.

prototyping-workflows

The real danger of AI-accelerated building is over-engineering: every individual micro-interaction is cheap to add, but stacking many of them makes the product feel overwrought.

Brett describes deliberately dialing back polish he added in isolation once he noticed the cumulative effect made the app 'feel weird,' citing a tweet about apps getting 'overcooked.' He contrasts this with Eagle, a mature competitor he sees as having accreted too many features over years without editorial restraint.

design-taste

Brett believes AI tools amplify designer taste and judgment rather than replace them, and that the loudest online voices about AI design tools are rarely people with real design taste.

He argues AI is 'still not good at design' on its own but is very good at taking clear direction, meaning outcomes are gated by the operator's taste - and that most vocal AI-and-design commentary online comes from non-designers or company mouthpieces rather than practicing designers.

design-taste

Despite shipping a polished Mac app, Brett still doesn't use terminal commands, git, or developer vocabulary directly - he describes everything in plain language and lets Claude translate it.

He recounts the discomfort of screen-sharing with an engineer and realizing he has no git commands memorized; every new Claude context window, he has to re-explain that he needs very explicit, non-technical instructions. He says this gave him new appreciation for how much procedural knowledge developers carry.

tool-stack

Brett varies how much creative latitude ('wiggle room') he gives Claude based on how certain he already is about the outcome.

For details he has a firm mental picture of, he directs precisely; for newer features or animation work he's less confident about, he prompts Claude for options and brainstorming first, and typically closes prompts by inviting Claude to flag anything he might have missed or a better approach.

control-and-collaboration

Media referenced

Untitled video on Claude skills/prototyping workflow - other - Brett watched the first four minutes of a video by a Claude engineer discussing custom skill files, which inspired his own 'prototype MD' skill for generating five UI options as a single clickable HTML file.

Companies

DesignJoy - Brett's design agency/business; his primary public identity in the design community.
Framer - Episode sponsor; Rid describes Framer 3.0 letting him run an AI agent for CMS management directly inside the canvas.
Jitter - Episode sponsor; motion design tool Rid uses for animating logos and UI, newly released reusable animated components.
Eagle - Existing collection/inspiration app Brett used before building Gather; cited as a cautionary example of feature bloat from years of accretion.
Quiver - AI icon/vector-art generation API Brett used inside Paper's canvas, including generating his first production icon by matching an existing icon library's style.
artlist.com - Stock sound library Brett initially used to source a UI sound effect before switching to Claude-generated sound options.

Techniques and frameworks

Prototype MD skill - A custom Claude skill Brett built that, on request, generates five distinct UI/interaction variants bundled into a single clickable HTML file so he can compare options side by side before committing to an implementation.
Phase-based, one-thing-at-a-time prompting - Brett builds backend first, then frontend, then drills into individual UI elements one at a time rather than issuing one large sweeping prompt, to avoid having to debug a tangled output.
Reference-driven prompting - Feeding Claude concrete artifacts - CSS copied from Figma dev mode, screenshots, and folders of realistic dummy content/icons - rather than describing things purely in words, to get accurate first-pass output.
Leaving deliberate wiggle room - Brett varies how much creative latitude he gives Claude depending on his own certainty: tight, pixel-precise direction for details he already knows, open brainstorming prompts for features he's unsure about, always inviting Claude to flag missed edge cases.

Summary

Brett Williams, a longtime visual designer and the person behind DesignJoy, joins Dive Club host Rid to walk through how he went from actively resisting AI coding tools to shipping a fully realized Mac app, Gather, in roughly 100-150 hours over about two months. Brett had been vocal on X about protecting the craft of design and had only dabbled with Bolt and Lovable before dismissing the results as garbage. What changed was diving into Claude specifically about a month before this recording and discovering that, unlike his earlier text-to-app experiments, he could get precise, controllable output as long as he described what he wanted using real design vocabulary - strokes, gradients, opacity, trailing hover states.

The conversation centers on how Brett's workflow actually works: rather than starting in Figma, he prompted Claude directly to scaffold the app's architecture (auth, APIs, email, backend) before ever touching a design tool, working phase-by-phase and one UI element at a time to avoid the mess of one sweeping prompt. Figma only entered in the last 20% of the process - which, per a saying Brett cites, ate roughly 80% of his total time - mostly for isolated detail work like exporting CSS via dev mode to nail a gradient-stroke button. He was genuinely surprised how little Figma ended up mattering to the shipped product, a reversal he calls "not allowed" to say as a self-described "huge Figma guy."

Several recurring craft techniques come up: a custom "prototype MD" Claude skill Brett built that generates five distinct UI or interaction variants bundled into one clickable HTML file, letting him compare options before committing rather than accepting Claude's first pass; feeding Claude concrete reference material (exported CSS, screenshots, folders of realistic dummy content and icons) instead of relying purely on verbal description; and deliberately varying how much creative latitude he gives Claude depending on how confident he already is about a given decision. He also describes building a Chrome extension to capture X/Twitter bookmarks into Gather without using X's expensive official API - a case where Claude initially said a UI constraint (rounded corners in an extension) wasn't possible, until Brett pointed to a competing extension doing exactly that and Claude proposed an iframe-stacking workaround.

A recurring theme is taste as the real bottleneck once AI removes most technical friction. Brett describes the ease of adding any individual polish detail - sounds, hover animations, transitions - as dangerous in aggregate: each addition feels fun and cheap in isolation, but stacking too many can make a product feel "overcooked," a term he borrows from a tweet he keeps thinking about. He contrasts this with Eagle, a mature competing app he sees as having sprawled into feature bloat over years without editorial discipline. Brett argues that AI tools are "still not good at design" on their own but excellent at taking direction, which means the loudest online voices praising or fearing AI-for-design tend to lack real design judgment, while designers with taste are underrepresented in that conversation despite being positioned to benefit the most.

The episode closes on Brett's broader read of what this means for designers: less fear, more hope. He frames Claude less as a "prompt and generate" tool and more as "the most patient collaborator you could ever have" - one that builds at superhuman speed but still requires the operator to know what to build and how to direct it, down to the finest UI details. Notably, despite building a shipped product, Brett still doesn't use terminal commands or git directly; he describes everything in plain language and lets Claude translate it, which he says gave him a new appreciation for how much procedural knowledge developers carry that he'd never had to learn.

Notable Quotes

"I feel like these tools in the hand of someone with good taste and good judgment is just crazy." - Brett Williams

"It's like the last 20% of building an app with AI is like 80% of your time." - Brett Williams

"It's really difficult not to over-engineer... I still wanted this to feel very lightweight, very pleasant, not too much in the way." - Brett Williams

"AI is still not good at design, but it's good at taking direction. And as long as you can direct it clearly and you know what you're doing and you're making the right decisions... you can be good at directing AI, but you may be going down a bad road that isn't very tasteful." - Brett Williams

"It's like this... the most patient collaborator that you could ever have that builds at such hyper speeds that like humans could ever build at. And you just have to know how to direct it." - Brett Williams