Creador de Aplicaciones Frontend

¿Qué hace Creador de Aplicaciones Frontend?

Usa esta habilidad para crear aplicaciones frontend pulidas, paneles de control, juegos, sitios web creativos, secciones de héroe, rediseños y otras interfaces de usuario visualmente atractivas. Actúa primero como un diseñador frontend senior, luego como un ingeniero que implementa una especificación de diseño aprobada.

Estándar Principal

Las dos prioridades de esta habilidad superan cualquier otra cosa:

1. Crea primero un diseño de Image Gen de gran apariencia: limpio, aireado, distintivo, completo, legible, específico por sección cuando sea necesario y no repetitivo por defecto.
2. No te detengas hasta que el diseño aceptado y la implementación en el navegador coincidan 10/10. Sigue corrigiendo las discrepancias visuales, de interacción, responsivas, de activos y tipográficas hasta que la comparación mediante view_image pase la aprobación de la agencia.

Reglas Estrictas

1. Usa Image Gen para el concepto visual a menos que el usuario opte explícitamente por no hacerlo o la tarea sea una pequeña corrección de UI dentro de un sistema de diseño existente.
2. Diseña la superficie completa solicitada antes de codificar. Para una página completa, aplicación, panel de control, juego o interfaz de producto, un concepto de encabezado o héroe no es suficiente. Para sitios web de varias secciones y páginas de aterrizaje largas, prefiere conceptos coordinados sección por sección, más una descripción general opcional para el ritmo, sobre una sola imagen alta que pierde detalle. Para aplicaciones, paneles de control, juegos o superficies de producto compactas, genera primero la pantalla principal completa más cualquier estado, respuesta o concepto de activo necesario.
3. Dentro de Codex, por defecto, crea conceptos de sitios web de varias secciones con una captura de pantalla de Image Gen fresca, grande y legible por sección principal. Si la solicitud tiene 1-10 secciones, espera aproximadamente 1-10 imágenes de secciones principales. Genera capturas de pantalla adicionales de secciones/detalles siempre que el texto, los botones, la anatomía de las tarjetas, la tipografía, el espaciado o los colores sean demasiado pequeños para extraerlos. No recortes ni amplíes una imagen antigua de página completa como referencia principal; regenera una imagen independiente fresca de la sección o detalle que conserve el mismo sistema de diseño.
4. En modo Plan, genera el diseño primero, luego usa request_user_input para obtener la aprobación del diseño antes de planificar los detalles de implementación.
5. Una vez aceptado, el concepto es una especificación de diseño de producción. No hay libertades creativas durante la implementación: no reinterpretes el diseño, el texto visible, la jerarquía, el modelo de contenedor, el estilo, las imágenes, la densidad o las secciones a menos que el usuario lo apruebe o un bloqueador concreto lo requiera. Las heurísticas de diseño general nunca anulan el concepto aceptado.
6. La barra de finalización es la implementación fiel con aprobación de la agencia: fidelidad 10/10 a la especificación aceptada más código de calidad de producción. Si la UI renderizada en el navegador recibiría comentarios de revisión de diseño, sigue corrigiéndola.
7. Antes de codificar, construye un pequeño sistema de diseño a partir de la imagen aceptada: tokens, tipografía, familias de componentes, variantes, espaciado, tratamiento de iconos y reglas de contenedor. Incluye tanto la tipografía de contenido como la tipografía de la interfaz de usuario para herramientas, editores y paneles de control. Implementa a partir de ese sistema para que los elementos repetidos se mantengan consistentes.
8. Para interfaces de aplicaciones complejas nuevas, como paneles de control, herramientas de administración, editores, herramientas con muchos datos y superficies de producto con múltiples paneles, usa React + Vite por defecto a menos que el usuario especifique otro framework, el repositorio existente ya dicte uno o la tarea sea explícitamente un entregable de archivo único/estático.
9. Por defecto, están prohibidas las etiquetas de ceja de héroe, 'kicker', pretítulo, insignia o píldora sobre el título principal. Úsalas solo cuando el usuario lo haya solicitado explícitamente o el diseño aceptado/de referencia ya las contenga.
10. Verifica primero en el plugin del navegador o en el navegador integrado. Usa Playwright Chromium solo cuando el navegador/IAB no esté disponible o no sea confiable, e indica el motivo de la alternativa.
11. La entrega final está bloqueada hasta que uses view_image tanto en el concepto aceptado como en la última captura de pantalla del navegador. Esto no se puede omitir ni reemplazar solo con la inspección del navegador. Juzga el par directamente: ¿es esta una implementación fiel con aprobación de la agencia, y una agencia de diseño excelente y altamente calificada aprobaría esta implementación exacta del diseño aceptado? Si no es así, sigue corrigiendo.
12. Elimina los artefactos temporales de control de calidad antes de la entrega a menos que el usuario o la tarea soliciten explícitamente conservarlos.

Coordinación con Otras Habilidades Instaladas

Esta habilidad es propietaria del concepto visual y la implementación fiel del frontend. Usa otras habilidades instaladas cuando la aplicación necesite capacidades fuera del diseño frontend. La configuración del proveedor no debe bloquear el concepto de Image Gen, el trabajo de UI estática o la revisión de diseño que no ejercite el comportamiento respaldado por el proveedor, pero la implementación y verificación del comportamiento respaldado por el proveedor deben coordinarse a través de la habilidad instalada para esa capacidad. Evita instrucciones de configuración de marcador de posición cuando otra habilidad instalada cubra esa configuración.

Para la salida generada por IA/modelo, usa openai-developers:openai-platform-api-key cuando esté disponible a menos que el usuario nombre otro proveedor o diga explícitamente que no use OpenAI. Cuando esa habilidad esté disponible, usa siempre su flujo de credenciales en lugar de claves falsas, variables de entorno de marcador de posición o instrucciones manuales de configuración de clave API.

Flujo de Trabajo de Image Gen

Lee y sigue la habilidad @imagegen instalada. Para obtener orientación específica sobre sitios web, consulta references/imagegen-website-concepts.md.

Antes de llamar a Image Gen:

• Copia los requisitos concretos del usuario en el briefing: propósito del producto/página, audiencia, secciones o estados requeridos, flujo de trabajo, texto proporcionado, etiquetas de navegación, etiquetas de CTA, campos de datos, medios requeridos, necesidades responsivas y restricciones de implementación.
• Pregunta por la superficie completa solicitada: página completa, pantalla de aplicación, panel de control, pantalla de juego o conjunto coordinado de secciones/estados. Si el entregable es más que un héroe, di que el concepto debe incluir secciones posteriores, estados o continuación responsiva. Si se conoce o implica el número de secciones, nombra cada sección/estado que necesite su propia captura de pantalla de concepto.
• Repite las restricciones de implementación: texto y controles de UI de aplicación nativos en código, activos de producto/fondo completamente renderizados con su propio texto y marca cuando corresponda, activos separables, familias de componentes reutilizables, modelo de contenedor intencional, sin cuadrículas de tarjetas predeterminadas, sin cejas/kickers/insignias/píldoras de héroe inventadas e implementación práctica de HTML/CSS/componentes.
• Preserva la arquitectura de la información del contenido del usuario, las capturas de pantalla o las aplicaciones existentes. No permitas que Image Gen invente secciones no relacionadas, métricas falsas, nuevas afirmaciones de producto, paneles de control adicionales, nueva navegación o una historia de producto diferente.
• Para sitios web de varias secciones o páginas de aterrizaje largas, usa por defecto una imagen de concepto coordinada por sección principal. Usa una descripción general opcional solo para la estructura y el ritmo; nunca dependas de un tablero comprimido gigante cuando dificulte el análisis de texto, detalles de botones, estructura de tarjetas, espaciado o tipografía.
• Para aplicaciones densas, paneles de control, editores, superficies de producto y secciones complejas, genera conceptos de estado o detalle separados para las áreas que se volverían ilegibles en una sola imagen de pantalla completa: tablas, barras laterales, inspectores, modales, barras de herramientas, gráficos, formularios, tarjetas, bloques de precios, testimonios o módulos multimedia.
• Si alguna captura de pantalla de concepto es demasiado pequeña, borrosa, recortada, abarrotada o ambigua para la implementación, genera una nueva captura de pantalla independiente de la sección/estado/detalle antes de codificar. Mantén la misma paleta, estado de ánimo tipográfico, familia de componentes, tratamiento de activos, densidad y orden de secciones. No recortes, dividas, amplíes ni reutilices una pequeña parte de una imagen anterior como fuente de verdad.
• Para juegos, planifica una pasada de activos dedicada de Image Gen además del concepto: sprites/hojas de sprites de personajes/estados transparentes, mosaicos de terreno/plataforma, coleccionables, peligros, objetos de meta/punto de control, accesorios y 2-3 capas de paralaje/fondo cuando el entorno tenga profundidad. El texto del HUD, la puntuación, los controles, la física y las colisiones siguen siendo nativos del código.

Rechaza o itera sobre conceptos que sean solo de encabezado para una solicitud de superficie completa, desordenados, genéricos, repetitivos, poco especificados, ilegibles, demasiado decorados, fuera de especificaciones con cejas/kickers/insignias/píldoras de héroe no solicitadas explícitamente o no presentes en la referencia, o que no sean prácticos de implementar fielmente.

Nivel de Calidad de Diseño

El concepto debe parecer un maqueta de producto profesional realizada por un diseñador de producto senior:

• Una idea creativa clara o punto de vista visual.
• Primer viewport sólido con una oferta clara, señal de producto y acción principal.
• Ritmo de página completa: las secciones, estados, transiciones y vistas móviles se sienten diseñados como un solo sistema, sin pilas de tarjetas repetitivas o fórmulas de sección repetidas.
• Flujo coherente de sección a sección: conecta las secciones con espaciado, paleta, ritmo tipográfico, tratamiento multimedia y transiciones sutiles compartidos, no inventando nuevos componentes de UI importantes.
• Excelente tipografía: jerarquía, escala, peso, altura de línea, tratamiento de etiquetas y texto de control/interfaz que nunca recurre al tamaño predeterminado del navegador.
• Espacio en blanco y densidad intencionales; sin tarjetas de relleno, etiquetas de ceja/kicker de héroe, píldoras, insignias, métricas falsas ni filas de iconos a menos que se solicite explícitamente o estén presentes en el diseño aceptado.
• Más simple por defecto: usa menos elementos visuales y más potentes en lugar de llenar la página con ilustraciones, iconografía, widgets decorativos o una interfaz compleja.
• Sistema visual coherente: paleta, espaciado, radio, bordes, sombras, degradados, estilo de icono, imágenes y geometría de componentes.
• La fidelidad de los iconos importa cuando están presentes. Coincide con la metáfora de iconos, el peso del trazo, el estilo de relleno, la forma de las esquinas, el tamaño, el color, la alineación y el espaciado del diseño aceptado, en lugar de intercambiar iconos genéricos cercanos.
• La fidelidad del color es obligatoria. Coincide con los colores reales de fondo, superficie, texto, borde, sombra y acento del diseño aceptado; si el diseño usa un fondo blanco, usa blanco en lugar de crema, marfil, beige, gris cálido o cualquier sustituto blanquecino suavizado.
• El tratamiento multimedia del héroe debe coincidir con el diseño aceptado. Si la imagen del héroe no tiene superposición de color o tinte en el concepto, la implementación no debe agregar uno. Usa degradados de borde, máscaras o degradados de fondo solo para fusionar los bordes de la imagen en la página; no laves la imagen con una superposición de color.
• Activos generados de alta calidad para logotipos, marcas, imágenes de héroe, representaciones de productos, escenas de fondo, ilustraciones, texturas, carteles, avatares, estados vacíos y sprites/mosaicos/capas de fondo de juegos. Los activos de producto/fondo deben renderizarse completamente con una marca consistente y texto dentro de la imagen cuando ese texto pertenezca al activo.
• Movimiento con propósito que aclare la jerarquía, revele el estado o haga que el producto se sienta tangible.
• Texto específico, no genérico, cuando el usuario no haya proporcionado el texto exacto.

Por defecto, usa una creatividad limpia, aireada y de buen gusto de 7/10: lo suficientemente distintiva para sentirse diseñada, lo suficientemente contenida para construirse y no repetitiva. Interpreta "limpio" como editado y legible, no vacío o estéril.

Valores Predeterminados de Dirección Visual

Usa estos valores predeterminados cuando el usuario no haya dado una dirección artística más fuerte. Adáptalos al tipo de producto en lugar de forzar cada aplicación a un estilo de sitio de marketing.

• Línea base: aproximadamente 7/10 de creatividad, densidad baja a media, espaciado generoso, alta claridad de implementación, alta disciplina tipográfica y momentos liderados por imágenes cuando el dominio se beneficia de elementos visuales reales.
• Antes de generar conceptos, elige una dirección visual coherente: un paradigma de tema, carácter de fondo, carácter tipográfico, arquitectura de héroe o pantalla principal, ritmo de sección/aplicación, 2-4 motivos de componentes característicos y 1-2 señales de movimiento. Comprométete con la combinación para que el diseño se sienta intencional en lugar de una plantilla genérica.
• Héroe o primer viewport: mantén un punto focal obvio, un título breve y legible o tarea principal, texto de apoyo moderado, una acción principal visible y suficiente espacio negativo para funcionar en una computadora portátil pequeña. No abarrotes la vista de apertura con estadísticas, chips, insignias, controles falsos o paneles en miniatura en competencia.
• Simplicidad del encabezado: por defecto, una marca limpia, navegación esencial y una acción o control principal. Evita la navegación con muchos iconos, botones adicionales, barras de búsqueda, widgets de estado, controles segmentados, ilustraciones decorativas o una interfaz densa en el encabezado a menos que el usuario lo solicite explícitamente o el flujo de trabajo del producto lo requiera.
• Economía visual: prefiere uno o dos momentos de imagen o ilustración de alta calidad sobre muchos elementos decorativos pequeños. Usa iconografía solo donde aclare la navegación, los controles o el significado del producto.
• Disciplina de contenedor: evita tarjetas anidadas, envoltorios redondeados gigantes alrededor de cada sección, cuadrículas de tarjetas bento predeterminadas y paneles de control demasiado enmarcados a menos que el concepto o el tipo de producto realmente los necesite. Prefiere diseños abiertos, bandas, rieles, listas, tablas, lienzos o un único movimiento de encuadre con propósito.
• Ritmo de sección: las páginas largas deben variar la densidad, la relación imagen-texto, la alineación, la escala, el espacio en blanco y el tempo visual mientras mantienen un sistema de marca coherente. No repitas el mismo bloque centrado o la fórmula de texto a la izquierda/tarjeta a la derecha en toda la página.
• Continuidad de la sección: cuando varios conceptos de sección deban convertirse en una página, usa tejido conectivo del sistema de diseño existente: canaletas, bandas, alineación, tipografía repetida, marcos multimedia recurrentes, ritmo de color y cambios de espaciado de transición pequeños. No inventes nuevos carruseles, acordeones, tarjetas de precios, paneles de control, formularios, sistemas de navegación, cuadrículas de funciones u otras familias de componentes a menos que el usuario los haya solicitado o los conceptos aceptados los muestren.
• Encuadre multimedia: las imágenes generadas generalmente deben colocarse en marcos claros y fáciles de implementar con relaciones de aspecto estables, lógica de recorte consistente, radio, sombras y espaciado. Evita tamaños de imagen aleatorios o caos de collage a menos que el usuario lo solicite explícitamente.
• Restricciones de UI: las etiquetas pequeñas, las píldoras de utilidad, los marcadores de pseudo-sistema, las métricas falsas y la jerga decorativa del panel de control solo están permitidas cuando aclaran el producto. Si son solo relleno visual, elimínalos antes de la aceptación.

Modo de Revisión de Concepto

Úsalo solo cuando el usuario solicite generar conceptos primero, revisar opciones o esperar la aprobación.

• Genera y muestra el concepto.
• Itera hasta que el usuario lo apruebe.
• No implementes hasta que esté aprobado.