How I AI

Brian Lovin is a designer at Notion AI who has transformed how the design team builds prototypes, by creating a shared code environment powered by Claude Code. Instead of designers working in isolated repositories or limited to static Figma designs, Brian built a collaborative “prototype playground” where the entire team can create, share, and iterate on functional prototypes. In this episode, Brian demonstrates how AI-assisted coding has dramatically accelerated the design process and why code-based prototyping is essential for building AI-powered products.

What you’ll learn:
How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team
Why encountering “reality” early in the design process leads to better products
How to use Claude Code’s “plan mode” to get better results when prototyping
The power of custom Claude slash commands and skills to automate repetitive tasks
How to transform Figma designs into working code with a single prompt
Why AI-powered products can’t be effectively designed in static tools like Figma
Brian’s rule for working with AI: “When Claude asks you to do something, teach it to do that thing itself”
—
Brought to you by:
WorkOS—Make your app enterprise-ready today
Orkes—The enterprise platform for reliable applications and agentic workflows
—
In this episode, we cover:
(00:00) Introduction to Brian
(02:36) Building for B2B SaaS
(04:42) Notion’s prototype playground: what it is and how it works
(08:01) The technical background of designers using the playground
(10:52) Demo: building a podcast player prototype
(16:00) Actionable tips for better Claude Code results
(20:16) Analyzing the result
(20:30) Creating slash commands to simplify the workflow
(23:03) Turning Figma designs into production-ready code
(25:06) MCP frustrations and tips
(30:54) Demo: creating a custom “find icon” skill
(35:03) Demo: Creating a deploy command to simplify GitHub workflows
(41:09) Quick recap
(41:59) How code-based prototyping is changing design at Notion
(46:48) Brian’s tool preferences
(48:42) Prompting techniques when AI is not listening
—
Tools referenced:
• Claude Code: https://claude.ai/
• Cursor: https://cursor.sh/
• Next.js: https://nextjs.org/
• Figma: https://figma.com/
• Monologue: https://www.monologue.to/
• GitHub: https://github.com/
• GitHub Desktop: https://desktop.github.com/
• Tailwind CSS: https://tailwindcss.com/
• Bun: https://bun.sh/
—
Other references:
• Claude Skills explained: How to create reusable AI workflows: https://www.lennysnewsletter.com/p/claude-skills-explained
—
Where to find Brian Lovin:
Website: https://brianlovin.com/
LinkedIn: linkedin.com/in/brianlovin
X: https://twitter.com/brian_lovin
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
X: https://x.com/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

Joe McCormick is a principal software engineer at Babylist who lost most of his central vision due to a rare genetic disorder right before starting college. He pivoted from mechanical engineering to computer science and now leads AI enablement at Babylist. Joe demonstrates how he uses AI to build micro Chrome extensions that make his everyday work and life more accessible, showing how personal software can address accessibility needs that mainstream products often overlook.

What you’ll learn:
How to build custom Chrome extensions in under 25 minutes using Claude Code
A practical workflow for creating AI-powered accessibility tools
How to use Claude Skills to accelerate repetitive development tasks
Techniques for making Claude Code more screen reader accessible
Why personal software is becoming increasingly viable with AI assistance
How multimodal AI is transforming accessibility for visually impaired users
—
Brought to you by:
Tines—Start building intelligent workflows today
—
Detailed workflow walkthroughs from this episode:
• How I AI: Building Custom AI Accessibility Tools for Slack with Joe McCormick & Claude Code: https://www.chatprd.ai/how-i-ai/custom-ai-accessibility-tools-for-slack-claude-code
• Build a Slack Link Summarizer from Scratch using Claude Code: https://www.chatprd.ai/how-i-ai/workflows/slack-link-summarizer-using-claude-code
• Create a Fast, Accessible AI Spell Checker for Any Website: https://www.chatprd.ai/how-i-ai/workflows/accessible-ai-spell-checker-for-any-website
• Build a Custom AI Tool to Describe Images in Slack: https://www.chatprd.ai/how-i-ai/workflows/ai-tool-to-describe-images-in-slack
—
In this episode, we cover:
(00:00) Introduction to Joe and his background
(02:34) Joe’s journey into computer science after vision loss
(04:50) The concept of personal software for accessibility
(06:09) Demo of image description Chrome extension for Slack
(10:40) Demo of AI-powered spell checker extension
(13:12) The efficiency of keyboard shortcuts for accessibility
(14:37) Live building a link summarization extension
(20:28) Using Claude Skills to extract common patterns
(25:30) Reviewing and modifying the development plan
(27:45) Removing cognitive friction for users through repeating patterns
(31:40) How to get fluent with AI tools
(34:55) Loading the extension into Chrome in developer mode
(36:19) Testing and debugging the extension
(40:44) Quick recap
(42:12) Lightning round and final thoughts
—
Tools referenced:
• Claude Code: https://claude.ai/code
• VS Code: https://code.visualstudio.com/
• Gemini: https://gemini.google.com/
• ChatGPT: https://chat.openai.com/
• Meta Ray-Ban Smart Glasses: https://www.meta.com/smart-glasses/
—
Other references:
• Chrome Extensions Documentation: https://developer.chrome.com/docs/extensions/
• ARIA (Accessible Rich Internet Applications): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• Windows Subsystem for Linux: https://learn.microsoft.com/en-us/windows/wsl/
• Screen Readers: https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers
• Claude Skills explained: How to create reusable AI workflows:https://www.lennysnewsletter.com/p/claude-skills-explained
—
Where to find Joe McCormick:
LinkedIn: https://www.linkedin.com/in/joemccormickjr/
Company: https://www.babylist.com/
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
X: https://x.com/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

I put the newest AI coding models from OpenAI and Anthropic head-to-head, testing them on real engineering work I’m actually doing. I compare GPT-5.3 Codex with Opus 4.6 (and Opus 4.6 Fast) by asking them to redesign my marketing website and refactor some genuinely gnarly components. Through side-by-side experiments, I break down where each model shines—creative development versus code review—and share how I’m thinking about combining them to build a more effective AI engineering stack.
—
What you’ll learn:
The strengths and weaknesses of OpenAI’s Codex vs. Anthropic’s Opus for different coding tasks
How I shipped 44 PRs containing 98 commits across 1,088 files in just five days using these models
Why Codex excels at code review but struggles with creative, greenfield work
The surprising way Opus and Codex complement each other in a real-world engineering workflow
How to use Git concepts like work trees to maximize productivity with AI coding assistants
Why Opus 4.6 Fast might be worth the 6x price increase (but be careful with your token budget)
—
Brought to you by:
WorkOS—Make your app enterprise-ready today
—
Detailed workflow walkthroughs from this episode:
• How I AI: GPT-5.3 Codex vs. Claude Opus 4.6—Shipping 44 PRs in 5 Days: https://www.chatprd.ai/how-i-ai/gpt-5-3-codex-vs-claude-opus-4-6
• How to Combine Claude Opus and GPT-5.3 Codex for High-Velocity Code Refactoring: https://www.chatprd.ai/how-i-ai/workflows/how-to-combine-claude-opus-and-gpt-5-3-codex-for-high-velocity-code-refactoring
• How to Redesign a Marketing Website Using Claude Opus 4.6 for Creative Development: https://www.chatprd.ai/how-i-ai/workflows/how-to-redesign-a-marketing-website-using-claude-opus-4-6-for-creative-development
—
In this episode, we cover:
(00:00) Introduction to new AI coding models
(02:13) My test methodology for comparing models
(03:30) Codex’s unique features: Git primitives, skills, and automations
(09:05) Testing GPT-5.2 Codex on a website redesign task
(10:40) Challenges with Codex’s literal interpretation of prompts
(15:00) Comparing the before and after with Codex
(16:23) Testing Opus 4.6 on the same website redesign task
(20:56) Comparing the visual results of both models
(21:30) Real-world engineering impact: 44 PRs in five days
(23:03) Refactoring components with Opus 4.6
(24:30) Using Codex for code review and architectural analysis
(26:55) Cost considerations for Opus 4.6 Fast
(28:52) Conclusion
—
Tools referenced:
• OpenAI’s GPT-5.3 Codex: https://openai.com/index/introducing-gpt-5-3-codex/
• Anthropic’s Claude Opus 4.6: https://www.anthropic.com/news/claude-opus-4-6
• Cursor: https://cursor.sh/
• GitHub: https://github.com/
—
Other references:
• Tailwind CSS: https://tailwindcss.com/
• Git: https://git-scm.com/
• Bugbot: https://cursor.com/bugbot
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
X: https://x.com/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

CJ Hess is a software engineer at Tenex who has built some of the most useful tools and workflows for being a “real AI engineer.” In this episode, CJ demonstrates his custom-built tool, Flowy, that transforms Claude’s ASCII diagrams into interactive visual mockups and flowcharts. He also shares his process for using model-to-model comparison to ensure that his AI-generated code is high-quality, and why he believes we’re just at the beginning of a revolution in how developers interact with AI.

What you’ll learn:
How CJ built Flowy, a custom visual planning tool that converts JSON files into interactive mockups and flowcharts
Why visual planning tools are more effective than ASCII diagrams for complex UI and animation workflows
How to create and use Claude Code skills to extend your development environment
Using model-to-model comparison (Claude + Codex) to improve code quality
How to build your own ecosystem of tools around Claude Code
The value of bypassing permissions in controlled environments to speed up development
—
Brought to you by:
Orkes—The enterprise platform for reliable applications and agentic workflows
Rovo—AI that knows your business
—
Detailed workflow walkthroughs from this episode:
• How I AI: CJ Hess on Building Custom Dev Tools and Model-vs-Model Code Reviews: https://www.chatprd.ai/how-i-ai/cj-hess-tenex-custom-dev-tools-and-model-vs-model-code-reviews
• Implement Model-vs-Model AI Code Reviews for Quality Control: https://www.chatprd.ai/how-i-ai/workflows/implement-model-vs-model-ai-code-reviews-for-quality-control
• Develop Features with AI Using Custom Visual Planning Tools: https://www.chatprd.ai/how-i-ai/workflows/develop-features-with-ai-using-custom-visual-planning-tools
—
In this episode, we cover:
(00:00) Introduction to CJ Hess
(02:48) Why CJ prefers Claude Code for development
(04:46) The evolution of developer environments with AI
(06:50) Planning workflows and the limitations of ASCII diagrams
(08:23) Introduction to Flowy, CJ’s custom visualization tool
(11:54) How Flowy compares to mermaid diagrams
(15:25) Demo: Using Flowy
(19:30) Examining Flowy’s skill structure
(23:27) Reviewing the generated flowcharts and diagrams
(28:34) The cognitive benefits of visual planning vs. text-based planning
(31:38) Generating UI mockups with Flowy
(33:30) Building the feature directly from flowcharts and mockups
(35:40) Quick recap
(36:51) Using model-to-model review with Codex (Carl)
(41:52) The benefits of using AI for code review
(45:13) Lightning round and final thoughts
—
Tools referenced:
• Claude Code: https://claude.ai/code
• Claude Opus 4.5: https://www.anthropic.com/news/claude-opus-4-5
• Cursor: https://cursor.sh/
• Obsidian: https://obsidian.md/
• GPT-5.2 Codex: https://openai.com/index/introducing-gpt-5-2-codex/
• Google’s Project Genie: https://labs.google/projectgenie
—
Other references:
• Mermaid diagrams: https://mermaid.js.org/
• Figma: https://www.figma.com/
• Excalidraw: https://excalidraw.com/
• TypeScript: https://www.typescriptlang.org/
—
Where to find CJ Hess:
LinkedIn: https://www.linkedin.com/in/cj-hess-connexwork/
X: https://x.com/seejayhess
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
X: https://x.com/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].

Guillermo Rauch, the CEO of Vercel, demonstrates how v0 has evolved from a simple prototyping tool to a complete development environment that supports the entire Git workflow. Guillermo shows how Vercel built skills.sh—a viral marketplace with over 34,000 community-submitted skills—using v0, and how the tool enables non-technical team members to contribute production-ready code changes. He walks through creating branches, implementing features, previewing changes, and submitting pull requests, all within v0.

What you’ll learn:
How v0’s new Git workflow integration enables anyone to contribute production-ready code changes
Why skills.sh became a viral hub for AI skills, with 500 new submissions per hour
How to implement features in v0 that consider production concerns like abuse prevention and rate limiting
The benefits of branch previews for testing changes in a production-like environment before merging
How v0 eliminates development environment setup challenges for non-technical team members
Why the “terminal core” design aesthetic became central to skills.sh’s interface
How Vercel uses v0 internally to democratize code contributions across teams
The future of AI at Vercel, including upcoming tools for text-to-SVG and video generation
—
In this episode, we cover:
(00:00) Introduction
(01:22) Overview of skills.sh
(04:40) Demonstration of v0’s GitHub integration and branch creation
(06:40) Exploring the v0 development environment
(09:05)  Building a rating system feature for skills.sh
(11:18) Testing the new feature in the preview environment
(13:20) Creating a pull request and deploying to a preview environment
(15:25) How Vercel is using v0 internally for production work
(17:48) Organizational adoption and cultural impact
(22:04) Favorite non-coding AI use cases
(25:17) AI-powered chess game built with v0
(27:57) Teaching kids about coding with AI
(31:44) Troubleshooting techniques when AI gets stuck
(34:43) Final thoughts and audience Q&A
—
Tools referenced:
• v0: https://v0.dev/
• Skills by Vercel: https://skills.sh/vercel
• Vercel: https://vercel.com/
• GitHub: https://github.com/
• Nano Banana: https://gemini.google/overview/image-generation/
• Vestaboard: https://vestaboard.com/
—
Other references:
• v0 Chess Match: https://v0-chess-match.app/
• React Native: https://reactnative.dev/
—
Where to find Guillermo Rauch:
LinkedIn: linkedin.com/in/rauchg
X: https://twitter.com/rauchg
—
Where to find Claire Vo:
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
X: https://x.com/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].