frontend-design: interfaces con criterio, no como plantillas

Para quién es

Usa frontend-design cuando haces una interfaz nueva, o revisas una existente, y necesitas una dirección visual consciente y reconocible. Te ayuda a fijar una dirección estética, tipografías y decisiones que no parezcan valores por defecto de una plantilla.

Encaja mejor tratar este encargo como el responsable de diseño de un estudio: el cliente ya ha rechazado propuestas huecas o con aire de plantilla y está dispuesto a pagar por un punto de vista claro. Debes tomar decisiones con criterio sobre color, tipografía y composición de este brief, y puedes asumir riesgo estético cuando las razones sostienen. El material de origen no da una lista de productos de agentes ni un instalador; no lo leas como función exclusiva de un software. La página oficial de descripción es

https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md

Completar el primer intento en 3 minutos

Esta guía no da un comando de instalación. En el primer intento no inventes una ruta de repositorio ni una instrucción de gestor de paquetes. El camino recomendado es el proceso del material de origen: primero plan, luego comprobar frente al brief, después build y al final critique.

Requisito: ya tienes una tarea de interfaz, aunque el brief sea corto. El primer gesto de bajo riesgo es solo el posicionamiento: no cambiar código ni escribir archivos. Si el brief no aclara el producto o el tema, decide primero un tema concreto, un público y la tarea principal de este diseño, escríbelo como propuesta y confírmalo con quien pidió el trabajo. Antes de confirmar no entres en color ni en escribir la interfaz.

Señal de éxito: en tres frases puedes decir para quién es, qué resuelve y cuál es el tema, y solo cambias después de que la otra persona asienta o se oponga con claridad. No empieces por un fondo crema cálido cercano a #F4F1EA, más titulares serif de alto contraste y toques terracota: el material de origen lo señala como rasgo de los borradores generados que ahora se amontonan.

Casos de uso

Caso 1: si el brief carece de información de producto, alinea primero y luego diseña. Según el material de origen, propone primero un tema concreto, un público y una tarea principal, como propuesta a confirmar. El criterio de hecho es que esos tres puntos están confirmados, no que ya exista una UI completa. No indica qué herramienta usar para confirmar; vale oral o escrito. Dibujar la interfaz sin confirmar sale de este camino.

Caso 2: decidir tipografía para un brief ya alineado. El material de origen dice: titulares y cuerpo no necesitan cada uno una fuente totalmente distinta; una familia, o dos claramente diferenciadas. Elegir a propósito. No tomar «la fuente por defecto de cualquier proyecto». El resumen también menciona mantener la longitud de línea dentro de 80 caracteres, pero el extracto no describe un procedimiento de comprobación. El criterio de hecho de este caso es que el número de familias y su diferencia ya están decididos, no que ya se haya ejecutado una revisión de composición. Color y composición siguen debiendo ser de este brief; no reutilices el emparejamiento habitual de fondo crema más acento terracota.

Límites de uso

El proceso es plan, contraste con el brief, build y luego critique. Primero tema, público y tarea principal; después lo visual. Una familia tipográfica o dos; rechaza las fuentes por defecto universales. Evita el amontonamiento que nombra el material de origen: fondo crema cálido (cercano a #F4F1EA), titulares serif de alto contraste, acentos terracota o arcilla cálida.

No inventes un instalador ni una ruta dentro del repositorio. El material de origen no da lista de bibliotecas de componentes, archivo de muestra de color por defecto ni lista de clientes. Antes de escribir código o sobrescribir estilos existentes, confirma que la propuesta fue aceptada. Más allá de este posicionamiento, tipografía y trampas ya escritos, esta guía no cubre. Si solo aplicas una plantilla hecha sin elegir para este brief, no deberías seguir este camino. Alinea primero el brief y luego asume un riesgo estético justificado.