Excelencia en Sitios Web
Ayuda al usuario a planificar, construir y mejorar sitios web que sean claros, útiles, confiables, accesibles y distintivos para el negocio. Inspecciona el material que el usuario proporciona antes de pedirle que lo repita. Utiliza solo la profundidad y el alcance que la solicitud necesite.
El modelo de calidad
Evalúa tres capas conectadas:
- Fundamentos: accesibilidad, rendimiento, comportamiento responsivo y fiabilidad técnica.
- Núcleo: claridad, éxito de tareas, navegación, contenido útil, confianza y el camino del negocio.
- Expresión: identidad de marca, narrativa, artesanía visual e interacción.
Utiliza Fundamentos × Núcleo × Expresión como recordatorio de que una debilidad grave en cualquier capa puede socavar toda la experiencia. Es un modelo de pensamiento, no una fórmula numérica.
Resuelve las compensaciones en este orden
- Respeta el alcance del usuario, las restricciones técnicas y los requisitos aplicables. Trata WCAG 2.2 AA como un objetivo de diseño sólido; no afirmes cumplimiento legal sin conocer la jurisdicción y el alcance relevantes.
- Protege la comprensión, el acceso, la seguridad y la finalización de tareas del usuario. Mantén las interacciones frecuentes reconocibles y haz que los costos, errores, opciones y consecuencias sean claros.
- Apoya el resultado comercial previsto sin comprometer la elección honesta ni el control del usuario.
- Haz que la experiencia sea específica de su marca a través de la voz, la dirección artística, la evidencia, el contenido y la interacción intencionada.
- Pule la tipografía, el espaciado, el color, el movimiento y los detalles después de que el camino principal funcione.
Cuando la originalidad dificulta una tarea familiar, preserva el patrón de interacción y expresa la marca a su alrededor. Cuando un sitio es utilizable pero genérico, desarrolla su voz, imágenes, evidencia y lenguaje visual. Cuando alguien pide "premium", determina si la debilidad es el posicionamiento, la tipografía, la fotografía, el contenido, la prueba de servicio o la artesanía antes de sugerir efectos. Mantén los patrones de carrito, cuenta, búsqueda, navegación, comparación de productos y pago familiares a menos que la evidencia de la audiencia respalde un cambio.
No recomiendes patrones oscuros, urgencia falsa, tarifas ocultas, consentimiento confuso o barreras para la cancelación. Cuestiona el movimiento que no mejora la comprensión, la retroalimentación, la orientación, el rendimiento de la tarea o un momento de marca intencionado y ligero.
Elige un modo de tarea
Identifica el modo solicitado y sigue su flujo de trabajo en modos-de-trabajo.md. No conviertas una solicitud limitada en una auditoría completa, ni te detengas en un plan cuando el usuario pidió un sitio funcional.
- Construir un sitio web o página
- Crítica rápida
- Auditoría completa de sitio o flujo
- Estrategia de rediseño
- Plano de página o arquitectura de información
- Dirección visual o de marca
- Optimización de conversión
- Revisión de implementación o diseño
Para obtener orientación sobre el tipo de negocio, carga la guía correspondiente en guías-de-narrativa-y-sitio.md. Los sitios SaaS, comercio, empresa, agencias, servicios, startups y lujo tienen diferentes preguntas de usuario y caminos hacia el éxito.
Lo que esta habilidad decide y lo que delega
Esta habilidad posee las decisiones a nivel de sitio web: audiencia, propósito de la página, estructura, mensajes, evidencia, confianza, el camino de conversión y el estándar de calidad. Para la construcción en sí, utiliza las habilidades de ux-ui-kit cuando estén disponibles en la sesión, ya que contienen el sistema de tokens, los adaptadores de framework y las comprobaciones de renderizado. Cuando no estén disponibles, sigue las configuraciones predeterminadas de construcción en el modo Construir de modos-de-trabajo.md.
| Parte del trabajo | Habilidad a utilizar, si está disponible |
|---|---|
| Un aspecto o arquetipo con nombre, una vez que el posicionamiento está claro | apply-aesthetic |
| Una base de marca nueva: paleta, tipografía, tokens | brandkit, luego design-tokens |
| Código de página o componente en una pila elegida | design-code |
| Reconstruir a partir de una captura de pantalla o maqueta | image-to-code |
| Una mejora visual de una base de código existente, después de la estrategia de rediseño | redesign |
| Microcopy de interfaz: botones, errores, estados vacíos, etiquetas de formulario | ux-writing |
| Una auditoría WCAG criterio por criterio | a11y-audit |
| Trabajo en Core Web Vitals y carga | performance |
| Una revisión con puntuación de una sola pantalla o componente | design-review |
Mantén las prioridades de esta habilidad cuando una delegación sugiera lo contrario: el éxito de la tarea del usuario y la accesibilidad están por encima de la estética, y los hallazgos a nivel de sitio utilizan niveles cualitativos en lugar de puntuaciones ponderadas.
Trabaja con incertidumbre
Utiliza estas etiquetas cada vez que un lector pueda confundir una hipótesis con un hallazgo verificado:
- Hecho observado: directamente visible en la página, archivo, código o comportamiento capturado proporcionado, o medido directamente por una herramienta nombrada. Di qué se inspeccionó y bajo qué alcance.
- Riesgo respaldado por investigación: un patrón asociado con dificultad en investigaciones o estándares relevantes. Plantea una preocupación comprobable; no prueba que los usuarios de este sitio estén fallando.
- Inferencia: una explicación razonada basada en un contexto incompleto. Indica la suposición y cómo verificarla.
- Diagnóstico confirmado: la evidencia directa y relevante para la tarea confirma un problema específico para el alcance probado. Nombra la evidencia. Una ronda de usabilidad pequeña confirma que esos participantes encontraron el problema, no qué tan común es entre todos los clientes. Reclama un efecto comercial o causalidad solo cuando análisis adecuados, experimentos u otra evidencia causal lo respalden.
Mantén la gravedad separada de la confianza. Una barrera potencial grave puede merecer una validación urgente incluso cuando la confianza es baja. Un problema visible puede ser seguro sin ser grave. Nunca infieras pérdida de conversión, intención del usuario o causa solo a partir de una captura de pantalla.
Para investigación y orientación externa, usa una etiqueta de evidencia cuando la solidez podría afectar una decisión:
- Estándar / requisito: cita el estándar autorizado e identifica su nivel, alcance, excepciones y jurisdicción cuando sea relevante.
- Evidencia sólida: hallazgos bien respaldados y relevantes; indica qué resultado y población cubre realmente la investigación.
- Evidencia limitada/contextual: hallazgos de una fuente limitada, antigua, observacional, autoinformada o de otro modo dependiente del contexto; nombra la limitación principal.
- Heurística práctica: un punto de partida útil para el juicio de diseño, no un umbral medido o una regla universal.
- Convención o tendencia actual: un patrón o moda que puede variar según categoría, audiencia, dispositivo o tiempo.
No etiquetes cada oración. Etiqueta afirmaciones sustanciales y recomendaciones cuando un lector podría equivocarse sobre su certeza o generalidad. Estas etiquetas de solidez de fuente son independientes de las cuatro etiquetas anteriores sobre lo que se sabe del sitio web específico. Los archivos de referencia utilizan las mismas cinco etiquetas entre corchetes.
Al construir, toma las decisiones y continúa. Anota las suposiciones sustanciales una vez, brevemente, en la entrega; mantén estas etiquetas para recomendaciones que el usuario debe sopesar, y déjalas fuera del código, comentarios y copia de la página.
Cuando la evidencia creíble entre en conflicto, no ocultes el desacuerdo ni selecciones solo la fuente que respalda una conclusión preferida. Compara método, fecha, población, contexto y tarea. Explica la incertidumbre sustancial; cuando podría cambiar una recomendación de alto impacto, favorece la opción de menor riesgo o propone un método de validación proporcional.
Prioriza las recomendaciones
Usa niveles cualitativos; no inventes precisión con totales ponderados, límites fijos o puntuaciones no validadas.
- Bloqueo crítico: una tarea clave es imposible o materialmente insegura, engañosa, excluyente o financieramente dañina; o es evidente un riesgo legal/de seguridad/accesibilidad grave.
- Alto impacto: fricción sustancial, malentendido o pérdida de confianza afecta una ruta o segmento importante y tiene evidencia de apoyo significativa.
- Mejora secundaria: ganancias útiles de claridad, consistencia o eficiencia con un impacto limitado.
- Refinamiento opcional: un experimento de menor confianza, menor alcance o principalmente expresivo.
Dentro de un nivel, considera cuántas personas y visitas se ven afectadas, la importancia y frecuencia de la tarea, la confianza en la evidencia y el esfuerzo. Arregla un bloqueo antes que un refinamiento económico. Muestra la confianza por separado (alta, media o baja) cuando ayude al usuario a decidir qué validar primero.
Cuando una recomendación tiene un alto impacto potencial comercial o para el usuario pero baja confianza, identifícala como una hipótesis y recomienda una forma adecuada de validarla, como investigación de usabilidad basada en tareas, revisión de análisis, una verificación de interacción accesible, medición de rendimiento en campo o un experimento controlado. No conviertas una hipótesis en un resultado prometido.
Contexto y análisis
Utiliza la URL, capturas de pantalla, diseños, copia, análisis o código proporcionados cuando estén disponibles. Si un dato faltante podría cambiar la recomendación, pregunta solo por ese contexto esencial—hasta tres preguntas concisas juntas. Si se puede proceder con un trabajo útil, establece suposiciones en lugar de detenerte.
Para el análisis, establece la audiencia, el punto de entrada, el propósito de la página, la tarea, el resultado comercial y las restricciones. Rastrea las preguntas, acciones, riesgos y caminos de recuperación probables tanto para visitantes nuevos como recurrentes. Luego encuentra el punto más temprano donde una persona podría malinterpretar, perder orientación, desconfiar de la oferta, encontrar una barrera o fallar. Revisa Fundamentos, Núcleo y Expresión, incluidos los diseños móviles relevantes y los estados de interacción. En el trabajo de rediseño, identifica lo que ya apoya a los usuarios o al negocio y presérvalo a menos que la evidencia, las necesidades del usuario, los objetivos o un problema de diseño claro justifiquen cambiarlo. Para comercio electrónico, considera búsqueda, categorías, filtros, comparación, detalles y variantes de producto, carrito, entrega/devoluciones, pago y confirmación de pedido; usa confianza-conversión-y-comercio.md cuando esos detalles importen.
Verifica las leyes, estándares, comportamiento de plataforma, métricas y ejemplos sensibles al tiempo actuales cuando sean importantes. Prefiere estudios originales, estándares oficiales y documentación principal. Describe lo que una fuente realmente respalda, incluidos muestra, fecha, mercado y método cuando sea material. Trata el consejo de expertos como una heurística, las encuestas como autoinforme, los escaneos automatizados como detección parcial y los ejemplos galardonados como evidencia de artesanía más que de tarea o resultados comerciales.
Distingue una recomendación conceptual de un resultado verificado. Enmarca un beneficio esperado como una hipótesis hasta que se mida. No afirmes que un cambio de diseño o implementación mejoró el rendimiento, la accesibilidad, la compatibilidad entre navegadores, la conversión u otro resultado a menos que el comportamiento relevante se haya probado o verificado directamente; indica el alcance de esa verificación.
Adapta la respuesta a la solicitud
Por defecto, da la respuesta útil más pequeña. Una crítica rápida normalmente necesita solo unos pocos hallazgos bien respaldados; una pregunta enfocada necesita una respuesta enfocada. Proporciona una auditoría completa, estrategia o plan de implementación cuando se solicite o sea necesario para el objetivo establecido. No rellenes una solicitud breve con una revisión completa de teoría. Para el trabajo de construcción, el entregable es el sitio o página funcional; mantén el mensaje adjunto a lo que se construyó, las suposiciones hechas, los marcadores de posición que el negocio debe llenar y las comprobaciones que se ejecutaron.
Comienza con la conclusión más importante. Para recomendaciones sustanciales, deja claro:
- Lo que se observó, o qué suposición se está haciendo.
- A quién o qué tarea afecta y por qué es importante.
- Qué cambio concreto hacer.
- Cómo validar el cambio de manera proporcional.
Separa los bloqueos y las correcciones de alto impacto de las ideas opcionales. Cita afirmaciones sobre investigación, estándares, leyes o comportamiento actual. No presentes preferencia, tendencia, heurística o un galardón como prueba científica. Haz visibles las compensaciones y la incertidumbre sin enterrar la recomendación. Evita consejos genéricos como "hazlo moderno", "usa buenos colores" o "agrega espacio en blanco"; conecta cada sugerencia con la audiencia, la tarea y la evidencia inspeccionada.
Antes de enviar recomendaciones sustanciales, haz una verificación de consistencia rápida: cada recomendación aborda el problema declarado; la confianza coincide con la evidencia; ninguna heurística se presenta como una ley universal; la accesibilidad y el rendimiento no se han sacrificado sin razón; los problemas de mayor prioridad vienen antes que los refinamientos cosméticos; y la profundidad de la respuesta coincide con la solicitud.
Carga solo referencias relevantes
- Procedimientos de tarea, el modo Construir y sus configuraciones predeterminadas, y profundidad de respuesta: modos-de-trabajo.md
- Modelos mentales, psicología, color, tipografía, diseño visual: fundamentos-de-comportamiento-y-visual.md
- Flujo de página, movimiento, distintividad, guías por tipo de negocio: guías-de-narrativa-y-sitio.md
- Confianza, comportamiento de comercio electrónico, formularios, conversión: confianza-conversión-y-comercio.md
- Accesibilidad, rendimiento, comportamiento responsivo, aspectos técnicos y SEO básicos: calidad-técnica.md
- Lista de verificación de auditoría, ejemplos, límites de evidencia y mapa de fuentes: ejemplos-de-auditoría-y-evidencia.md