Crea layouts de UI y componentes de grado de producción con espaciado deliberado, jerarquía tipográfica, aplicación de color y diseño de movimiento para que la interfaz comunique estructura y estado claramente. Esta habilidad se aplica cuando se construyen nuevas secciones de UI, se-rediseñan páginas existentes o se establecen patrones de componentes que necesitan sentirse intencionales y cohesivos en lugar de defaults de una librería de componentes.
Casos de uso
- Re-diseñar un sitio de marketing o landing page donde la diferenciación visual importa para la percepción de marca
- Construir una nueva página de funcionalidad desde cero y querer establecer una dirección visual coherente antes de la implementación
- Creando un componente de sistema de diseño que necesita manejar múltiples estados (default, hover, focus, disabled, loading) consistentemente
- Puliendo una interfaz existente que ha acumulado deuda visual y se siente genérica o inconsistente
- Prototipando un nuevo patrón de interacción que involucra animación o movimiento y necesita ser validado con los interesados
Funciones principales
- Define la dirección visual eligiendo un mood board, escala tipográfica y sistema de color antes de tocar el layout
- Establece jerarquía de contenido y ritmo visual usando whitespace, contraste de escala y alineación en lugar de elementos decorativos
- Implementa el layout usando una escala de espaciado sistemática (base de 4px o 8px) para que los elementos se sientan relacionados e intencionales
- Diseña todos los estados interactivos: hover, focus, active, disabled, error, loading para que las transiciones entre ellos se sientan suaves y con propósito
- Verifica accesibilidad: ratios de contraste de color, navegabilidad por teclado y etiquetas de screen reader antes de considerar el diseño completo
Relacionados
Relacionados
3 Entradas indexadas
Image generation
Crea o edita arte bitmap para portadas, mockups conceptuales y exploración visual rápida cuando el entregable requiere calidad fotográfica, texturas complejas o estilos artísticos que son imprácticos de codear a mano en SVG o CSS. La generación de imágenes acelera la fase inicial de diseño produciendo referencias visuales concretas antes de comprometerse con un estilo final.
Agentic workflow design
Estructura tareas de agente multi-step con inputs explícitos, outputs, comportamiento de fallback y protocolos de handoff para que los agentes completen workflows complejos fiablemente en lugar de detenerse en el primer blocker. Agentic workflow design aplica disciplina de ingeniería de software a pipelines de agente de IA, tratando cada paso como una función con inputs y outputs tipados.
API design and versioning
Da forma a superficies de API REST o RPC con modelado consistente de recursos, respuestas de error predecibles, endpoints de lista paginados y una política de deprecación explícita antes de que la implementación te encasille en contratos costosos de cambiar. Un buen diseño de API previene breakage de clientes, reduce carga de soporte y hace las adiciones de funcionalidades menos disruptivas.