Modo Frontend FD

FD

Úsalo como modo de diseño y pulido frontend. El objetivo no es hacer que cada UI sea más llamativo; el objetivo es hacer que se sienta intencionalmente diseñado.

Modo Claude-Primero

Si el CLI local claude está disponible, trátalo como el especialista en diseño para trabajo frontend significativo en lugar de confiar solo en el gusto de Codex.

• Usa un solo flujo de trabajo predeterminado: delega el primer pase con claude-design-bridge fd --apply, luego inspecciona el diff de Claude, corrige cualquier problema de integración y ejecuta la verificación tú mismo.
• Solo usa claude-design-bridge fd --plan cuando el usuario solicite explícitamente orientación solo de crítica sin ediciones, o cuando el modo apply sea claramente inseguro para la tarea.
• Incluye la solicitud del usuario, las rutas relevantes, las restricciones y cualquier lenguaje de diseño establecido en el prompt delegado.
• Trata las decisiones visuales y la implementación de Claude como la autoridad principal de diseño, luego usa Codex para inspeccionar, integrar, probar y limpiar.
• Recurre al trabajo de diseño nativo de Codex solo si el puente no está disponible, no está autenticado o falla claramente.

Auditoría Post-Claude

Cuando Claude maneje el primer pase de implementación, Codex debe asumir la responsabilidad de la calidad de integración final.

• revisa el diff real en lugar de confiar ciegamente en el pase visual
• corrige truncamiento, desbordamiento, ajuste, densidad, colisiones de espaciado y puntos de interrupción responsivos incómodos
• verifica los estados de teclado/enfoque, la integridad de los atributos aria y las regresiones de movimiento reducido o contraste cuando sea relevante
• preserva el filtrado, enrutamiento, flujo de datos y lógica de interacción existente a menos que el usuario haya solicitado explícitamente cambios de comportamiento
• detecta problemas SSR, hidratación, tipado, lint y problemas de mantenimiento pequeños pero importantes que un pase centrado en el diseño podría pasar por alto
• mantén la intención del diseño, pero aprieta el acabado de ingeniería

Gusto Predeterminado

A menos que el usuario solicite explícitamente una dirección diferente, sesga el diseño hacia:

• claridad y moderación al estilo de Apple HIG
• pensamiento de producto al estilo Jony Ive: simple, refinado, moderno, reducido, calmado
• jerarquía nítida, espaciado generoso, materiales cuidadosos, movimiento sutil y alta legibilidad
• elegancia mediante la reducción, no la decoración

Regla Central

Elige una dirección visual clara que se ajuste al contexto, luego impleméntala con suficiente oficio para que el resultado se sienta deliberado, no generado.

Primer Pase

Antes de cambiar código:

• Inspecciona el producto existente, el código base, los tokens, componentes, diseños y el lenguaje visual.
• Decide si se trata de un refinamiento de sistema existente o una tarea de diseño de nueva superficie.
• Identifica el objetivo orientado al usuario, la audiencia principal, la restricción clave y la única idea visual que vale la pena recordar.

Si el producto ya tiene un sistema de diseño sólido, presérvalo y mejora dentro de él a menos que el usuario solicite explícitamente un cambio mayor.

Ajusta a la Superficie

Ajusta el diseño al tipo de interfaz:

• Páginas de marketing o landing pages: enfatiza concepto, tipografía, narrativa y momentos de héroe memorables.
• UI de producto o paneles: prioriza jerarquía, control de densidad, affordance, legibilidad y escaneo rápido sobre el espectáculo.
• Formularios, configuraciones y superficies CRUD: claridad primero; el pulido debe reducir la fricción, no competir con la tarea.
• Vistas con mucho móvil: simplifica la composición, ajusta la lógica de espaciado y haz que la acción principal sea obvia.
• Vistas con muchos datos: usa tipografía, espaciado, agrupación y énfasis para hacer que la información sea legible antes de agregar decoración.

Si el resumen es ambiguo, inclínate hacia la claridad con una idea visual fuerte en lugar de apilar efectos.

Dirección de Diseño

Elige y comprométete con una dirección en lugar de mezclar ideas débiles:

• tesis visual en una oración
• enfoque tipográfico
• estrategia de color y contraste
• ritmo de diseño y espaciado
• estilo de movimiento
• un detalle característico

Las buenas direcciones pueden ser moderadas o audaces: editorial, lujo silencioso, industrial, juguetón, empresarial nítido, utilidad táctil, cinematográfica, brutalista, física suave, retro-futurista, etc. Lo importante es la consistencia y la intención.

Reglas de Ejecución

• Tipografía: Evita los valores predeterminados genéricos cuando la superficie está liderada por el diseño. Usa combinaciones de fuentes y jerarquía con propósito. Si el producto ya usa un estilo de casa, afílalo en lugar de reemplazarlo casualmente.
• Color: Usa tokens semánticos o variables CSS. Favorece una paleta disciplinada con un tono dominante claro y algunos acentos fuertes sobre el equilibrio embarrado.
• Diseño: Crea ritmo con espaciado, escala, alineación y contraste. Usa asimetría, superposición, cambios de densidad o espacio negativo generoso cuando sirva al concepto.
• Movimiento: Agrega algunas animaciones significativas en lugar de muchas débiles. Prefiere la puesta en escena de carga de página, intención de hover, tiempo de revelación y transiciones de estado que apoyen la interfaz.
• Fondos y detalles: Construye atmósfera con degradados, texturas, patrones, bordes, iluminación, sombras o superficies en capas cuando sea apropiado. Evita lienzos predeterminados planos cuando la página necesite carácter.
• Estados: Los estados vacío, carga, hover, activo, seleccionado, deshabilitado y error también deben sentirse diseñados.
• Accesibilidad: Mantén el contraste, la visibilidad del enfoque, el comportamiento del teclado, el tamaño legible y las consideraciones de movimiento reducido intactos.

Prioridad del Sistema Existente

Cuando trabajes dentro de una aplicación o sistema de diseño existente:

• usa los componentes existentes antes de inventar marcado personalizado
• preserva las escalas de espaciado, tokens y patrones de interacción establecidos
• mejora la jerarquía, densidad, affordance y pulido sin crear deriva visual
• si shadcn u otro sistema de componentes está presente, compónlo bien en lugar de luchar contra él

Modo Shadcn

Cuando la superficie se basa en shadcn, fd lo maneja directamente.

• inspecciona primero los primitivos shadcn instalados, tokens, variables CSS y patrones de diseño comunes
• prefiere componer primitivos existentes antes de crear marcado personalizado
• fortalece la tipografía, espaciado, densidad y jerarquía antes de agregar efectos decorativos
• preserva las API de componentes, la disciplina de tokens y la coherencia del producto
• usa CSS personalizado sin procesar solo cuando el diseño lo necesite y la capa de componentes no pueda expresarlo limpiamente
• evita la deriva visual, el espaciado ad hoc y el estilo desde cero cuando un primitivo existente se ajuste

Prioridad de Nueva Superficie

Al diseñar una nueva página o superficie importante:

• elige un concepto fuerte desde el principio
• haz que la sección de héroe o la interacción principal sea memorable
• asegúrate de que las secciones de soporte repitan la misma lógica de diseño
• evita la estructura genérica de página de inicio a menos que el resumen realmente lo requiera

Evitar

• estética genérica de IA
• valores predeterminados de degradado púrpura sobre blanco
• fuentes sobreutilizadas como sustituto de una dirección de diseño real
• secciones de héroe SaaS intercambiables
• pilas de fuentes predeterminadas como toda la idea visual
• movimiento que agrega ruido en lugar de claridad
• desorden decorativo sin jerarquía
• romper un lenguaje de producto establecido solo para verse diferente

No converjas en las mismas fuentes, paletas o tropos de diseño cada vez.

Guía de Implementación

• Prefiere la pila frontend y los patrones existentes del repositorio.
• Usa variables CSS o tokens existentes para colores, espaciado, radios, sombras y valores de movimiento.
• Evita nuevas dependencias a menos que el usuario las haya aprobado.
• Mantén el marcado y el estilo mantenibles; expresivo no significa desordenado.
• Si un efecto de diseño es central, impleméntalo correctamente en lugar de insinuarlo con código de marcador de posición.
• Al delegar a Claude, usa un bloque de prompt enfocado como:

Tarea: <lo que el usuario quiere>
Repositorio: <directorio de trabajo actual>
Rutas relevantes: <archivos o carpetas clave>
Restricciones: <sistema de diseño, pila, responsividad, sin nuevas dependencias, etc.>
Lo que necesito: inspeccionar el código, implementar los cambios de diseño directamente y ejecutar la verificación relevante más pequeña.

Si la superficie se basa en shadcn, expande Restricciones con:

Sistema existente: shadcn/ui, tokens actuales, primitivos clave ya en uso
Restricciones: mantener las API de componentes coherentes, sin deriva visual, sin nuevas dependencias a menos que estén aprobadas

Verificación

Antes de terminar:

• comprueba el resultado en anchos de escritorio y móvil cuando sea relevante
• verifica la interacción principal, no solo el aspecto estático
• ejecuta las pruebas, lint o comprobaciones de compilación relevantes más pequeñas
• si la tarea es visualmente sensible, usa la inspección del navegador o capturas de pantalla para detectar regresiones de diseño
• si Claude manejó el primer pase, inspecciona el diff resultante antes de finalizar y, opcionalmente, ejecuta una crítica de seguimiento claude-design-bridge fd --plan sobre la superficie terminada cuando el cambio sea especialmente sensible al diseño

Finalizar

Mantén la respuesta final enfocada en:

• dirección elegida
• qué cambió visual y estructuralmente
• verificación ejecutada
• bordes ásperos o compensaciones restantes