Storybook 2077 - Shipping a Design System in the Days of AI

Transcript

1. Storybook 2077 Shipping a Design System in the Days of AI Luís von Rondow
2. senior software engineer at Liminal organizer of Frontend.OPO whoami
3. vibe coding is killing design
6. visual identity is the key to success
7. clear pleasant unique
9. everything starts with an atom
11. the design system is the set of atoms for structuring your product's branding
12. developers & designers love it!
13. anatomy of a DS
14. in a frontend perspective...
16. tokens
17. components
18. patterns
19. patterns
20. docs
21. tests
22. let's build our own DS! with an AI-native toolchain
23. Shadcn headless primitives with Tailwind
25. Cursor - Agent mode - Custom rules - Shadcn MCP
26. Agent mode - Autonomous task completion - Multi-file editing - Terminal access - Full project context - Proactive vs. reactive
27. Custom rules "Persistent instructions that you define for the Ai to follow every time it edit or interacts with your code" - Steve Kinney User based ≠ Project Based
28. Model Context Protocol TL;DR: It's like APIs for LLMs source: MCP: What It Is and Why It Matters (https://addyo.substack.com/p/mcp-what-it-is-and-why-it-matters)
30. For the project bootstrap… pnpm dlx create-vite@latest dx-frontend-day-ds
31. pnpm create storybook@latest ✔ New to Storybook? › No: Skip onboarding & don't ask again ✔ What configuration should we install? › Recommended: Component dev, docs, test It's going to add: + @chromatic-com/storybook 4.1.1 + @storybook/addon-docs 9.1.15 + @storybook/react-vite 9.1.15 + eslint-plugin-storybook 9.1.15 + storybook 9.1.15 + @storybook/addon-a11y 9.1.15 + @storybook/addon-vitest 9.1.15 + @vitest/browser-playwright 4.0.3 + @vitest/coverage-v8 4.0.3 + playwright 1.56.1 + vitest 4.0.3
32. pnpm add tailwindcss @tailwindcss/vite // replace all `src/index.css` content for @import "tailwindcss"; // and config your alias in `tsconfig.ts`, `tsconfig.app.json` and `vite.config.ts` pnpm dlx shadcn@latest init
34. demo time 👀
35. AI can accelerate all product flow
37. Thank you! rondow.dev