UX-UI Conexión Creativa podcast

🧱 El Button con 17 props (y cómo evitarlo) | Cap 8 del libro

0:00
9:48
Reculer de 15 secondes
Avancer de 15 secondes

🧱 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 libro

Sarah 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 CSS
2. Props vs Slots: la decisión que ahorra horas de debate
3. Composición vs Configuración: el default que cambia todo
4. La evolución de un Button real: de v1 ingenua a v4 madura
5. Naming + defaults: las reglas que mantienen tu sistema sano

Má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ÍTULOS

00:00 — Música intro
00:06 — Cold open + Sarah cumple promesa AI vs humano
01:35 — Hook: la anécdota expandida
02:17 — Punto 1: Por qué la API > el CSS
03:10 — Punto 2: Props vs Slots
04:10 — Punto 3: Composición vs Configuración
05:24 — Punto 4: La evolución del Button (v1 → v4)
06:53 — Punto 5: Naming + defaults
07:49 — Resolución debate AI vs humano
08:30 — Regla de oro
08: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 MENCIONADO
Design 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 Figma
EP002: ⚡ Tokens W3C en 5 pasos como Apple, Adobe, GitHub

🚀 PRÓXIMO EPISODIO
Capítulo 9: Construyendo componentes reales. Atoms, molecules, organisms con código completo.

📺 CONTACTO
YouTube: @uxuiconexioncreativa

D'autres épisodes de "UX-UI Conexión Creativa"