tasteskill: Habilidad Frontend Anti-Plantilla

Páginas de aterrizaje, portafolios y rediseños. No paneles de control, tablas de datos o interfaces de productos con múltiples pasos. Cada regla a continuación es contextual. Ninguna se activa automáticamente. Primero lee el brief, luego extrae solo lo que encaja.

0. INFERENCIA DEL BRIEF (Lee la Situación Antes de Cualquier Otra Cosa)

Antes de tocar código o ajustar parámetros, infiere lo que el usuario realmente quiere. La mayoría del diseño generado por LLM es malo porque el modelo salta a una estética predeterminada en lugar de leer la situación.

0.A Lee primero estas señales

Tipo de página - aterrizaje (SaaS / consumidor / agencia / evento), portafolio (dev / diseñador / estudio creativo), rediseño (conservar vs. renovación), editorial / blog.
Palabras de estilo que usó el usuario - "minimalista", "tranquilo", "estilo Linear", "Awwwards", "brutalista", "consumidor premium", "estilo Apple", "divertido", "B2B serio", "editorial", "estilo agencia", "glassy", "dark tech".
Señales de referencia - URLs que enlazó, capturas de pantalla que pegó, productos que nombró, marcas con las que compite.
Audiencia - Panel de compras B2B vs. consumidor consciente del diseño vs. reclutador escaneando un portafolio. La audiencia elige la estética, no tu gusto.
Activos de marca que ya existen - logotipo, color, tipografía, fotografía. Para rediseños, estos son material de partida, no entrada opcional (ver Sección 11).
Restricciones silenciosas - audiencias que priorizan accesibilidad, sector público, industrias reguladas, comercio basado en confianza, productos infantiles. Estas restricciones ANULAN las preferencias estéticas.

0.B Genera una "Lectura de Diseño" de una línea antes de generar

Antes de cualquier código, indica en una línea: "Leyendo esto como: <tipo de página> para , con un lenguaje de estilo , inclinándose hacia <sistema de diseño o familia estética>."

Ejemplos de lectura:

"Leyendo esto como: aterrizaje B2B SaaS para compradores técnicos, con un lenguaje minimalista estilo Linear, inclinándose hacia utilidades Tailwind + Geist + movimiento moderado."
"Leyendo esto como: portafolio de diseñador individual para gerentes de contratación, con un lenguaje editorial / cinético-tipográfico, inclinándose hacia CSS nativo + animaciones basadas en scroll + tipografía personalizada."
"Leyendo esto como: rediseño de un sitio de servicios del sector público, con un lenguaje de confianza primero, inclinándose hacia GOV.UK Frontend o USWDS."

0.C Si el brief es ambiguo, haz una pregunta, no adivines

Haz exactamente una pregunta aclaratoria —nunca un volcado de múltiples preguntas— y solo cuando la lectura de diseño realmente diverja. Ejemplo: "¿Debería sentirse más cercano a lo limpio de Linear o a lo experimental de Awwwards?"

Si puedes inferir con confianza desde el contexto, no preguntes. Simplemente declara la lectura de diseño y procede.

0.D Disciplina Anti-Defecto

No defaults a: degradados púrpura de IA, héroe centrado sobre malla oscura, tres tarjetas de características iguales, glassmorfismo genérico en todo, microanimaciones de bucle infinito en todas partes, Inter + slate-900. Estos son los defectos de los LLM. Ve más allá de ellos deliberadamente basándote en la lectura de diseño.

1. LOS TRES DIALES (Configuración Principal)

Después de la lectura de diseño, establece tres diales. Cada decisión de diseño, movimiento y densidad a continuación depende de estos.

DESIGN_VARIANCE: 8 - 1 = Simetría Perfecta, 10 = Caos Artístico
MOTION_INTENSITY: 6 - 1 = Estático, 10 = Cinematográfico / Física
VISUAL_DENSITY: 4 - 1 = Galería de Arte / Espacioso, 10 = Cabina de Mando / Datos Densos

Línea base: 8 / 6 / 4. Úsalos a menos que la lectura de diseño los anule. No le pidas al usuario que edite este archivo; las anulaciones ocurren de forma conversacional.

1.A Inferencia de Diales (lectura de diseño → valores de diales)

Señal	VARIANCE	MOTION	DENSITY
"minimalista / limpio / tranquilo / editorial / estilo Linear"	5-6	3-4	2-3
"consumidor premium / estilo Apple / lujo / marca"	7-8	5-7	3-4
"divertido / salvaje / Dribbble / Awwwards / experimental / agencia"	9-10	8-10	3-4
"página de aterrizaje / portafolio / sitio de marketing (por defecto)"	7-9	6-8	3-5
"confianza primero / sector público / regulado / accesibilidad crítica"	3-4	2-3	4-5
"rediseño - conservar"	igualar existente	+1	igualar existente
"rediseño - renovación"	+2	+2	igualar existente

1.B Preajustes por Caso de Uso

Caso de uso	VARIANCE	MOTION	DENSITY
Aterrizaje (SaaS, convencional)	7	6	4
Aterrizaje (Agencia / creativo)	9	8	3
Aterrizaje (Consumidor premium)	7	6	3
Portafolio (Diseñador / estudio)	8	7	3
Portafolio (Desarrollador)	6	5	4
Editorial / Blog	6	4	3
Servicio del sector público	3	2	5
Rediseño - conservar	igualar	igualar+1	igualar
Rediseño - renovación	+2	+2	igualar

1.C Cómo los Diales Guían la Salida

Usa estos (o valores anulados por el usuario) como variables globales. Las referencias cruzadas a lo largo de este documento se refieren a estos nombres de variables exactos; nunca inventes alias como LAYOUT_VARIANCE o ANIM_LEVEL.

2. MAPA DE BRIEF → SISTEMA DE DISEÑO

Una vez que tengas la lectura de diseño (Sección 0) y los diales (Sección 1), elige la base correcta. No inventes CSS para cosas que tengan un paquete oficial. No finjas que una tendencia estética es un sistema oficial.

2.A Cuándo recurrir a un sistema de diseño real (usa paquetes oficiales)

El brief se lee como…	Recurre a	Por qué
Microsoft / SaaS empresarial / paneles de control	`@fluentui/react-components` o `@fluentui/web-components`	Fluent UI oficial, tokens de Microsoft, accesibilidad resuelta
UI tipo Google, producto con sabor Material	`@material/web` + tokens Material 3	Oficial, personalizable mediante Material Theming
B2B / análisis empresarial estilo IBM	`@carbon/react` + `@carbon/styles`	Carbon oficial, patrones maduros de densidad de datos
Superficies de apps de Shopify	componentes web `polaris.js` / Polaris React	Requerido para UI de administración de Shopify
Producto estilo Atlassian / Jira	`@atlaskit/*` + `@atlaskit/tokens`	DS oficial de Atlassian
Página de comunidad / herramienta de desarrollo estilo GitHub	`@primer/css` o `@primer/react-brand`	Primer oficial; variante Brand para marketing
Servicio del sector público del Reino Unido	`govuk-frontend`	Esperado legal / regulatorio
Sector público de EE. UU. / confianza primero	`uswds`	Igual
MVP rápido de agencia / negocio local	Bootstrap 5.3	Aburrido, rápido, funciona
Base React moderna y accesible	`@radix-ui/themes`	Primitivas + tema pulido
SaaS moderno donde tú eres dueño de los componentes	shadcn/ui (`npx shadcn@latest add ...`)	Tú eres dueño del código, fácil de personalizar; nunca envíes el estado por defecto
Marketing SaaS moderno basado en Tailwind / IA	Utilidades Tailwind v4 + variante `dark:`	Predeterminado para construcciones independientes y de equipos pequeños

Regla de honestidad: si el brief se lee como uno de los sistemas anteriores, instala y usa el paquete oficial. No recrees su CSS a mano. No importes los tokens de un sistema para luego anular el 90% de ellos.

Un sistema por proyecto. No mezcles Fluent React con Carbon en el mismo árbol. No importes componentes de shadcn/ui en una aplicación de Material 3.

2.B Cuando el brief es una estética, no un sistema

Para estas direcciones, no hay un único paquete oficial. Construye con CSS nativo + Tailwind + una biblioteca de componentes mantenida. Sé honesto en los comentarios del código sobre qué es inspiración prestada vs. material oficial.

Estética	Implementación honesta
Glassmorfismo / "vidrio esmerilado"	`backdrop-filter`, bordes en capas, superposiciones de resaltado. Proporciona un fallback de relleno sólido para `prefers-reduced-transparency`.
Bento (cuadrículas de mosaicos estilo Apple)	Cuadrícula CSS con tamaños de celda mixtos. Ninguna biblioteca posee esto.
Brutalismo	CSS nativo, monoespacio, bordes en bruto. Sin biblioteca.
Editorial / revista	Tipo serifa, cuadrícula asimétrica, espacios en blanco generosos. Sin biblioteca.
Dark tech / hacker	Mono + neón de acento, motivos de terminal. Sin biblioteca.
Aurora / degradados de malla	SVG o degradados radiales en capas. Sin biblioteca.
Tipografía cinética	Animaciones CSS nativas, animaciones basadas en scroll, GSAP para secuencias de comandos. Sin biblioteca.
Apple Liquid Glass	Apple documenta esto solo para plataformas Apple. No hay un `liquid-glass.css` oficial. Las implementaciones web son aproximaciones que usan `backdrop-filter` + bordes en capas + resaltados. Etiqueta claramente como aproximación.

3. ARQUITECTURA Y CONVENCIONES POR DEFECTO

A menos que la lectura de diseño elija un sistema de diseño real (Sección 2.A), estos son los valores predeterminados:

3.A Stack

Framework: React o Next.js. Por defecto, Server Components (RSC).
- SEGURIDAD RSC: El estado global funciona SOLO en Componentes Cliente. En Next.js, envuelve los providers en un componente "use client".
- AISLAMIENTO DE INTERACTIVIDAD: Cualquier componente que use Motion, escuchadores de scroll o física de puntero DEBE ser una hoja aislada con 'use client' en la parte superior. Los Server Components renderizan solo diseños estáticos.
Estilizado: Tailwind v4 (por defecto). Tailwind v3 solo si el proyecto existente lo requiere.
- Para v4: NO uses el plugin tailwindcss en postcss.config.js. Usa @tailwindcss/postcss o el plugin de Vite.
Animación: Motion (la biblioteca anteriormente conocida como Framer Motion). Importa desde motion/react (import { motion } from "motion/react"). El paquete framer-motion aún funciona como un alias heredado: prefiere motion/react en código nuevo.
Fuentes: Siempre usa next/font (Next.js) o auto-aloja con @font-face + font-display: swap. Nunca enlaces fuentes de Google Fonts mediante <link> en producción.

3.B Estado

useState / useReducer local para UI aislada.
Estado global SOLO para evitar perforación profunda de props: Zustand, Jotai o contexto de React.
NUNCA uses useState para rastrear valores continuos impulsados por la entrada del usuario (posición del ratón, progreso de scroll, física de puntero, hover magnético). Usa useMotionValue / useTransform / useScroll de Motion. useState vuelve a renderizar el árbol de React en cada cambio y colapsa en móvil.

3.C Iconos

Bibliotecas permitidas (orden de prioridad): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
Desaconsejado: lucide-react. Aceptable solo cuando el usuario lo solicite explícitamente o el proyecto ya dependa de él.
NUNCA crees iconos SVG a mano. Si falta un glifo, instala una segunda biblioteca o compón a partir de primitivas; no dibujes trazados de iconos desde cero.
Una familia por proyecto. No mezcles Phosphor con Lucide en el mismo árbol de componentes.
Estandariza strokeWidth globalmente (por ejemplo, 1.5 o 2.0).

3.D Política de Emojis

Desaconsejados por defecto en código, marcado y texto visible. Reemplaza los símbolos con glifos de bibliotecas de iconos. Anulación: permite emojis solo cuando el usuario solicite explícitamente un estilo divertido / tipo chat / social-nativo, e incluso entonces úsalos con moderación e intención.

3.E Diseño Responsive y Mecánica de Maquetación

Estandariza los puntos de interrupción (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
Contén los diseños de página usando max-w-[1400px] mx-auto o max-w-7xl.
Estabilidad de la ventana gráfica: NUNCA uses h-screen para secciones de Héroe de altura completa. SIEMPRE usa min-h-[100dvh] para evitar saltos de diseño en móvil (barra de direcciones de iOS Safari).
Cuadrícula sobre Flex-Matemáticas: NUNCA uses matemáticas de porcentajes complejas de flexbox (w-[calc(33%-1rem)]). SIEMPRE usa CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Verificación de Dependencias (obligatorio)

Antes de importar CUALQUIER biblioteca de terceros, verifica package.json. Si el paquete falta, genera primero el comando de instalación. Nunca asumas que una biblioteca existe.

4. DIRECTRICES DE INGENIERÍA DE DISEÑO (Corrección de Sesgos)

Los LLM defaults a clichés. Anula estos defaults de forma proactiva. Cada regla tiene una ruta de anulación contextual.

4.1 Tipografía

Pantalla / Titulares: Default text-4xl md:text-6xl tracking-tighter leading-none.
Cuerpo / Párrafos: Default text-base text-gray-600 leading-relaxed max-w-[65ch].
Elección de fuente sans:
- Desaconsejado como default: Inter. Elige primero Geist, Outfit, Cabinet Grotesk, Satoshi o una serifa apropiada para la marca.
- Anulación: Inter es aceptable cuando el usuario solicita explícitamente un estilo neutral / estándar / tipo Linear, o cuando el brief es para un sitio de sector público / accesible primero.
Combinaciones a conocer: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.
DISCIPLINA DE SERIFA (MUY DESACONSEJADA COMO DEFAULT):
- La serifa está muy desaconsejada como fuente predeterminada para cualquier proyecto. "Se siente creativo / premium / editorial" NO es una razón para recurrir a la serifa. El modelo mental default del agente de que "brief creativo = serifa" es la señal de IA más probada en rondas de producción.
- La serifa solo es aceptable cuando UNO de estos es explícitamente cierto:
  - El brief de la marca menciona literalmente una fuente serifa, O
  - La familia estética es genuinamente editorial / lujo / publicación / manuscrito / herencia / vintage Y puedes articular por qué esta serifa específica encaja con esta marca específica
- Para todo lo demás (agencia creativa, estudio de diseño, marca moderna, consumidor premium, portafolio, estilo de vida), default sans-serif de pantalla (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Las fuentes sans de pantalla no son "aburridas" — son el default por la misma razón que el negro es el default en la moda.
- REGLAS DE ÉNFASIS (relacionadas): Cuando quieras enfatizar una palabra dentro de un titular (el movimiento cinético de "diseño y espacial"), usa cursiva o negrita de la MISMA fuente. NO insertes una palabra serifa aleatoria en un titular sans (o viceversa) solo para agregar interés visual. El énfasis de familias mixtas es amateur. El énfasis en cursiva/negrita dentro de la misma familia es el movimiento correcto.
- Específicamente PROHIBIDOS como defaults: Fraunces e Instrument_Serif (las dos serifas de pantalla favoritas de los LLM).
- Si se justifica una serifa (raro, según lo anterior), rota desde este grupo, NO reutilices la misma serifa en proyectos consecutivos: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I…

5. BUCLES DE DISEÑO (Las Reglas de Verificación que los LLM Omiten)

5.A El Sistema de Diseño es el Flujo, No la Meta

Primero principio, luego sistema: No elijas nunca un sistema de diseño antes de entender el problema. Los sistemas son aceleradores de consistencia, no generadores de dirección.
Sin sistema falso: Si no hay un DS oficial con paquete npm, no inventes uno. const colors = {...} no es un sistema de diseño. --my-bento-dark no es un token. Los tokens reales pertenecen a bibliotecas reales.

5.B El Problema del "Rollo de Piano" (Modularidad vs. Escribir Todo en Línea Recta)

Los LLM tienden a escribir secciones enteras de página en un solo componente (const Hero = () => <section>...todo...</section>). Esto produce archivos de 400 líneas que son imposibles de mantener.
Divide en una jerarquía de componentes plana con props atómicas:

// ✅ Bien
<Hero>
  <Badge text="Nuevo: v2.0" />
  <Heading>Construye más rápido</Heading>
  <Subtitle>Con stack moderno</Subtitle>
  <CTA href="/start" variant="primary">
    Comenzar
  </CTA>
</Hero>

// ❌ Mal (Rollo de piano)
<section className="..." >
  <div className="...bg-gradient-to-r..." >
    <div className="..." >
      <span>Nuevo: v2.0</span>
      <h1>Construye más rápido</h1>
      <p>Con stack moderno</p>
      <a>Comenzar</a>
    </div>
  </div>
</section>

5.C Principio de Toc-Toc (Verificación de Pertinencia)

Para cada sección que añadas, pregúntate: "¿Esto responde directamente al objetivo del usuario, o es un relleno estándar de marketing SaaS?"

Secciones prohibidas a menos que el usuario las pida explícitamente:

❌ "Cómo funciona" en 3 pasos
❌ "Testimonios" con caras genéricas de IA
❌ "Preguntas Frecuentes" con acordeón
❌ "Lista de Características" con iconos circulares
❌ "Hoja de Precios" de 3 columnas

Regla de reemplazo: Si el usuario describe una aplicación real, construye una demostración real. "Prueba nuestro producto" → enlace o formulario funcional, no captura de pantalla de maqueta.

5.D Verificación de Contraste (Legibilidad Básica)

El texto claro sobre fondo claro es el error número 1. Si usas un fondo degradado o con textura, pon texto oscuro en la mitad más clara. Nunca coloques texto sobre un degradado sin una capa de superposición.
Superposiciones degradadas: Al menos from-black/60 via-black/40 to-transparent para héroe con imagen de fondo.
El contraste no es negociable. No ofrezcas "versiones más claras" como opción.

5.E Capa de Estado Vacío / Carga / Error

Toda UI construida por el agente DEBE manejar estos estados para cualquier contenido proveniente de API o base de datos:

Cargando: Skeleton, no spinner giratorio.
Vacío: Mensaje informativo + CTA si es relevante.
Error: Mensaje legible + botón de reintento. Sin trazas de pila.

No aceptes excusas. "La API siempre responderá" es falso. "Next.js maneja esto por defecto" es falso. "Demasiada verbosidad para el ejemplo" es un corte de esquina.

6. DIRECTRICES DE ANIMACIÓN (Motion-React)

Siempre importa Motion, no Framer: import { motion } from "motion/react"
Animaciones preferidas: Animación de entrada (initial, animate, viewport={{ once: true }}), transformaciones de hover (whileHover={{ scale: 1.02 }}), y animaciones de scroll. Evita bucles infinitos.
Siempre respeta prefers-reduced-motion: Envuelve las animaciones que no sean necesarias para la funcionalidad en un hook o proveedor que lea prefers-reduced-motion. Nunca desactives la reducción de movimiento.
Sin animaciones de carga: Ninguna animación de bienvenida / introducción / carga. El usuario ve el contenido inmediatamente o la animación ocurre mientras el contenido es visible (animación de entrada).
Límites de intensidad:
- DIAL MOTION_INTENSITY 1-3: Animación de entrada estática a la vista. Sin hover. Sin parallax.
- DIAL MOTION_INTENSITY 4-6: Entrada + hover + desplazamiento suave (scroll suave nativo).
- DIAL MOTION_INTENSITY 7-8: Animaciones de scroll, revelaciones paralaje sutiles.
- DIAL MOTION_INTENSITY 9-10: Física cinética, seguimiento de ratón, persecución de puntero.

7. REGISTRO Y SEÑALES DE VERIFICACIÓN (Verificación Previa al Vuelo)

Antes de que el agente marque una tarea como completa (Ctrl/Cmd+Enter), DEBE ejecutar esta verificación:

8. COMANDOS DE HERRAMIENTAS EQUIVALENTES

Acción	Comando
Tailwind v4 init	`npm install tailwindcss @tailwindcss/vite` (Vite) o usa `@tailwindcss/postcss` (Next.js)
Instalar shadcn/ui	`npx shadcn@latest init` + `npx shadcn@latest add <componente>`
Instalar Motion	`npm install motion`
Phosphor Icons	`npm install @phosphor-icons/react`
Hugeicons React	`npm install hugeicons-react`
Instalar paquete Radix UI	`npm install @radix-ui/<primitiva>`
React Router	`npm install react-router-dom`
Next.js App Router	Usa el enrutamiento de archivos de Next.js (`app/`), no React Router

9. RESUMEN DE REGLAS DE ALTO NIVEL (No Omitas Estas)

Lee el brief. Sin inferencia de lectura de diseño, no generes nada. Sin excepción.
Dial antes de código. Sin valores de dial configurados, no escribas CSS. Sin excepción.
Sistema de diseño primero. Si el brief coincide con un sistema oficial, úsalo. No inventes CSS a mano para cosas que ya existen como paquetes.
Componentes pequeños y planos. Rollos de piano prohibidos. Sin archivos de 400 líneas.
Sin estados sin manejar. Toda ruta de datos debe manejar carga, datos vacíos y error.
Construcción limpia. Sin errores de TypeScript. Sin comentarios de IA. Sin texto de relleno.
Serifa = muy desaconsejada. Justifícala en el contexto de la marca, no como opción estética default.
Énfasis de fuente: Cursiva siempre, serifa+sans mixto nunca.
Herramientas correctas: Motion (no Framer), motion/react (no motion), Tailwind v4 (no v3 a menos que sea heredado).
Sin emojis ni iconos SVG hechos a mano.

Esta especificación está diseñada para ser estática o leída contextualmente según se active. Si estás usando Claude Code, Cursor, Codex, etc., lee esto como datos de configuración, no como prompt. Si la usas como prompt, max tokens deben ser >= 8192 para el documento completo.

Preguntar en tu IA favorita

Documentación