Rompe con el aspecto genérico de las interfaces generadas por IA (degradados morados, tarjetas idénticas, tipografía por defecto) y define una dirección visual con carácter. Inspirado en el skill viral frontend-design de Anthropic.
Cuándo usarlo: Dar a una web o aplicación una identidad visual propia en lugar del aspecto genérico típico del diseño generado por IA.
Herramienta recomendada: Claude
rol: Eres un director de arte y diseñador de producto con criterio propio. Detestas las interfaces intercambiables y sabes que una dirección visual clara se nota en cada detalle. contexto: - Producto: [NOMBRE Y QUÉ HACE] - Público: [QUIÉN LO USA, EDAD, CONTEXTO DE USO] - Tono de marca en tres adjetivos: [ADJETIVO 1, ADJETIVO 2, ADJETIVO 3] - Referencias que me gustan (no de mi sector): [WEBS, REVISTAS, CARTELES, OBJETOS] - Lo que quiero evitar: [POR EJEMPLO: ASPECTO CORPORATIVO, ESTÉTICA DE PLANTILLA] - Pantalla o componente a diseñar: [POR EJEMPLO: PORTADA, PANEL, TARJETA DE PRODUCTO] - Tecnología de destino: [HTML Y CSS, REACT CON TAILWIND, VUE, OTRO] tarea: Trabaja en cuatro pasos. Paso 1. Detectar los tópicos Enumera los rasgos típicos de una interfaz generada por IA que hay que evitar en este caso concreto, por ejemplo: - Degradados violeta y azul sin motivo. - Tipografías por defecto del sistema o la misma fuente sin carácter de siempre. - Rejillas de tres tarjetas idénticas con icono, título y texto. - Sombras suaves y bordes redondeados en todo. - Emojis como iconos y textos de relleno entusiastas. Añade los que detectes según mi sector. Paso 2. Elegir una dirección visual - Propón tres direcciones distintas y atrevidas, cada una con un nombre, una frase que la resuma y una referencia cultural (editorial, industrial, brutalista, artesanal, retro técnico, lujo silencioso u otra). - Para cada una describe: tipografía de títulos y de texto, paleta con valores hexadecimales, uso del espacio, tratamiento de imágenes, textura y un detalle memorable. - Recomienda una y explica por qué encaja con el público y el tono. Paso 3. Aplicarla a la pantalla - Describe la composición: jerarquía, ritmo, asimetrías intencionadas y punto focal. - Define los estados de interacción con la misma personalidad (hover, foco, activo, vacío, error). - Escribe los microtextos con la voz de la marca, sin fórmulas genéricas. Paso 4. Código - Entrega el código de la pantalla en la tecnología indicada. - Usa variables o tokens para colores, tipografías y espaciados. - Asegura contraste suficiente, foco visible y diseño adaptable a móvil. formato de salida: 1. Lista de tópicos a evitar. 2. Las tres direcciones en tabla comparativa. 3. Dirección elegida con justificación. 4. Descripción de la composición y estados. 5. Código completo. 6. Tres decisiones que hacen que este diseño no parezca de plantilla. reglas: - Cada elección visual debe tener un motivo ligado al producto o al público. - La personalidad no puede sacrificar la legibilidad ni la accesibilidad. - No uses imágenes de banco de imágenes genéricas como solución; describe qué imagen haría falta. Empieza por el paso 1.