Feb 22
Loading video player...
Your product has components everywhere, buttons, modals, cards, form inputs, but no one knows exactly what exists or where it lives. Every time someone needs a component, they either build it from scratch or dig through the codebase hoping to find something close enough. A component library fixes that. But building one from scratch feels like a massive rework, especially when you already have working components scattered across your code. In this video, I use Claude Code and Storybook to audit Cal.com's open-source codebase, document every component, and start building a real component library in a single day. What You'll Learn: • How to use Claude Code to scan and audit an entire codebase for components • Breaking components down by global vs. page-specific views • How to drill into a specific page and map out every component it uses • Building Storybook stories with all variants and states from existing code • A repeatable workflow you can use to knock out your core library component by component Resources: • Storybook Documentation: https://storybook.js.org/docs • Claude Code Documentation: https://code.claude.com/docs • Cal.com Open Source Repo: https://github.com/calcom/cal.com Need help implementing AI workflows for your product team? 👉 Get started with 15% off your first month when you mention this YouTube video. https://designproject.io/ Watch more like this: • Stop using V0 and Lovable to prototype, use Claude Code instead: https://youtu.be/hqIU6hluMZA?si=owf3lb95d4xMWrsm • I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): https://youtu.be/nafNPuElCtY • Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes: https://youtu.be/BOl05zmQjOg • The Complete AI Product Stack (8 Weeks to 2 Weeks Per Feature): https://youtu.be/COgy_e-w8ww • Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: https://youtu.be/AiEATeNyWnk?si=5T6SQR2CGdZUl0a2 🔔 Subscribe for weekly insights about AI, design, and product here: @thedesignproject CONNECT WITH ME: 🌐 https://designproject.io/ 💼 LinkedIn: /diannealter About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.