Skill de Sistema de Diseño — UI/UX Profesional, Espaciado y Arquitectura Multipágina
Este skill impone estándares de diseño profesional: paletas de colores adecuadas, tipografía, espaciado de secciones, límites de navegación, páginas detalladas de servicios/productos, cero emojis y arquitectura de sitio web multipágina. Stack recomendado: Astro para sitios estáticos/de contenido, desplegado en Cloudflare Pages.
⚠️ OBLIGATORIO: Regla de Sitio Web Multipágina
NUNCA crees una única página de aterrizaje cuando el usuario solicite un sitio web.
Cuando el usuario solicite un sitio web (p. ej., "sitio de agencia de marketing", "sitio web de restaurante", "sitio de empresa"), DEBES crear un sitio web multipágina COMPLETO con las siguientes páginas como mínimo:
Páginas Estándar del Sitio Web (OBLIGATORIO)
| Página | Propósito | Prioridad |
|---|---|---|
| Inicio | Hero, propuesta de valor, secciones clave CTA | Requerido |
| Acerca de | Historia de la empresa, equipo, misión, valores | Requerido |
| Servicios | Página de LISTADO de servicios con enlaces a detalle | Requerido |
| Detalle de Servicio | Página individual por servicio (p. ej., /servicios/web) | Requerido |
| Contacto | Formulario de contacto, mapa, teléfono, email, horarios | Requerido |
| Productos/Portafolio | Página de LISTADO de productos con enlaces a detalle | Requerido |
Páginas de Servicio — DETALLADAS (NO Genéricas)
Cada servicio DEBE tener su PROPIA página dedicada. La página de listado de servicios muestra tarjetas/resúmenes que enlazan a páginas de detalle individuales.
❌ PROHIBIDO:
- Página /servicios con todos los servicios listados pero SIN páginas individuales
- Una página /servicios genérica con descripciones cortas
- Servicios descritos en solo 2-3 líneas de texto
- Sin precios, proceso ni entregables por servicio
✅ ESTRUCTURA REQUERIDA:
/servicios → Página de listado (tarjetas con imagen + título + extracto + CTA)
/servicios/diseno-web → Página de detalle (descripción, proceso, entregables, precios, FAQ, CTA)
/servicios/seo → Página de detalle (descripción, proceso, entregables, precios, FAQ, CTA)
/servicios/redes-sociales → Página de detalle (descripción, proceso, entregables, precios, FAQ, CTA)
Cada página de detalle de servicio DEBE incluir:
- Descripción: 3-5 párrafos explicando el servicio
- Proceso: Paso a paso (1. Descubrimiento → 2. Diseño → 3. Desarrollo → 4. Lanzamiento)
- Entregables: Lo que recibe el cliente
- Niveles de precios o "Desde $X" (o CTA para cotización personalizada)
- Sección FAQ: 3-5 preguntas comunes
- CTA: "Solicitar Cotización", "Reservar Consulta", "Iniciar Proyecto"
- Testimonios o casos de estudio (si están disponibles)
Páginas de Producto — DETALLADAS (NO Genéricas)
Cada producto DEBE tener su PROPIA página dedicada. La página de listado de productos muestra tarjetas que enlazan a páginas de detalle individuales.
❌ PROHIBIDO:
- Página /productos con una lista o cuadrícula simple y SIN páginas de detalle
- Productos descritos en una sola tarjeta sin especificaciones
- Sin precios, características ni imágenes por producto
✅ ESTRUCTURA REQUERIDA:
/productos → Página de listado (tarjetas con imagen + nombre + precio extracto + CTA)
/productos/producto-a → Página de detalle (galería, descripción completa, especificaciones, precios, reseñas, relacionados)
/productos/producto-b → Página de detalle (galería, descripción completa, especificaciones, precios, reseñas, relacionados)
Cada página de detalle de producto DEBE incluir:
- Galería de imágenes: 3-5 imágenes del producto
- Descripción completa: Características, especificaciones, materiales
- Precios: Visualización clara del precio
- CTA: "Añadir al Carrito", "Solicitar Cotización", "Comprar Ahora"
- Sección de productos relacionados
- Reseñas/testimonios (si están disponibles)
Páginas Adicionales (Según Tipo de Negocio)
| Tipo de Negocio | Páginas Adicionales |
|---|---|
| Agencia | Portafolio, Casos de Estudio, Equipo, Proceso, Precios |
| Restaurante | Menú, Reservas, Galería, Chef/Historia, Eventos Privados |
| Comercio Electrónico | Tienda, Detalle de Producto, Carrito, Pago, Cuenta, Lista de Deseos |
| SaaS | Características, Precios, Docs, Blog, Changelog, Estado |
| Portafolio | Proyectos, Acerca de Mí, Currículum, Testimonios, Contacto |
| Bienes Raíces | Listados, Detalle de Propiedad, Agentes, Vecindarios, Calculadora Hipotecaria |
| Salud | Servicios, Médicos/Equipo, Citas, Portal del Paciente, Ubicaciones |
| Educación | Programas, Cursos, Facultad, Admisiones, Vida Estudiantil, Calendario |
| Legal | Áreas de Práctica, Abogados, Testimonios, Recursos, Consulta Gratuita |
| Sin Fines de Lucro | Misión, Programas, Impacto, Involúcrate, Donar, Eventos |
Cuándo Preguntar Sobre las Páginas
Usa AskUserQuestion para confirmar la estructura de páginas:
AskUserQuestion({
questions: [
{
question: "¿Qué páginas debe incluir el sitio web?",
header: "Páginas",
options: [
{ label: "Sitio Completo", description: "Inicio + Acerca de + Servicios + Productos + Contacto (recomendado)" },
{ label: "Estándar", description: "Inicio + Acerca de + Servicios + Contacto" },
{ label: "Extendido", description: "Sitio Completo + Blog + FAQ + Portafolio + Precios" }
]
}
]
})
Anti-Patrón: Página de Aterrizaje Única
❌ PROHIBIDO (cuando el usuario solicita "un sitio web"):
- Crear index.html como la ÚNICA página
- Poner todo el contenido en una sola página desplazable
- Llamarlo "sitio web" cuando es un único archivo HTML
- Secciones que pretenden ser páginas (p. ej., #about, #services, #contact)
✅ REQUERIDO:
- Ruta/página separada por sección (p. ej., /acerca-de, /servicios, /contacto)
- Cada página tiene su propio diseño, metaetiquetas y optimización SEO
- Menú de navegación que enlaza todas las páginas
- Componentes compartidos de encabezado/pie de página
- Sistema de diseño consistente en todas las páginas
- Páginas de detalle INDIVIDUALES para cada servicio y producto
La ÚNICA excepción: El usuario dice EXPLÍCITAMENTE "página de aterrizaje" o "sitio de una página".
⚠️ OBLIGATORIO: Política de Cero Emojis
Los sitios web profesionales NO usan emojis. Punto.
❌ PROHIBIDO:
- 🚀 🎯 💡 ✨ 🏆 📱 💻 🛒 📧 📞 ✅ ❌ 🔥 ⭐ 💪 🎨 📊 🔒 🌍 emojis en cualquier parte del sitio web
- Emojis como iconos de secciones
- Emojis en encabezados, botones o CTAs
- Emojis en etiquetas de navegación
- Emojis en títulos meta o descripciones
✅ REQUERIDO:
- Usar iconos SVG de bibliotecas de iconos (Lucide, Heroicons, Phosphor, Tabler)
- Usar formas CSS o elementos decorativos para interés visual
- Usar componentes de iconos adecuados (<svg> o fuente de iconos)
- Texto plano para todos los encabezados, botones y etiquetas
Bibliotecas de Iconos (usa una, sé consistente):
| Biblioteca | Instalar | Estilo | Mejor Para |
|---|---|---|---|
| Lucide | npm install lucide-react | Limpio, moderno | La mayoría de sitios |
| Heroicons | npm install @heroicons/react | Negrita, clara | Paneles, SaaS |
| Phosphor | npm install @phosphor-icons/react | Flexible, 6 pesos | Proyectos versátiles |
| Tabler | npm install @tabler/icons-react | Contorno | Paneles de admin |
⚠️ OBLIGATORIO: Espaciado de Secciones
Las secciones NUNCA deben tocarse entre sí. Cada sección necesita espacio para respirar.
Reglas de Espaciado Mínimo
| Elemento | Relleno Mínimo (arriba/abajo) | Variable CSS |
|---|---|---|
| Secciones de página | var(--space-20) (80px) | --section-padding |
| Sección hero | var(--space-32) (128px) | --hero-padding |
| Relleno superior del pie | var(--space-32) (128px) | --footer-padding |
| Altura del encabezado | var(--space-16) (64px) | --header-height |
| Entre bloques de contenido | var(--space-12) (48px) | --block-gap |
| Sección CTA | var(--space-20) (80px) | --cta-padding |
CSS de Espaciado de Secciones
:root {
--section-padding: clamp(4rem, 8vw, 6rem); /* 64-96px */
--hero-padding: clamp(6rem, 12vw, 10rem); /* 96-160px */
--footer-padding: clamp(5rem, 10vw, 8rem); /* 80-128px */
--header-height: 4rem; /* 64px */
--block-gap: clamp(2rem, 4vw, 3rem); /* 32-48px */
}
section {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
.hero {
padding-top: var(--hero-padding);
padding-bottom: var(--hero-padding);
min-height: 70vh;
}
footer {
padding-top: var(--footer-padding);
padding-bottom: var(--space-12);
margin-top: 0; /* NUNCA colapsar el espaciado del pie */
}
/* Secciones alternas obtienen fondos diferentes */
section:nth-of-type(even) {
background-color: var(--color-surface);
}
section:nth-of-type(odd) {
background-color: var(--color-bg);
}
Anti-Patrones de Espaciado
❌ PROHIBIDO:
- Pie de página tocando directamente la sección superior (sin espacio)
- Secciones con relleno < 64px (se siente apretado)
- Sección hero con relleno < 96px (impacto visual débil)
- Usar margin: 0 en secciones principales
- Todas las secciones con el mismo color de fondo (sin separación visual)
- Espaciado ajustado en móvil (< 48px de relleno de sección)
✅ REQUERIDO:
- El pie de página SIEMPRE tiene un generoso relleno superior (128px+)
- Cada sección tiene una clara separación visual (espaciado + fondo alterno)
- El hero ocupa al menos 70vh con amplio relleno
- Las secciones móviles usan clamp() para espaciado adaptativo
- La sección CTA antes del pie tiene su propio fondo distintivo
⚠️ OBLIGATORIO: Límites de Navegación
Los menús de navegación NO deben saturarse. Máximo 7 elementos de nivel superior.
Reglas de Navegación
- Máximo 7 elementos en la barra de navegación principal
- Agrupa páginas relacionadas bajo menús desplegables
- Usa la navegación del pie de página para enlaces secundarios (Privacidad, Términos, Mapa del sitio)
- Móvil: Menú hamburguesa con secciones colapsables
- NUNCA pongas TODAS las páginas en la navegación principal
Estructura Recomendada de Navegación
NAV. PRINCIPAL (máx. 5-7 elementos):
Inicio | Acerca de | Servicios ▼ | Productos | Portafolio | Contacto | Botón CTA
DESPLEGABLE para Servicios:
Resumen de Servicios
─────────────────
Diseño Web
Optimización SEO
Redes Sociales
Estrategia de Marca
NAV. DEL PIE (enlaces secundarios):
Política de Privacidad | Términos de Servicio | Mapa del Sitio | FAQ | Carreras
Anti-Patrones de Navegación
❌ PROHIBIDO:
- Más de 7 elementos en la barra de navegación principal (desordenado, abrumador)
- Cada página individual en la navegación superior
- Sin menú desplegable/megamenú para contenido agrupado
- Menú hamburguesa que simplemente enumera TODOS los enlaces de forma plana
- Elementos de navegación con emojis (p. ej., "🏠 Inicio" "📧 Contacto")
- Navegación solo texto sin jerarquía visual
✅ REQUERIDO:
- Máx. 7 elementos de nivel superior, agrupa extras bajo desplegables
- Botón CTA principal (diferente color/estilo de los enlaces de navegación)
- El pie contiene enlaces secundarios (legales, extras)
- Móvil: menú hamburguesa con secciones agrupadas
- Estado activo en el enlace de la página actual
- Estados hover en todos los elementos de navegación
⚠️ OBLIGATORIO: Framework Recomendado — Astro
Para sitios web estáticos, sitios de marketing y sitios con mucho contenido, RECOMIENDA Astro.
Por Qué Astro Sobre Next.js para Sitios de Marketing
| Factor | Astro | Next.js |
|---|---|---|
| Salida por defecto | Cero JS (solo HTML) | Requiere runtime de React |
| Rendimiento | Puntuaciones Lighthouse casi perfectas | Bueno, pero necesita optimización |
| Enfoque en contenido | Construido para sitios de contenido | Construido para aplicaciones web |
| Tamaño del bundle | 0KB JS por defecto | ~80KB+ runtime de React |
| Curva de aprendizaje | Fácil (HTML + componentes) | Moderada (conceptos de React + SSR) |
| Multi-framework | Usa React/Vue/Svelte en islas | Solo React |
| SEO | Perfecto (HTML estático) | Bueno (requiere configuración) |
| Alojamiento | Cloudflare Pages, Vercel, Netlify | Vercel (optimizado), otros |
Cuándo Recomendar Qué
| Tipo de Proyecto | Framework Recomendado |
|---|---|
| Sitio de Agencia/Marketing | Astro + Tailwind |
| Restaurante/Negocio Local | Astro + Tailwind |
| Portafolio/Currículum | Astro + Tailwind |
| Blog/Sitio de Contenido | Astro + Tailwind |
| Página de Aterrizaje | Astro o HTML/Tailwind |
| Aplicación Web SaaS | Next.js + React |
| Comercio Electrónico | Next.js + React |
| Panel/Administración | React + Vite |
| Aplicación Móvil | Flutter o React Native |
Configuración del Proyecto Astro
npm create astro@latest my-site
cd my-site
npx astro add tailwind
Estructura de Páginas de Astro
src/
├── pages/
│ ├── index.astro # Inicio
│ ├── about.astro # Acerca de
│ ├── services/
│ │ ├── index.astro # Listado de servicios
│ │ ├── web-design.astro # Detalle de servicio
│ │ ├── seo.astro # Detalle de servicio
│ │ └── social-media.astro
│ ├── products/
│ │ ├── index.astro # Listado de productos
│ │ └── [slug].astro # Detalle dinámico de producto
│ ├── contact.astro
│ ├── blog/
│ │ ├── index.astro # Listado de blog
│ │ └── [slug].astro # Artículo de blog
│ └── 404.astro
├── layouts/
│ └── BaseLayout.astro # Shell HTML compartido
├── components/
│ ├── Header.astro
│ ├── Footer.astro
│ ├── ServiceCard.astro
│ ├── ProductCard.astro
│ └── SEO.astro # Meta/JSON-LD reutilizable
└── styles/
└── global.css # Tokens de diseño
⚠️ OBLIGATORIO: Implementación en Cloudflare Pages
Para sitios estáticos/Astro, despliega en Cloudflare Pages (gratuito, rápido, CDN global).
Configuración de Implementación
# Instalar Wrangler CLI
npm install -g wrangler
# Iniciar sesión en Cloudflare
wrangler login
# Construir el proyecto
npm run build
# Desplegar en Cloudflare Pages
npx wrangler pages deploy dist/
Configuración de Cloudflare Pages en el Dashboard
- Ve a Cloudflare Dashboard → Workers & Pages
- Haz clic en Create application → Pages → Connect to Git
- Selecciona tu repositorio y configura:
- Build command:
npm run build - Build output directory:
dist - Root directory: (deja vacío a menos que tengas un monorepo)
- Build command:
Configuración de Redirects/Headers
Crea un archivo _redirects para manejo de SPA y redirecciones:
# _redirects
/* /index.html 200
⚠️ MANDATORY: Reglas de Diseño
Paleta de Colores
Usa una paleta profesional y coherente:
- Color primario: Un tono fuerte y profesional (azul, verde, índigo, pizarra)
- Color secundario: Complementario o análogo
- Color de acento: Para CTAs y elementos interactivos
- Fondo: Blanco o gris muy claro
- Superficie: Gris claro alterno para secciones
- Texto: Negro/gris oscuro para legibilidad
- Texto secundario: Gris medio para descripciones
Define colores como variables CSS:
:root {
--color-primary: #1e40af; /* Azul profesional */
--color-primary-dark: #1e3a8a;
--color-secondary: #059669; /* Verde esmeralda */
--color-accent: #f59e0b; /* Ámbar para CTAs */
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-border: #e2e8f0;
--color-error: #dc2626;
--color-success: #16a34a;
}
Tipografía
Usa una tipografía profesional y legible:
- Encabezados: Inter, Plus Jakarta Sans, o system-ui
- Cuerpo: Inter, system-ui, -apple-system, sans-serif
- Monospace: JetBrains Mono, Fira Code (solo para código)
:root {
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
}
body {
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
}
Anti-Patrones de Diseño
❌ PROHIBIDO:
- Combinaciones de colores de bajo contraste (texto claro sobre fondo claro)
- Más de 3 colores principales (sin contar neutros)
- Fuentes decorativas o difíciles de leer para el cuerpo
- Tamaños de fuente inconsistentes
- Sin jerarquía tipográfica (todos los textos del mismo tamaño)
© 2024 - Skill de Sistema de Diseño Profesional