Desarrollo on Fernando Ruiz

Claude Code Skills: La Capa Profesional que la Mayoría Ignora

Thu, 19 Mar 2026 00:00:00 +0000

Ya estás en Claude Code. Conoces lo básico. Has visto lo que puede hacer. Pero cada nueva sesión empieza igual: los primeros cinco minutos los pasas reexplicando tu contexto, reescribiendo los prompts que has escrito cien veces, y reestableciendo las reglas del juego antes de que empiece el trabajo real.

Esa fricción no es un problema de Claude. Es un problema de infraestructura. Y la solución es una funcionalidad que la mayoría de los usuarios pasa de largo: los Skills.

Vibe Coding: Lo que la IA No te Va a Decir Antes de Construir tu Primera App

Sun, 15 Mar 2026 00:00:00 +0000

Hay una conversación que ocurre miles de veces al día alrededor del mundo. Va más o menos así:

“Hola Claude, necesito que me hagas una aplicación tipo YouTube pero sin errores.”

Y la [[IA]] responde feliz, genera código, y el usuario piensa que acaba de contratar un equipo de ingenieros por 20 dólares al mes. Tres semanas después, la aplicación tiene 47 bugs, nadie sabe por qué el login falla los martes y el creador no puede cambiar el color de un botón sin romper el sistema de pagos.

Spec-Driven Development: El fin del Vibe Coding amateur y el inicio de la ingeniería de sistemas para UX

Tue, 10 Mar 2026 00:00:00 +0000

El concepto de [[Vibe Coding]] es atractivo. Escribes en lenguaje natural, la IA escupe código, y en minutos tienes un prototipo. Funciona perfecto si estás haciendo un script de 100 líneas. Si intentas escalar eso a un producto real, el sistema colapsa.

Me reuní con Ryan Edge para desglosar exactamente cómo está utilizando agentes de [[IA]] para construir software complejo. El consenso es claro: depender de interfaces de chat para programar tiene un techo de cristal. Pierdes el contexto, la IA alucina, sobrescribe lógica existente y terminas haciendo trabajo manual para corregir a un robot.

Actualizaciones Optimistas y UX de Rollback

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Actualizaciones Optimistas son una técnica de diseño de interacción donde la interfaz del usuario se actualiza inmediatamente tras una acción (como dar un “Like” o enviar un mensaje), asumiendo que el servidor procesará la petición con éxito, sin esperar a su respuesta real. El Rollback es el proceso de revertir ese cambio visual si la petición acaba fallando.

El Secreto de la Velocidad en Apps Modernas

Imagina que pulsas el botón de “Me gusta” en Instagram. Si el icono de corazón no se iluminara de rojo hasta que el servidor devuelva un “OK”, la aplicación se sentiría lenta y pesada.

Actualizaciones Optimistas y UX de Rollback

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Secreto de la Velocidad en Apps Modernas

Imagina que pulsas el botón de “Me gusta” en Instagram. Si el icono de corazón no se iluminara de rojo hasta que el servidor devuelva un “OK”, la aplicación se sentiría lenta y pesada.

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El HTML Semántico utiliza las etiquetas nativas del navegador (como <button>, <input>, <nav>) que ya traen accesibilidad y comportamiento integrados. ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que se añaden al código para “parchear” o explicar elementos personalizados que el navegador no entiende por defecto.

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

Arquitectura de Tokens (Global vs Semántico vs Componente)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La arquitectura de tokens de diseño es la estructura lógica que organiza las decisiones de diseño (colores, tipografía, espaciado) en capas de abstracción. Un modelo bien diseñado permite cambiar la apariencia de todo un producto en minutos, garantizando coherencia y escalabilidad entre diseño y código.

¿Qué es la Arquitectura de Tokens?

Imagina que estás construyendo una ciudad. No quieres tener que pintar cada ladrillo de cada casa individualmente. En su lugar, defines una “paleta de materiales” (tokens globales), decides que todos los edificios públicos serán de “color institucional” (tokens semánticos) y finalmente aplicas ese color a la “puerta principal del ayuntamiento” (tokens de componente).

Arquitectura de Tokens (Global vs Semántico vs Componente)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Arquitectura de Tokens?

Breakpoint VS Container Queries: Diseño Basado en Componentes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Breakpoints (Media Queries) cambian el diseño basándose en el ancho total de la pantalla del dispositivo (Viewport). Las Container Queries cambian el diseño basándose en el espacio que tiene disponible el componente dentro de su contenedor padre.

El Cambio de Paradigma en el Diseño de Producto

Durante la última década, hemos diseñado “pantallas”: móvil, tablet y escritorio. Sin embargo, en un sistema de diseño moderno, diseñamos componentes que habitan en diferentes lugares. Un mismo componente de “Tarjeta de Producto” puede aparecer en una rejilla de 3 columnas en la página principal, o en una sola columna estrecha en una barra lateral.

Breakpoint VS Container Queries: Diseño Basado en Componentes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Cambio de Paradigma en el Diseño de Producto

Comportamiento de Intrinsic Sizing en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Intrinsic Sizing es un comportamiento de diseño donde las dimensiones de un elemento (ancho o alto) son determinadas por su propio contenido (letras, imágenes, iconos) en lugar de ser forzadas por un contenedor externo con medidas fijas.

¿Qué es el Dimensionamiento Intrínseco?

Imagina que quieres meter camisas en una maleta.

Extrinsic Sizing (Extrínseco): La maleta tiene un tamaño fijo de 50x40 cm. No importa si metes 1 camisa o 20, la maleta mide lo mismo.
Intrinsic Sizing (Intrínseco): La maleta es de tela elástica y se ajusta exactamente al volumen de las camisas que metas. Si metes una camisa, es pequeña; si metes 20, se estira.

En UI, esto significa que un botón no mide “200px”, sino que mide Ancho del Texto + Paddings laterales. Si el texto cambia de “OK” a “Cancelar suscripción”, el botón se ensancha automáticamente.

Comportamiento de Intrinsic Sizing en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Dimensionamiento Intrínseco?

Imagina que quieres meter camisas en una maleta.

Extrinsic Sizing (Extrínseco): La maleta tiene un tamaño fijo de 50x40 cm. No importa si metes 1 camisa o 20, la maleta mide lo mismo.
Intrinsic Sizing (Intrínseco): La maleta es de tela elástica y se ajusta exactamente al volumen de las camisas que metas. Si metes una camisa, es pequeña; si metes 20, se estira.

Conciencia de Estado (State Awareness) en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Conciencia de Estado (State Awareness) es la capacidad de una interfaz para comunicar de forma clara y continua qué está ocurriendo en el sistema, en qué paso del proceso se encuentra el usuario y cuál es la condición actual de cada componente (ej. si un botón está pulsado, si un dato se está cargando o si hay un error).

¿Por qué el Usuario necesita Conciencia de Estado?

Como seres humanos, odiamos la incertidumbre. En el mundo físico, si pulsas un interruptor y la luz no se enciende, sabes que hay un fallo porque el interruptor cambió de posición físicamente. En el mundo digital, si un usuario pulsa un botón y no pasa nada visualmente en los primeros milisegundos, el usuario pulsará el botón 5 veces más, generando errores en el servidor y frustración.

Conciencia de Estado (State Awareness) en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Usuario necesita Conciencia de Estado?

Decisiones de Intrinsic Layout: Contenido VS Cajas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Decisiones de Intrinsic Layout son las reglas de diseño que definen cómo se posicionan y escalan los elementos de una interfaz basándose en las necesidades de su propio contenido (como el ancho del texto o el tamaño de la imagen) en lugar de ser forzados por una rejilla externa (Layout Grid).

¿Por qué el Intrinsic Layout es la mejor opción para productos dinámicos?

Históricamente, diseñamos webs con rejillas de 12 columnas. Es un sistema seguro y predecible, pero frágil. Si un nombre de usuario es demasiado largo, el diseño de la rejilla se rompe o el texto se corta.

Decisiones de Intrinsic Layout: Contenido VS Cajas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Intrinsic Layout es la mejor opción para productos dinámicos?

Decisiones de Layout: Grid vs Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Layout Grids son rejillas predefinidas que fuerzan los elementos a seguir una estructura rígida de columnas y distancias específicas. El Intrinsic Layout es un enfoque donde el tamaño y la posición de los elementos dependen de su contenido y su relación interna, sin depender de una cuadrícula externa.

El Dilema del Layout Moderno

En la web de principios de la década de 2010, todo se basaba en rejillas de 12 columnas. Hoy, gracias a las capacidades de Figma (Auto Layout) y de los navegadores modernos (Flexbox/CSS Grid), el diseño se está volviendo más fluido y menos dependiente de estas estructuras fijas. La pregunta clave es: ¿Cuándo debemos forzar la rejilla y cuándo debemos dejar que el contenido mande sobre el espacio?

Decisiones de Layout: Grid vs Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Dilema del Layout Moderno

Diseño de APIs de Componentes: Predictibilidad y Flexibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El diseño de una API de Componentes consiste en definir un contrato claro de entrada (props) y comportamiento para los elementos de un sistema de diseño, con el objetivo de que sean fáciles de usar, predecibles y mantenibles tanto para diseñadores como para desarrolladores.

¿Qué Compone una Buena API de Componentes?

Un componente no es solo una pieza visual; es una unidad de lógica funcional. Una API bien diseñada debe responder de forma clara a estas tres premisas fundamentales:

Diseño de APIs de Componentes: Predictibilidad y Flexibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué Compone una Buena API de Componentes?

Un componente no es solo una pieza visual; es una unidad de lógica funcional. Una API bien diseñada debe responder de forma clara a estas tres premisas fundamentales:

Diseño para el Rendimiento Percibido: Más Rápido que la Luz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Rendimiento Percibido es el tiempo que un usuario siente que tarda un sistema en responder, independientemente de la velocidad real (milisegundos) de la conexión o el procesador. En el diseño de producto, la percepción es la realidad.

¿Por qué importa el Rendimiento Percibido?

Podemos tener la aplicación mejor optimizada del mundo, pero si el usuario se queda mirando una pantalla en blanco durante 2 segundos, pensará que la app es lenta.

Diseño para el Rendimiento Percibido: Más Rápido que la Luz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué importa el Rendimiento Percibido?

Podemos tener la aplicación mejor optimizada del mundo, pero si el usuario se queda mirando una pantalla en blanco durante 2 segundos, pensará que la app es lenta.

El Command Pattern en el Diseño de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Command Pattern es un patrón de diseño de software que encapsula una solicitud o acción del usuario como un objeto independiente. En el mundo del diseño de producto, esto nos permite tratar cada acción (borrar, mover, editar, cambiar color) como una entidad que se puede almacenar, deshacer, rehacer y sincronizar a través de varios usuarios.

¿Por qué el Diseñador debe Conocer el Command Pattern?

Tradicionalmente, el diseño se centraba en el estado final de las pantallas (la foto fija). Sin embargo, los productos modernos (como Figma, Notion o Google Docs) se centran en las acciones que llevan de un estado a otro. El Command Pattern es el lenguaje técnico que permite que estas transiciones sean posibles.

El Command Pattern en el Diseño de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer el Command Pattern?

Estados de Carga: La Espera Indulgente en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Estado de Carga (Loading State) es la información visual o sonora que se muestra al usuario mientras el sistema procesa una acción (ej. cargar datos de un servidor, subir un archivo o realizar una búsqueda). Un buen diseño de carga elimina el miedo al “sistema congelado”.

¿Por qué el Estado de Carga es Crítico?

El momento en que un usuario pulsa un botón y espera una respuesta es el momento de mayor vulnerabilidad y posible frustración. Sin un estado de carga claro, el usuario no sabe si:

Estados de Carga: La Espera Indulgente en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Estado de Carga es Crítico?

El momento en que un usuario pulsa un botón y espera una respuesta es el momento de mayor vulnerabilidad y posible frustración. Sin un estado de carga claro, el usuario no sabe si:

Estrategia de Aliasing y Herencia de Tokens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Aliasing de tokens consiste en definir un token que hace referencia a otro token en lugar de a un valor bruto (como un hexadecimal o píxeles). La Herencia es la estructura lógica que permite que las decisiones de diseño fluyan de lo más general a lo más específico, garantizando coherencia y flexibilidad total en el sistema.

¿Qué es el Aliasing de Tokens?

Imagina que quieres comprar un coche de “Color Deportivo”.

Estrategia de Aliasing y Herencia de Tokens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Aliasing de Tokens?

Imagina que quieres comprar un coche de “Color Deportivo”.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Tab Order es la secuencia exacta en la que un usuario de teclado (pulsando Tab y Shift + Tab) recorre los elementos interactivos de una interfaz. Una buena estrategia de tabulación asegura que el usuario no se pierda, no tenga que dar clics innecesarios y pueda completar sus tareas de forma rápida y lógica.

¿Por qué el Diseñador debe Decidir el Tab Order?

Aunque el orden de tabulación suele ser una consecuencia automática del orden en el código HTML (el DOM), el diseño visual puede ser mucho más complejo. Como diseñadores, a veces creamos layouts con columnas, rejillas (grids) o elementos flotantes que no siguen un orden lineal puro.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Decidir el Tab Order?

Estrategias de Escalado Responsivo: UI Líquida

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Estrategias de Escalado Responsivo definen cómo se comportan los elementos de una interfaz cuando el espacio disponible cambia. No es solo redimensionar cajas, sino decidir qué elementos crecen, cuáles se apilan, cuáles desaparecen y cuáles mantienen su tamaño original para garantizar la usabilidad en cualquier dispositivo.

El Reto de las Pantallas Infinitas

Hoy en día, diseñamos para un reloj inteligente (Apple Watch) de 30mm y para un monitor curvo de 49 pulgadas. No podemos diseñar una pantalla para cada ancho. Necesitamos una Estrategia de Escalado que sea líquida y resiliente.

Estrategias de Escalado Responsivo: UI Líquida

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Reto de las Pantallas Infinitas

Flujos Offline-First: Diseñar para la Desconexión

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La estrategia Offline-First es un enfoque de diseño y desarrollo que asume que el usuario tendrá una conexión a internet intermitente o nula en algún momento. En lugar de tratar el “Offline” como un estado de error, se trata como una característica fundamental del producto. El objetivo es que la aplicación siga funcionando siempre.

El Reto de las Aplicaciones de Producto Modernas

La mayoría de las apps web tradicionales (como Jira o Gmail) suelen romperse o mostrar un dinosaurio de Chrome cuando el Wifi se corta. En el diseño de productos digitales avanzado, como Notion, Figma o Linear, esto ya no es aceptable.

Flujos Offline-First: Diseñar para la Desconexión

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Reto de las Aplicaciones de Producto Modernas

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Accessibility Tree (Árbol de Accesibilidad) es una estructura de datos generada por el navegador (basada en el DOM) que contiene solo la información relevante para las tecnologías asistivas (como lectores de pantalla o dictado por voz). No es visual; es una traducción de tu diseño en nombres, roles, estados y valores.

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Como diseñadores, solemos centrarnos en el DOM Visual (colores, formas, posiciones). Sin embargo, para los usuarios ciegos o con discapacidad visual, tu diseño es solo lo que el Árbol de Accesibilidad dice que es.

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Gestión de Foco es el control de qué elemento de la interfaz está seleccionado en cada momento para interactuar con él. Es la columna vertebral de la navegación para usuarios de teclado (que pulsan Tab), lectores de pantalla y cualquier persona que no use un ratón.

¿Por qué el Diseñador debe Gestionar el Foco?

Imagina que entras en una habitación a oscuras y solo tienes una linterna. La zona que ilumina tu linterna es “el foco”. Si mueves la linterna y, de repente, la luz desaparece o salta a la habitación de al lado sin sentido, te sentirás perdido y frustrado.

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Gestionar el Foco?

Jerarquía Visual VS Jerarquía del DOM: Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Jerarquía Visual es el orden en que un usuario ve y procesa la información en una pantalla basándose en el tamaño, color, posición y contraste. La Jerarquía del DOM (Document Object Model) es el orden en que el código HTML estructura y lee esa misma información. Alinear ambas es la clave de la accesibilidad y el SEO.

¿Por qué el Diseñador debe Conocer la Jerarquía del DOM?

Como diseñadores, solemos “dibujar” elementos en el lienzo de Figma sin preocuparnos de su orden interno. Sin embargo, para un usuario de Lector de Pantalla o de Teclado, tu diseño no es una imagen; es una lista secuencial de elementos.

Jerarquía Visual VS Jerarquía del DOM: Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer la Jerarquía del DOM?

Organización de Props de Componentes: Estructura y Jerarquía

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Organización de Props consiste en estructurar y priorizar las propiedades de un componente para que su uso sea intuitivo y predecible. Esto reduce la carga cognitiva de los diseñadores en Figma y de los desarrolladores en el código, facilitando la creación de interfaces consistentes.

¿Por qué importa el orden de las Props?

Imagina un componente complejo (ej. un Input con etiqueta, icono, mensaje de error y ayuda). Si las propiedades de configuración están desordenadas, el usuario del sistema de diseño (el diseñador o el desarrollador) perderá tiempo buscando cómo cambiar el color del icono o el tamaño del texto.

Organización de Props de Componentes: Estructura y Jerarquía

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué importa el orden de las Props?

Paridad de Tokens en Múltiples Plataformas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La paridad de tokens asegura que las decisiones de diseño se traduzcan de manera idéntica y precisa a través de diferentes plataformas (Web, iOS, Android, Desktop) utilizando un único sistema de origen. Esto elimina inconsistencias visuales y reduce significativamente el esfuerzo de QA.

El Desafío de la Fragmentación de Plataformas

Cada ecosistema tecnológico maneja los estilos (colores, fuentes, sombras) de forma única. Si un diseñador elige un “Azul Primario”, se enfrenta a:

Paridad de Tokens en Múltiples Plataformas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Desafío de la Fragmentación de Plataformas

Cada ecosistema tecnológico maneja los estilos (colores, fuentes, sombras) de forma única. Si un diseñador elige un “Azul Primario”, se enfrenta a:

Presupuestos de Latencia en UX: Tiempos de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Presupuesto de Latencia (Latency Budget) es el tiempo máximo permitido (en milisegundos) para que una acción del usuario produzca una respuesta visible en la interfaz. No es una métrica técnica; es un compromiso de diseño para garantizar la fluidez de la experiencia.

¿Por qué el Diseñador debe establecer Presupuestos de Latencia?

A menudo, los diseñadores crean flujos complejos e interacciones pesadas sin considerar el coste técnico. Si una animación de apertura de un menú tarda 500ms y el servidor otros 1000ms en devolver los datos, el usuario sentirá que la aplicación es una barca pesada.

Presupuestos de Latencia en UX: Tiempos de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe establecer Presupuestos de Latencia?

Skeleton VS Optimistic UI: Estrategias de Carga

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Skeleton Screens (Pantallas de Esqueleto) son marcadores de posición grises que imitan la estructura final de la página mientras se cargan los datos. La Optimistic UI (Interfaz Optimista) es una técnica que muestra el resultado de una acción inmediatamente, asumiendo que el servidor responderá con éxito.

El Arte de la Espera: Rendimiento Percibido

En el diseño de producto moderno, la velocidad no es solo una cuestión de milisegundos reales (latencia), sino de cómo el usuario siente que el sistema está respondiendo. Ambas técnicas buscan reducir la ansiedad del usuario durante la carga, pero se aplican en momentos diferentes del flujo.

Skeleton VS Optimistic UI: Estrategias de Carga

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Arte de la Espera: Rendimiento Percibido

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Storybook es una herramienta de desarrollo de código abierto para construir, probar y documentar componentes de UI de forma aislada. Permite a los desarrolladores crear componentes en un entorno de “sandbox” fuera de la aplicación principal, lo que facilita la visualización de todos sus estados y la colaboración con los diseñadores.

¿Qué es Storybook?

Imagina que estás construyendo un coche con piezas de LEGO. Storybook es como un taller donde puedes construir y probar cada pieza por separado antes de ensamblar el coche. Puedes construir el motor (un componente complejo) y probarlo por sí solo, o puedes construir una simple rueda (un botón) y ver todos sus colores y tamaños disponibles, todo sin necesidad de tener el chasis del coche completo.

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida