MarioCasanovacf/justesse

¿Qué hace justesse?

Convierta una referencia breve, un repositorio o una referencia visual en una interfaz de usuario de producción coherente. Trate el gusto como un juicio contextual bajo restricciones, no como un marco preferido, una estética o una receta de componentes.

Esta es una capacidad declarativa y de solo referencia. Su razonamiento de diseño, reglas y criterios de aceptación deben permanecer independientes del modelo, tiempo de ejecución del agente, herramienta de línea de comandos, proveedor y entorno de alojamiento que lo ejecuten. El descubrimiento específico del tiempo de ejecución puede exponer este directorio, pero no debe cambiar la semántica de la habilidad ni ser requerido por su flujo de trabajo.

Bloquear el modo de operación

Elija un modo primario antes de tomar decisiones de diseño. Indíquelo en la lectura de diseño y no cambie de modo en silencio. Si dos modos implican entregables materialmente diferentes y la solicitud no los resuelve, haga una pregunta enfocada. Una tarea puede nombrar un modo secundario, pero el modo primario controla el flujo de trabajo y el estándar de aceptación.

Modo	Resultado principal	Referencia requerida
Marketing / conversión	Comunicar valor y mover a una audiencia hacia una acción medible	marketing-surfaces.md
Producto / tarea	Ayudar a un usuario a comprender el estado y completar trabajo recurrente, incluidos paneles	product-and-transaction.md
Flujo transaccional	Completar una acción consecuente o de varios pasos de forma segura y recuperable	product-and-transaction.md
Rediseño: preservar	Mejorar la calidad manteniendo la marca reconocible y los contratos del producto	redesign-preservation.md
Rediseño: renovación	Establecer un nuevo lenguaje visual reteniendo contratos no aprobados para cambiar	redesign-preservation.md
Referencia a código	Traducir la evidencia visual proporcionada a la implementación nativa del proyecto destino	reference-to-code.md
Revisión visual	Diagnosticar jerarquía, coherencia, usabilidad, capacidad de respuesta y riesgo de producción	interface-quality.md
Lectura / documentación	Ayudar a un lector a entender algo a través de documentos, guías, artículos, ayuda o registros de cambios	reading-surfaces.md
Experiencia / exhibición	Poner a un visitante dentro de un portafolio, galería o trabajo de exhibición mientras la interfaz se retira	experience-surfaces.md
Concepto de imagen	Definir o producir dirección de arte que sirva a la interfaz	image-concepts.md
Visualización de datos	Convertir medidas, comparaciones, distribuciones, relaciones e incertidumbre en evidencia inspeccionable	data-visualization.md
Memorando de decisión ejecutiva	Convertir evidencia acotada en una presentación centrada en la conclusión para un tomador de decisiones	decision-memo.md

Después de seleccionar el modo primario, configure el perfil por separado. Esta habilidad incluye el mecanismo de perfil y ningún perfil. Active personal:<nombre> solo cuando esa bandera exacta sea explícita en la solicitud o en las instrucciones del proyecto. Nunca lo infiera a partir del nombre de una persona, un tipo de artefacto o la disponibilidad de esta habilidad. Sin la bandera, mantenga el lenguaje visual, la voz, la paleta, la materialidad y el color de la superficie neutros para la marca; un lienzo de papel claro no es un valor predeterminado.

Una bandera activa abre una declaración requerida en lugar de otorgar un sistema visual. Obtenga respuestas concretas a los diez campos en profile-declaration.md antes de tomar cualquier decisión de diseño bajo el perfil, y nunca complete un campo sin respuesta por inferencia o tomando prestado un valor de otro perfil, de los ejemplos de esta habilidad o de sus accesorios de banco de pruebas. Pregunte cada campo con un ejemplo práctico adjunto, en la forma de respuesta de ese campo; una pregunta desnuda devuelve un estado de ánimo donde el formulario necesita una medición.

Flujo de trabajo central

1. Inspeccionar antes de proponer. Lea los archivos relevantes del proyecto, pantallas y componentes representativos, configuración del paquete y compilación, tokens de diseño, formas de datos, rutas, pruebas y referencias proporcionadas. Identifique qué es real, qué se infiere y qué sigue siendo desconocido.
2. Enmarcar el resumen. Lea brief-and-direction.md. Registre la audiencia, el trabajo del usuario, el objetivo comercial, la evidencia de contenido y marca, las restricciones, el modo primario y la señal de éxito. Enumere cada entregable solicitado antes de la implementación. Prefiera una interpretación defendible sobre un collage de tendencias.
3. Declarar la lectura de diseño. En una declaración compacta, nombre el modo, la audiencia, el trabajo del producto, la dirección visual, la densidad y la postura de movimiento. Distinga las decisiones de las suposiciones.
4. Preservar el contrato del producto. Mantenga el framework existente, el administrador de paquetes, las convenciones de componentes, el sistema de diseño, los contratos de datos y API, la semántica de estado, las rutas, los formularios, la analítica, el comportamiento de consentimiento y legal, la accesibilidad, el SEO, el significado del contenido, las pruebas y los presupuestos de rendimiento a menos que el usuario autorice explícitamente un cambio. El modo de renovación no es permiso para romperlos.
5. Implementar de forma nativa. Reutilice las dependencias instaladas y las primitivas establecidas. Exprese la dirección en el framework y modelo de estilo del proyecto. No introduzca React, Tailwind, GSAP, otro sistema de diseño, modo oscuro, una fuente o cualquier dependencia simplemente porque esta habilidad menciona una posibilidad visual.
6. Resolver todo el espacio de estados. Diseñe el diseño responsivo más los estados aplicables de carga, vacío, parcial, error, éxito, deshabilitado, permiso, sin conexión, validación y acción destructiva. Para paneles y flujos, proteja la legibilidad de los datos, la continuidad de la tarea y la recuperación.
7. Renderizar y verificar en pasos acotados. Construya completamente primero. Luego inspeccione ventanas gráficas representativas estrechas y anchas y extremos de contenido real juntos en una ronda por lotes cuando exista la herramienta de vista previa, comparando jerarquía, orden de lectura, desbordamiento, contraste, enfoque, retroalimentación de interacción y preservación del contrato. Arregle todo lo que muestre esa ronda en un lote, confirme con a lo sumo una ronda más, y deje de pulir: un bucle de autoevaluación abierto gasta el presupuesto sin converger, y el límite cubre todo el ciclo, capturas de pantalla, escaneos de defectos, microediciones y reconstrucciones por igual. No llame a un mockup listo para producción sin evidencia proporcional de construcción, prueba y visual.
8. Preparar la entrega. Lea production-preflight.md, corrija las fallas aplicables, verifique cada entregable solicitado e informe las comprobaciones que no se pudieron ejecutar.

Enrutamiento de referencias

Cargue solo lo que necesita el modo activo; cada referencia está directamente enlazada aquí.

• Lea siempre brief-and-direction.md, interface-quality.md y production-preflight.md.
• Lea marketing-surfaces.md para marketing, campañas, conversión editorial, precios, lanzamiento u otras superficies de adquisición.
• Lea reading-surfaces.md para documentación, guías, artículos, ayuda, registros de cambios y páginas de formato largo cuyo trabajo es la comprensión.
• Lea experience-surfaces.md para portafolios, galerías, exhibiciones y páginas de muestra donde el trabajo mismo lidera.
• Lea product-and-transaction.md para UI de aplicaciones, paneles, espacios de trabajo densos en datos, formularios, pago, incorporación, configuración y flujos de varios pasos.
• Lea data-visualization.md siempre que una superficie contenga un KPI, gráfico, figura analítica, comparación de métricas, tabla de números o visualización de fecha/período.
• Lea redesign-preservation.md siempre que una superficie existente cambie, ya sea en modo preservar o renovación.
• Lea reference-to-code.md cuando capturas de pantalla, mockups, sitios web u otros ejemplos visuales sean entradas de implementación.
• Lea image-concepts.md solo cuando las imágenes sean parte del resumen o el concepto de imagen sea el modo seleccionado.
• Lea style-lenses.md cuando el resumen carezca de un vocabulario visual o direcciones competidoras deban separarse.
• Lea finishing.md al final, y solo una vez que las comprobaciones de calidad de interfaz se mantengan, para refinamiento de nivel de entrega y para juzgar candidatos casi idénticos; el acabado nunca sustituye a la jerarquía, la veracidad o los estados.
• Lea react-next-tailwind.md solo cuando el proyecto inspeccionado ya use React, Next.js o Tailwind, o el usuario autorice explícitamente ese stack para trabajo desde cero; no es el valor predeterminado portátil.
• Lea decision-memo.md para un memo ejecutivo, una presentación de decisión o cualquier secuencia de diapositivas centrada en la conclusión.
• Lea pptx-safe-html.md antes de diseñar la primera diapositiva siempre que el entregable sea un archivo de presentación editable en lugar de una página.
• Lea surface-translation.md cuando una visión del mundo deba transportarse a través de un panel, una página de destino creada, un estudio de caso, un informe y una presentación.
• Con la bandera exacta personal:<nombre>, lea profile-activation.md y profile-declaration.md primero, luego profile-data-semantics.md una vez que la declaración esté completa. No los cargue ni aplique de otra manera.
• Lea profile-calibration.md solo cuando se ejecute una comparación de perfil controlada, control negativo, revisión ciega o decisión de promoción.
• Lea upstream-provenance.md solo para atribución, auditoría, redistribución o comparación ascendente.

No cargue de forma recursiva archivos no relacionados de las referencias.

Capacidades condicionales

Use la generación de imágenes, la búsqueda de imágenes o la navegación solo cuando estén disponibles, autorizadas y sean necesarias. Para el trabajo de imágenes, prefiera los activos existentes del repositorio, luego los activos proporcionados por el usuario, luego una herramienta autorizada. De lo contrario, entregue un resumen de concepto específico o un marcador de posición claramente etiquetado sin afirmar que es arte final. Use marcadores de posición solo para activos externos o dependencias realmente faltantes; especifique las dimensiones, el rol y el próximo paso de reemplazo de cada marcador de posición. No fabrique capturas de pantalla de productos, clientes, métricas, logotipos o testimonios.

Use el movimiento solo cuando aclare jerarquía, retroalimentación, continuidad o narrativa. Prefiera el mecanismo existente del proyecto y la técnica adecuada más ligera. Preserve el contenido sin movimiento, respete las preferencias de movimiento reducido, evite la captura de desplazamiento y limpie observadores, oyentes y líneas de tiempo. Las bibliotecas de movimiento son opciones de implementación condicionales, nunca un requisito. Escale a motion-patterns.md solo cuando una transición CSS nativa ya no sea adecuada y el trabajo necesite coreografía en capas, narración con desplazamiento o un motor de animación dedicado.

Contrato de entrega

Entregue la superficie implementada o revisada junto con el modo y la lectura de diseño, los contratos preservados e intencionalmente cambiados, la evidencia de verificación y cualquier marcador de posición o riesgo no resuelto. Para una solicitud solo de revisión, priorice los hallazgos por impacto en el usuario y cite la pantalla o componente afectado; no mute el proyecto a menos que se le solicite.