¿Qué hace Construcción de interfaz Silicon?
Lleva la intención del diseño a un comportamiento funcional. Inspecciona el DESIGN.md del producto, el framework, la UI actual, los componentes, los activos y el contenido antes de editar. Mantén los cambios dentro del alcance solicitado. Para una corrección pequeña, sigue la dirección existente; si falta dirección para una construcción importante, establece una dirección provisional concisa a partir del resumen.
Construye un fragmento representativo
Identifica a la persona, la tarea, la información principal y la siguiente acción. Usa contenido representativo del producto; etiqueta los ficticios como provisionales y las acciones como prototipo. No fabriques testimonios, logotipos de clientes, mediciones ni integraciones exitosas.
Elige la estructura según el contenido: prosa para lectura, filas o tablas para comparación, tarjetas para objetos independientes. Un sitio web debe hacer que su promesa y evidencia sean comprensibles; una aplicación debe exponer el trabajo y el estado que respaldan una acción. Preserva la semántica confiable de los componentes mientras adaptas el sistema visual.
Implementa un flujo completo con un estado adverso antes de extender el estilo por todo el producto. Incluye retroalimentación relevante de carga, vacío, error, no disponible y éxito. Conserva información útil en errores recuperables y explica las acciones no disponibles. Usa controles semánticos y etiquetas persistentes.
Establece roles coherentes de tipografía, color y espaciado. Usa activos para un propósito específico de información o identidad, con derechos adecuados y alternativas de texto. Mantén el contenido crítico independiente de animaciones decorativas y audio.
Lleva la dirección elegida más allá de la primera pantalla hacia la tarea, un estado adverso y un resultado, cuando esté dentro del alcance. Incluye un detalle específico del producto en el texto, las relaciones visuales o el comportamiento. Preserva el contexto, explica por qué una colección está vacía y mantén las acciones repetidas eficientes. Termina el ajuste de envoltura, alineación óptica, recortes, peso de iconos, unidades y retroalimentación como un pase de artesanía diferenciado. No agregues funciones fuera del alcance solo para crear un momento memorable.
Inspecciona el resultado
Abre la implementación real en un navegador cuando esté disponible. Inspecciona diseños estrechos, intermedios y anchos, extremos de contenido y temas/idiomas compatibles. Corrige desbordamiento, jerarquía débil, envoltura incómoda y estados incompletos antes de micro-pulir.
Ejercita la navegación por teclado, el enfoque y una ruta completa de tarea/recuperación. Verifica los pares de contraste relevantes, el comportamiento de ampliación de texto y movimiento reducido. Distingue el cambio de tamaño de la ventana gráfica del zoom real del navegador y las capturas de pantalla de las pruebas de entrada. Ejecuta verificaciones del proyecto apropiadas para el cambio; no agregues pruebas que solo repitan elecciones de estilo.
Si un navegador/entorno de ejecución no está disponible, realiza verificaciones útiles de fuente e informa explícitamente que el comportamiento renderizado sigue sin verificar. No reemplaces la evidencia con una afirmación de que la UI se ve correcta.
Evalúa la operación y el carácter por separado. Señala qué hace que el resultado sea específico y coherente, inspecciona el interior además de la introducción, y recorre el uso repetido para interrupciones recurrentes. Una compilación o verificación de contraste aprobada no responde estas preguntas de diseño. Trata los efectos emocionales y la memorabilidad como hipótesis a menos que observaciones reales de la audiencia las respalden.
Entrega el flujo implementado, las superficies modificadas, la evidencia renderizada cuando esté disponible, las verificaciones realizadas y los límites restantes. Continúa corrigiendo problemas observados dentro del alcance hasta que el flujo cumpla con sus criterios.
Profundidad opcional: Lista de verificación de revisión de diseño Silicon.