tasteskill: Habilidad de Frontend Anti-Slug
Landing pages, portafolios y rediseños. No paneles de control, no tablas de datos, no UI de productos de varios pasos. Cada regla a continuación es contextual. Ninguna se activa automáticamente. Primero lee el briefing, luego extrae solo lo que encaja.
0. INFERENCIA DEL BRIEFING (Lee la Sala Antes de Cualquier Cosa)
Antes de tocar código o ajustar parámetros, infiere lo que el usuario realmente quiere. La mayoría de los diseños generados por LLM son malos porque el modelo salta a una estética predeterminada en lugar de leer la sala.
0.A Lee estas señales primero
- Tipo de página - landing (SaaS / consumidor / agencia / evento), portafolio (dev / diseñador / estudio creativo), rediseño (conservar vs. renovar), editorial / blog.
- Palabras de ambiente que usó el usuario - "minimalista", "tranquilo", "estilo Linear", "Awwwards", "brutalista", "consumidor premium", "Apple-esco", "divertido", "B2B serio", "editorial", "de agencia", "glaseado", "tecnología oscura".
- 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 con conciencia de diseño vs. reclutador que escanea un portafolio. La audiencia elige la estética, no tu gusto.
- Activos de marca que ya existen - logo, color, tipo, 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 la preferencia estética.
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 , inclinándose hacia <sistema de diseño o familia estética>."
Ejemplos de lecturas:
- "Leyendo esto como: landing 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 solitario para gerentes de contratación, con un lenguaje editorial / tipo cinético, inclinándose hacia CSS nativo + animación basada en scroll + tipografía personalizada."
- "Leyendo esto como: rediseño de un sitio de servicio del sector público, con un lenguaje de prioridad de confianza, inclinándose hacia GOV.UK Frontend o USWDS."
0.C Si el briefing es ambiguo, haz una pregunta, no adivines
Haz exactamente una pregunta aclaratoria - nunca un volcado de varias preguntas - y solo cuando la lectura de diseño realmente diverja. Ejemplo: "¿Debería sentirse más cercano a un estilo Linear-limpio o Awwwards-experimental?"
Si puedes inferir con confianza del contexto, no preguntes. Simplemente declara la lectura de diseño y procede.
0.D Disciplina Anti-Defecto
No uses por defecto: 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 según 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 layout, movimiento y densidad a continuación está controlada por estos.
DESIGN_VARIANCE: 8- 1 = Simetría perfecta, 10 = Caos artísticoMOTION_INTENSITY: 6- 1 = Estático, 10 = Cinemático / FísicaVISUAL_DENSITY: 4- 1 = Galería de arte / Espacioso, 10 = Cabina / 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 conversacionalmente.
1.A Inferencia de diales (lectura de diseño → valores de dial)
| Señal | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "minimalista / limpio / tranquilo / editorial / estilo Linear" | 5-6 | 3-4 | 2-3 |
| "consumidor premium / Apple-esco / lujo / marca" | 7-8 | 5-7 | 3-4 |
| "divertido / salvaje / Dribbble / Awwwards / experimental / agencia" | 9-10 | 8-10 | 3-4 |
| "landing page / portafolio / sitio de marketing (por defecto)" | 7-9 | 6-8 | 3-5 |
| "prioridad de confianza / sector público / regulado / accesibilidad crítica" | 3-4 | 2-3 | 4-5 |
| "rediseño - conservar" | igualar existente | +1 | igualar existente |
| "rediseño - renovar" | +2 | +2 | igualar existente |
1.B Ajustes preestablecidos por caso de uso
| Caso de uso | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| Landing (SaaS, general) | 7 | 6 | 4 |
| Landing (Agencia / creativo) | 9 | 8 | 3 |
| Landing (Consumidor premium) | 7 | 6 | 3 |
| Portafolio (Diseñador / estudio) | 8 | 7 | 3 |
| Portafolio (Desarrollador) | 6 | 5 | 4 |
| Editorial / Blog | 6 | 4 | 3 |
| Servicio sector público | 3 | 2 | 5 |
| Rediseño - conservar | igualar | igualar+1 | igualar |
| Rediseño - renovar | +2 | +2 | igualar |
1.C Cómo los diales guían la salida
Úsalos (o los 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. BRIEFING → MAPA DEL 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 tienen un paquete oficial. No pretendas 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 briefing sugiere... | Recurre a | Por qué |
|---|---|---|
| Microsoft / SaaS empresarial / paneles | @fluentui/react-components o @fluentui/web-components | Fluent UI oficial, tokens de Microsoft, accesibilidad resuelta |
| UI estilo Google, producto con sabor Material | @material/web + tokens Material 3 | Oficial, tematizable a través de Material Theming |
| Analíticas empresariales estilo IBM | @carbon/react + @carbon/styles | Carbon oficial, patrones maduros de densidad de datos |
| Superficies de app 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 |
| Devtool / página comunitaria estilo GitHub | @primer/css o @primer/react-brand | Primer oficial; variante Brand para marketing |
| Servicio público del Reino Unido | govuk-frontend | Legal / regulatorio esperado |
| Sector público de EE.UU. / prioridad de confianza | uswds | Igual |
| MVP rápido para negocio local / agencia | Bootstrap 5.3 | Aburrido, rápido, funciona |
| Base React moderna y accesible | @radix-ui/themes | Primitivos + tema pulido |
| SaaS moderno donde tú posees los componentes | shadcn/ui (npx shadcn@latest add ...) | Tú posees el código, fácil de personalizar; nunca envíes el estado por defecto |
| SaaS moderno / marketing AI basado en Tailwind | Utilidades Tailwind v4 + variante dark: | Por defecto para construcciones independientes + equipos pequeños |
Regla de honestidad: si el briefing 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 pero luego anules 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 app Material 3.
2.B Cuando el briefing es una estética, no un sistema
Para estas direcciones, no hay un solo 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 fallback de relleno sólido para prefers-reduced-transparency. |
| Bento (cuadrículas de azulejos estilo Apple) | CSS Grid con tamaños de celda mixtos. Ninguna biblioteca posee esto. |
| Brutalismo | CSS nativo, monoespaciado, bordes sin procesar. Sin biblioteca. |
| Editorial / revista | Tipo serifa, cuadrícula asimétrica, espacios en blanco generosos. Sin biblioteca. |
| Tecnología oscura / hacker | Mono + neón de acento, motivos de terminal. Sin biblioteca. |
| Auroras / degradados de malla | SVG o degradados radiales en capas. Sin biblioteca. |
| Tipografía cinética | Animaciones CSS nativas, animaciones basadas en scroll, GSAP para secuestros. Sin biblioteca. |
| Apple Liquid Glass | Apple documenta esto solo para plataformas Apple. No hay un liquid-glass.css oficial. Las implementaciones web son aproximaciones usando 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 Client Components. 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 layouts estáticos.
- SEGURIDAD RSC: El estado global funciona SOLO en Client Components. En Next.js, envuelve los providers en un componente
- Estilizado: Tailwind v4 (por defecto). Tailwind v3 solo si el proyecto existente lo exige.
- Para v4: NO uses el plugin
tailwindcssenpostcss.config.js. Usa@tailwindcss/postcsso el plugin de Vite.
- Para v4: NO uses el plugin
- Animación: Motion (la biblioteca anteriormente conocida como Framer Motion). Importa desde
motion/react(import { motion } from "motion/react"). El paqueteframer-motiontodavía funciona como un alias heredado - prefieremotion/reacten código nuevo. - Fuentes: Siempre usa
next/font(Next.js) o auto-aloja con@font-face+font-display: swap. Nunca enlaces Google Fonts a través de<link>en producción.
3.B Estado
useState/useReducerlocal para UI aislada.- Estado global SOLO para evitar perforación profunda de props - Zustand, Jotai, o contexto de React.
- NUNCA uses
useStatepara rastrear valores continuos impulsados por entrada del usuario (posición del mouse, progreso de scroll, física de puntero, hover magnético). UsauseMotionValue/useTransform/useScrollde Motion.useStatere-renderiza 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 solicita explícitamente o el proyecto ya depende de él. - NUNCA crees iconos SVG a mano. Si falta un glifo, instala una segunda biblioteca o compón a partir de primitivos - no dibujes rutas de icono desde cero.
- Una familia por proyecto. No mezcles Phosphor con Lucide en el mismo árbol de componentes.
- Estandariza
strokeWidthglobalmente (ej.1.5o2.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 solicita explícitamente un ambiente divertido / estilo chat / nativo social - e incluso entonces úsalos con moderación e intención.
3.E Capacidad de Respuesta y Mecánica de Layout
- Estandariza puntos de quiebre (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). - Contiene los layouts de página usando
max-w-[1400px] mx-autoomax-w-7xl. - Estabilidad del viewport: NUNCA uses
h-screenpara secciones Hero de altura completa. SIEMPRE usamin-h-[100dvh]para evitar saltos de layout en móvil (barra de direcciones de iOS Safari). - Grid sobre Flex-Math: NUNCA uses matemáticas complejas de porcentaje 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, muestra el comando de instalación primero. Nunca asumas que una biblioteca existe.
4. DIRECTIVAS DE INGENIERÍA DE DISEÑO (Corrección de Sesgo)
Los LLM usan clichés por defecto. Anula estos defectos de manera proactiva. Cada regla tiene una ruta de anulación consciente del contexto.
4.1 Tipografía
-
Display / Titulares: Por defecto
text-4xl md:text-6xl tracking-tighter leading-none. -
Cuerpo / Párrafos: Por defecto
text-base text-gray-600 leading-relaxed max-w-[65ch]. -
Elección de fuente sans:
- Desaconsejado como defecto:
Inter. EligeGeist,Outfit,Cabinet Grotesk,Satoshi, o una serifa apropiada para la marca primero. - Anulación: Inter es aceptable cuando el usuario solicita explícitamente una sensación neutral / estándar / estilo Linear, o cuando el briefing es un sitio de sector público / prioridad de accesibilidad.
- Desaconsejado como defecto:
-
Combinaciones a conocer:
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
DISCIPLINA SERIFA (MUY DESACONSEJADA COMO DEFECTO):
- La serifa está muy desaconsejada como la fuente por defecto para cualquier proyecto. "Se siente creativo / premium / editorial" NO es una razón para recurrir a la serifa. El modelo mental por defecto del agente de que "briefing 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 verdadero:
- El briefing 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), display sans-serif por defecto (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Las fuentes sans display no son "aburridas" — son la opción por defecto por la misma razón que el negro es el predeterminado en la moda.
- REGLAS DE ÉNFASIS (relacionado): Cuando quieras enfatizar una palabra dentro de un titular (el movimiento cinético de "y diseño
espacial"), usa cursiva o negrita de la MISMA fuente. No inyectes una palabra serifa aleatoria en un titular sans (o viceversa) solo para añadir interés visual. El énfasis de familia mixta es amateur. El énfasis en cursiva/negrita de la misma familia es el movimiento correcto. - Específicamente PROHIBIDAS como defecto:
FraunceseInstrument_Serif(las dos serifas display favoritas de los LLM). - Si una serifa está justificada (raro, según lo anterior), rota de 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
...
[truncado para traducción]