🧱 El Button con 17 props (y cómo evitarlo) | Capítulo 8 del libroSarah cumple su segunda promesa: ¿la AI hace componentes mejor que un humano? Spoiler: depende de qué versión del Button hablemos.Hoy nos vamos al capítulo 8 del libro "Construye tu Design System": Arquitectura de componentes y diseño de API.🧱 El Button con 17 props (y cómo evitarlo) | Capítulo 8 del libroSarah cumple su segunda promesa: ¿la AI hace componentes mejor que un humano? Spoiler: depende de qué versión del Button hablemos.Hoy nos vamos al capítulo 8 del libro "Construye tu Design System": Arquitectura de componentes y diseño de API. Si estás empezando con design systems, escúchanos desde el episodio 1 — esto es como una clase entera siguiendo el libro.5 puntos del capítulo:1. Por qué la API de un componente importa más que su CSS2. Props vs Slots: la decisión que ahorra horas de debate3. Composición vs Configuración: el default que cambia todo4. La evolución de un Button real: de v1 ingenua a v4 madura5. Naming + defaults: las reglas que mantienen tu sistema sanoMás una historia real del libro: una empresa de educación online con 5 años en producción y un Button con 17 props acumuladas. De 200+ combinaciones posibles, solo 22 aparecían en código. La diseñadora nueva entró el primer día y propuso bajar a 5 props. Refactor radical.📍 CAPÍTULOS00:00 — Música intro00:06 — Cold open + Sarah cumple promesa AI vs humano01:35 — Hook: la anécdota expandida02:17 — Punto 1: Por qué la API > el CSS03:10 — Punto 2: Props vs Slots04:10 — Punto 3: Composición vs Configuración05:24 — Punto 4: La evolución del Button (v1 → v4)06:53 — Punto 5: Naming + defaults07:49 — Resolución debate AI vs humano08:30 — Regla de oro08:54 — Outro y próximo episodio📚 LIBRO"Construye tu Design System" en Amazon Kindle:https://tinyurl.com/4a7z36db(Capítulo 8 completo con código y los 4 Buttons evolucionados)🔌 PLUGIN MENCIONADODesign System Sync (free tier 5 exports, Pro $10/mes con AI Code Generation):https://ds-sync.netlify.app🎧 EPISODIOS ANTERIORES (escúchalos en orden si vienes nuevo)EP001: 🎨 Los 7 errores que matan tu Design System en FigmaEP002: ⚡ Tokens W3C en 5 pasos como Apple, Adobe, GitHub🚀 PRÓXIMO EPISODIOCapítulo 9: Construyendo componentes reales. Atoms, molecules, organisms con código completo.📺 CONTACTOYouTube: @uxuiconexioncreativa

Ask this episode

“What did the council decide on item 42?” — answered with the speaker and the moment.

Transcript

Related