# Desarrollo ## Pages - [Claude Code Skills: La Capa Profesional que la Mayoría Ignora](https://www.fernandoux.com/blog/es/claude-code-skills-the-professional-layer-most-users-ignore/) — 2026-03-19 Ya usas Claude Code. Pero si sigues escribiendo los mismos prompts sesión tras sesión, estás quemando tiempo en infraestructura en lugar de trabajo real. Así se construye el sistema en el que operan los profesionales. - [Vibe Coding: Lo que la IA No te Va a Decir Antes de Construir tu Primera App](https://www.fernandoux.com/blog/es/vibe-coding-what-ai-wont-tell-you-before-building-your-first-app/) — 2026-03-15 Antes de pedirle a la IA que te haga 'un YouTube sin errores', lee esto. Un manual de supervivencia para diseñadores y creativos que quieren construir productos reales con IA sin destruirse en el camino. - [Spec-Driven Development: El fin del Vibe Coding amateur y el inicio de la ingeniería de sistemas para UX](https://www.fernandoux.com/blog/es/spec-driven-development-the-end-of-amateur-vibe-coding-and-the-beginning-of-systems-engineering-for-ux/) — 2026-03-10 El framework perfecto para que un disenador de producto pueda hacer maravillas con herramientas de vibe coding - [Actualizaciones Optimistas y UX de Rollback](https://www.fernandoux.com/es/wiki/techniques/optimistic-updates-rollback/) Aprenda a diseñar actualizaciones optimistas para que su aplicación se sienta instantánea al usuario, y cómo gestionar los fallos de red con experiencias de rollback elegantes. - [Actualizaciones Optimistas y UX de Rollback](https://www.fernandoux.com/es/wiki/tecnicas/optimistic-updates-rollback/) Aprenda a diseñar actualizaciones optimistas para que su aplicación se sienta instantánea al usuario, y cómo gestionar los fallos de red con experiencias de rollback elegantes. - [ARIA vs HTML Semántico: La Regla de Oro](https://www.fernandoux.com/es/wiki/conceptos/aria-vs-semantica/) Entienda la diferencia entre el HTML semántico nativo y los atributos ARIA, y aprenda por qué la primera regla de la accesibilidad es no usar ARIA si existe una alternativa nativa. - [ARIA vs HTML Semántico: La Regla de Oro](https://www.fernandoux.com/es/wiki/concepts/aria-vs-semantics/) Entienda la diferencia entre el HTML semántico nativo y los atributos ARIA, y aprenda por qué la primera regla de la accesibilidad es no usar ARIA si existe una alternativa nativa. - [Arquitectura de Tokens (Global vs Semántico vs Componente)](https://www.fernandoux.com/es/wiki/conceptos/arquitectura-de-tokens/) Descubre cómo estructurar una arquitectura de tokens de diseño robusta utilizando el modelo de tres capas (Global, Semántico y Componente) para crear sistemas de diseño escalables y mantenibles. - [Arquitectura de Tokens (Global vs Semántico vs Componente)](https://www.fernandoux.com/es/wiki/concepts/token-architecture/) Descubre cómo estructurar una arquitectura de tokens de diseño robusta utilizando el modelo de tres capas (Global, Semántico y Componente) para crear sistemas de diseño escalables y mantenibles. - [Breakpoint VS Container Queries: Diseño Basado en Componentes](https://www.fernandoux.com/es/wiki/conceptos/breakpoint-vs-container-queries/) Aprenda la diferencia entre diseñar para el ancho de la pantalla (Breakpoints) y diseñar para el ancho del contenedor (Container Queries), y cómo esto revoluciona el diseño de componentes. - [Breakpoint VS Container Queries: Diseño Basado en Componentes](https://www.fernandoux.com/es/wiki/concepts/breakpoint-vs-container-queries/) Aprenda la diferencia entre diseñar para el ancho de la pantalla (Breakpoints) y diseñar para el ancho del contenedor (Container Queries), y cómo esto revoluciona el diseño de componentes. - [Comportamiento de Intrinsic Sizing en UI](https://www.fernandoux.com/es/wiki/conceptos/intrinsic-sizing/) Aprenda cómo funciona el dimensionamiento intrínseco en el diseño de interfaces digitales para crear componentes que se adapten de forma inteligente a su contenido real. - [Comportamiento de Intrinsic Sizing en UI](https://www.fernandoux.com/es/wiki/concepts/intrinsic-sizing/) Aprenda cómo funciona el dimensionamiento intrínseco en el diseño de interfaces digitales para crear componentes que se adapten de forma inteligente a su contenido real. - [Conciencia de Estado (State Awareness) en UI](https://www.fernandoux.com/es/wiki/conceptos/conciencia-de-estado/) Aprenda a diseñar interfaces que mantengan al usuario siempre informado sobre el estado actual del sistema y de cada componente para reducir la incertidumbre y los errores. - [Conciencia de Estado (State Awareness) en UI](https://www.fernandoux.com/es/wiki/concepts/status-awareness/) Aprenda a diseñar interfaces que mantengan al usuario siempre informado sobre el estado actual del sistema y de cada componente para reducir la incertidumbre y los errores. - [Decisiones de Intrinsic Layout: Contenido VS Cajas](https://www.fernandoux.com/es/wiki/techniques/intrinsic-layout-decisions/) Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas. - [Decisiones de Intrinsic Layout: Contenido VS Cajas](https://www.fernandoux.com/es/wiki/tecnicas/intrinsic-layout-decisions/) Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas. - [Decisiones de Layout: Grid vs Intrinsic](https://www.fernandoux.com/es/wiki/techniques/layout-grid-vs-intrinsic/) Aprenda a elegir entre un diseño basado en rejillas (Grid) y uno basado en contenido (Intrinsic) para crear layouts digitales fluidos y modernos. - [Decisiones de Layout: Grid vs Intrinsic](https://www.fernandoux.com/es/wiki/tecnicas/layout-grid-vs-intrinsic/) Aprenda a elegir entre un diseño basado en rejillas (Grid) y uno basado en contenido (Intrinsic) para crear layouts digitales fluidos y modernos. - [Diseño de APIs de Componentes: Predictibilidad y Flexibilidad](https://www.fernandoux.com/es/wiki/techniques/component-api-design/) Aprenda a diseñar APIs de componentes robustas y coherentes que faciliten el handoff entre diseño y desarrollo, reduciendo errores y acelerando la construcción de productos. - [Diseño de APIs de Componentes: Predictibilidad y Flexibilidad](https://www.fernandoux.com/es/wiki/tecnicas/diseno-apis-componentes/) Aprenda a diseñar APIs de componentes robustas y coherentes que faciliten el handoff entre diseño y desarrollo, reduciendo errores y acelerando la construcción de productos. - [Diseño para el Rendimiento Percibido: Más Rápido que la Luz](https://www.fernandoux.com/es/wiki/conceptos/perceived-performance-design/) Aprenda cómo el diseño puede hacer que su aplicación se sienta más rápida de lo que realmente es, utilizando técnicas de psicología cognitiva y trucos visuales. - [Diseño para el Rendimiento Percibido: Más Rápido que la Luz](https://www.fernandoux.com/es/wiki/concepts/perceived-performance-design/) Aprenda cómo el diseño puede hacer que su aplicación se sienta más rápida de lo que realmente es, utilizando técnicas de psicología cognitiva y trucos visuales. - [El Command Pattern en el Diseño de Producto](https://www.fernandoux.com/es/wiki/conceptos/command-pattern/) Pase de diseñar pantallas estáticas a diseñar flujos dinámicos basados en acciones encapsuladas mediante el Command Pattern, la base técnica de las interfaces modernas y colaborativas. - [El Command Pattern en el Diseño de Producto](https://www.fernandoux.com/es/wiki/concepts/command-pattern/) Pase de diseñar pantallas estáticas a diseñar flujos dinámicos basados en acciones encapsuladas mediante el Command Pattern, la base técnica de las interfaces modernas y colaborativas. - [Estados de Carga: La Espera Indulgente en UX](https://www.fernandoux.com/es/wiki/techniques/loading-states/) Aprenda a diseñar estados de carga que reduzcan la ansiedad del usuario, comuniquen el progreso del sistema y mejoren la percepción de velocidad de su producto digital. - [Estados de Carga: La Espera Indulgente en UX](https://www.fernandoux.com/es/wiki/tecnicas/estados-de-carga/) Aprenda a diseñar estados de carga que reduzcan la ansiedad del usuario, comuniquen el progreso del sistema y mejoren la percepción de velocidad de su producto digital. - [Estrategia de Aliasing y Herencia de Tokens](https://www.fernandoux.com/es/wiki/techniques/token-aliasing-inheritance/) Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas. - [Estrategia de Aliasing y Herencia de Tokens](https://www.fernandoux.com/es/wiki/tecnicas/aliasing-herencia-tokens/) Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas. - [Estrategia de Tab Order: El Camino del Usuario de Teclado](https://www.fernandoux.com/es/wiki/estrategia/estrategia-tab-order/) Aprenda a diseñar y especificar un orden de tabulación (Tab Order) coherente y eficiente para asegurar que su producto sea fácil de navegar para usuarios de teclado y tecnologías asistivas. - [Estrategia de Tab Order: El Camino del Usuario de Teclado](https://www.fernandoux.com/es/wiki/strategy/tab-order-strategy/) Aprenda a diseñar y especificar un orden de tabulación (Tab Order) coherente y eficiente para asegurar que su producto sea fácil de navegar para usuarios de teclado y tecnologías asistivas. - [Estrategias de Escalado Responsivo: UI Líquida](https://www.fernandoux.com/es/wiki/techniques/responsive-scaling-strategies/) Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla. - [Estrategias de Escalado Responsivo: UI Líquida](https://www.fernandoux.com/es/wiki/tecnicas/estrategias-de-escalado-responsivo/) Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla. - [Flujos Offline-First: Diseñar para la Desconexión](https://www.fernandoux.com/es/wiki/estrategia/flujos-offline-first/) Aprenda cómo diseñar aplicaciones que funcionen sin conexión a internet por defecto, mejorando radicalmente la experiencia del usuario en cualquier circunstancia de conectividad. - [Flujos Offline-First: Diseñar para la Desconexión](https://www.fernandoux.com/es/wiki/strategy/offline-first-flows/) Aprenda cómo diseñar aplicaciones que funcionen sin conexión a internet por defecto, mejorando radicalmente la experiencia del usuario en cualquier circunstancia de conectividad. - [Fundamentos del Accessibility Tree: Cómo Ven las Máquinas](https://www.fernandoux.com/es/wiki/conceptos/accessibility-tree/) Aprenda qué es el Árbol de Accesibilidad y por qué es la base de cómo los lectores de pantalla y otras tecnologías asistivas interpretan su diseño de interfaz. - [Fundamentos del Accessibility Tree: Cómo Ven las Máquinas](https://www.fernandoux.com/es/wiki/concepts/accessibility-tree/) Aprenda qué es el Árbol de Accesibilidad y por qué es la base de cómo los lectores de pantalla y otras tecnologías asistivas interpretan su diseño de interfaz. - [Gestión de Foco: La Navegación sin Ratón](https://www.fernandoux.com/es/wiki/techniques/focus-management/) Aprenda a diseñar y gestionar el foco de navegación en su producto digital para asegurar una experiencia fluida para usuarios de teclado, lectores de pantalla y tecnología asistiva. - [Gestión de Foco: La Navegación sin Ratón](https://www.fernandoux.com/es/wiki/tecnicas/gestion-de-foco/) Aprenda a diseñar y gestionar el foco de navegación en su producto digital para asegurar una experiencia fluida para usuarios de teclado, lectores de pantalla y tecnología asistiva. - [Jerarquía Visual VS Jerarquía del DOM: Accesibilidad](https://www.fernandoux.com/es/wiki/conceptos/visual-vs-dom-hierarchy/) Aprenda la diferencia entre lo que el usuario ve y lo que el navegador lee, y cómo alinear la jerarquía visual con el DOM para una accesibilidad impecable en su producto. - [Jerarquía Visual VS Jerarquía del DOM: Accesibilidad](https://www.fernandoux.com/es/wiki/concepts/visual-vs-dom-hierarchy/) Aprenda la diferencia entre lo que el usuario ve y lo que el navegador lee, y cómo alinear la jerarquía visual con el DOM para una accesibilidad impecable en su producto. - [Organización de Props de Componentes: Estructura y Jerarquía](https://www.fernandoux.com/es/wiki/techniques/component-props-organization/) Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño. - [Organización de Props de Componentes: Estructura y Jerarquía](https://www.fernandoux.com/es/wiki/tecnicas/organizacion-props-componentes/) Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño. - [Paridad de Tokens en Múltiples Plataformas](https://www.fernandoux.com/es/wiki/conceptos/paridad-de-tokens/) Aprenda cómo lograr la paridad de tokens de diseño entre Web, iOS y Android para garantizar una experiencia de marca coherente y acelerar el desarrollo multiplataforma. - [Paridad de Tokens en Múltiples Plataformas](https://www.fernandoux.com/es/wiki/concepts/token-parity/) Aprenda cómo lograr la paridad de tokens de diseño entre Web, iOS y Android para garantizar una experiencia de marca coherente y acelerar el desarrollo multiplataforma. - [Presupuestos de Latencia en UX: Tiempos de Respuesta](https://www.fernandoux.com/es/wiki/estrategia/interaction-latency-budgets/) Aprenda a definir y gestionar presupuestos de latencia en su producto digital para asegurar que las interacciones del usuario se sientan instantáneas y reactivas. - [Presupuestos de Latencia en UX: Tiempos de Respuesta](https://www.fernandoux.com/es/wiki/strategy/interaction-latency-budgets/) Aprenda a definir y gestionar presupuestos de latencia en su producto digital para asegurar que las interacciones del usuario se sientan instantáneas y reactivas. - [Skeleton VS Optimistic UI: Estrategias de Carga](https://www.fernandoux.com/es/wiki/conceptos/skeleton-vs-optimistic-ui/) Aprenda la diferencia entre Skeleton Screens y Optimistic UI, y cómo elegir la mejor estrategia de carga para mejorar el rendimiento percibido de su producto digital. - [Skeleton VS Optimistic UI: Estrategias de Carga](https://www.fernandoux.com/es/wiki/concepts/skeleton-vs-optimistic-ui/) Aprenda la diferencia entre Skeleton Screens y Optimistic UI, y cómo elegir la mejor estrategia de carga para mejorar el rendimiento percibido de su producto digital. - [Storybook](https://www.fernandoux.com/es/wiki/herramientas/storybook/) Aprende qué es Storybook y cómo esta herramienta de desarrollo te permite construir, probar y documentar componentes de UI de forma aislada, creando un lenguaje común entre diseño y desarrollo. - [Storybook](https://www.fernandoux.com/es/wiki/tools/storybook/) Aprende qué es Storybook y cómo esta herramienta de desarrollo te permite construir, probar y documentar componentes de UI de forma aislada, creando un lenguaje común entre diseño y desarrollo. --- Source: https://www.fernandoux.com/tags/desarrollo/