Curso
Repeat
Módulo 03 · Design Systems
3.1 · ¿Cuándo construir un Design System?
01 / 16
Módulo 03 · Design Systems·16–18 min

¿CuándoconstruirunDesignSystem?

El error más caro del diseño moderno es confundir «sistema» con «valor». Cuándo NO construirlo, cuándo sí, y cómo cambia el cálculo con IA.

Caso realStartup · 8 personas · pre-PMF

DesignSystemimpecable.Cerousuariospagando.

200

componentes

3 meses

de equipo dedicado

0

usuarios al cerrar

Un Design System mal aplicado no es un ahorro. Es un suicidio financiero disfrazado de profesionalidad.

Un Design System es un lenguaje compartido.

Lo que NO es

UI Kit en Figma librería
Documentación en Notion manual
Componentes en Storybook código

Lo que SÍ es · 3 capas

Capa 01Filosofía

Reglas que rigen decisiones. «Mobile First», «Funcionalidad sobre estética»…

Capa 02Tokens

Valores primitivos y semánticos. Colores, tipos, espaciados.

Capa 03Componentes

Piezas reutilizables construidas sobre los tokens.

Si solo tiene la 3, no es sistema. Es librería de UI.

§01

Cuándo SÍ construirlo

4 señales que lo justifican.

Señal 01Discusiones triviales

Más de 1h/semana discutiendo color, radius, tamaño. El sistema sustituye discusiones por consultas.

Señal 02Inconsistencia visible

Botones primarios de 3 colores. No es problema de diseño, es de sistema.

Señal 03Retrabajo crónico

Dev pregunta lo mismo cada sprint. Cada pregunta es tiempo perdido.

Señal 04Múltiples productos · equipo >5

Varios productos compartiendo identidad o equipo de diseño grande. Sin sistema, caos.

1 señal = construir. 2 o más = urgente.

§02

Cuándo NO construirlo

Decir NO también es criterio de Senior.

No aúnProducto pre-PMF

Iteras radical. Un sistema rígido ata tus pies.

Lo que sí necesitas

Guía de estilo básica (4-6 colores, 2 tipos) + Figma simple.

No aún1–2 diseñadores · 1 producto

La comunicación informal es más rápida que mantener docs.

Lo que sí necesitas

Librería Figma con botones, inputs, cards. Sin docs obsesivas.

No aúnSin masa crítica

Sistema sin uso = código muerto que se desactualiza.

Lo que sí necesitas

¿Hay alguien dedicado ≥20% al mantenimiento? Si no, espera.

La ventana óptima

No copies a Shopify con 3 usuarios.
Tampoco esperes a tener 100.000.

Error 01

Construirlo en el mes 3.

Error 02

No construirlo en el mes 24.

§03

El cambio con IA

El DS dejó de ser coordinación humana. Ahora es guía de la IA.

Razonamiento clásico

«Construye DS solo si tienes equipo grande, varios productos y masa crítica que lo mantenga.»

Coste se amortiza con muchas personas usándolo

Razonamiento nuevo · con IA

Tu DS es la guía que Claude, Cursor, v0 o Lovable usan para construir tu producto exactamente como tú quieres.

Sin DS, la IA improvisa. Con DS, respeta tu marca.

Quién gana ahora con un DS bien hecho.

Freelancer solo
AntesExagerado
Ahora

Multiplicador para operar como agencia.

5 pantallas en una mañana

Indie hacker
AntesPostergable
Ahora

Atajo para no parecer indie.

Día 1 con look de gran empresa

Equipo 2–3
AntesAncla
Ahora

Brújula compartida humano + IA.

Coordinación → producción

Lo que cuenta como DS hoy

NonecesitasStorybookcon200componentes.

30–40tokens

bien nombrados

10–12componentes

principales con estados

1archivo JSON o doc

que la IA pueda leer como contexto

La pregunta nueva: ¿la IA es parte de mi flujo de producción? Si sí, tu necesidad de DS sube independientemente de cuánta gente seas.

§04

Construir o partir de existente

Construir desde cero ya no es la opción inteligente.

ShopifyPolaris

Estándar e-commerce y admin. Enfocado a conversión.

AtlassianAtlaskit

Herramientas empresariales densas, gestores de tareas.

IBMCarbon

B2B científicos / industriales. Densidad brutal.

LEGOs modernosMUI · Tailwind UI

Estructura técnica perfecta + tu capa de marca encima.

Por qué partir de ellas

Accesibilidad

A11y pulida durante años.

Por qué partir de ellas

Documentación

200 páginas que no tienes que escribir.

Por qué partir de ellas

Optimización IA

Claude y GPT las han leído millones de veces.

Ejercicio 3.1·Diagnóstico de tu producto

DecidesituproductonecesitaDShoy.Concriterio.

Toma tu producto o el de un cliente. Aplica el diagnóstico de 3 capas antes de tocar Figma.

01

Cuenta señales SÍ.

Discusiones triviales · inconsistencia visible · retrabajo · equipo >5. Cuántas tienes.

02

Cuenta señales NO.

Pre-PMF · equipo pequeño · sin mantenedor ≥20%. Si pesan más, espera.

03

Suma la pregunta IA.

¿La IA es parte de tu flujo de producción? Si sí, sube la urgencia un nivel.

04

Elige punto de partida.

Si construyes: parte de Polaris / Atlaskit / Carbon / MUI / Tailwind. No desde cero.

Próximo capítulo · 3.2

ArquitecturadeTokens.Lapiezamássubestimadadeldiseñomoderno.

Primitivos / Semánticos / ComponentesLas 4 cajitasCambias 1 línea, cambia toda la marca