LJC-god/popular-web-designs-skill

Diseños Web Populares

54 sistemas de diseño del mundo real listos para usar al generar HTML/CSS. Cada plantilla captura el lenguaje visual completo de un sitio: paleta de colores, jerarquía tipográfica, estilos de componentes, sistema de espaciado, sombras, comportamiento responsivo y prompts prácticos para agentes con valores CSS exactos.

Habilidades de diseño relacionadas

• claude-design — úsalo para el proceso y gusto de diseño (definir un brief, producir variantes, verificar un artefacto HTML local, evitar el "slop" del diseño de IA). Combínalo con esta habilidad cuando el usuario quiera una página bien diseñada con el estilo de una marca conocida: claude-design dirige el flujo de trabajo, esta habilidad proporciona el vocabulario visual.
• design-md — úsalo cuando el entregable sea un archivo formal de especificación de tokens DESIGN.md, no un artefacto renderizado.

Cómo usar

1. Elige un diseño del catálogo a continuación
2. Cárgalo: skill_view(name="popular-web-designs", file_path="templates/<sitio>.md")
3. Usa los tokens de diseño y las especificaciones de componentes al generar HTML
4. Combínalo con la habilidad generative-widgets para servir el resultado a través de un túnel cloudflared

Cada plantilla incluye un bloque de Notas de Implementación de Hermes en la parte superior con:

• Sustituto de fuente CDN y etiqueta <link> de Google Fonts (lista para pegar)
• Pilas de font-family CSS para fuente principal y monoespaciada
• Recordatorios para usar write_file para la creación de HTML y browser_vision para la verificación

Patrón de generación HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título de la página</title>
  <!-- Pega la etiqueta <link> de Google Fonts de las notas de Hermes de la plantilla -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Aplica la paleta de colores de la plantilla como propiedades personalizadas CSS */
    :root {
      --color-fondo: #ffffff;
      --color-texto: #171717;
      --color-acento: #533afd;
      /* ... más propiedades de la Sección 2 de la plantilla */
    }
    /* Aplica la tipografía de la Sección 3 de la plantilla */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-texto);
      background: var(--color-fondo);
    }
    /* Aplica los estilos de componentes de la Sección 4 de la plantilla */
    /* Aplica el diseño de la Sección 5 de la plantilla */
    /* Aplica las sombras de la Sección 6 de la plantilla */
  </style>
</head>
<body>
  <!-- Construye usando las especificaciones de componentes de la plantilla -->
</body>
</html>

Escribe el archivo con write_file, sírvelo con el flujo de trabajo generative-widgets (túnel cloudflared) y verifica el resultado con browser_vision para confirmar la precisión visual.

Referencia de sustitución de fuentes

La mayoría de los sitios utilizan fuentes propietarias no disponibles a través de CDN. Cada plantilla asigna un sustituto de Google Fonts que conserva el carácter del diseño. Mapeos comunes:

Fuente Propietaria	Sustituto CDN	Carácter
Geist / Geist Sans	Geist (en Google Fonts)	Geométrico, tracking comprimido
Geist Mono	Geist Mono (en Google Fonts)	Monoespaciada limpia, ligaduras
sohne-var (Stripe)	Source Sans 3	Elegancia de peso ligero
Berkeley Mono	JetBrains Mono	Monoespaciada técnica
Airbnb Cereal VF	DM Sans	Geométrica amigable y redondeada
Circular (Spotify)	DM Sans	Geométrica, cálida
figmaSans	Inter	Humanista limpia
Pin Sans (Pinterest)	DM Sans	Amigable, redondeada
NVIDIA-EMEA	Inter (o Arial del sistema)	Industrial, limpia
CoinbaseDisplay/Sans	DM Sans	Geométrica, confiable
UberMove	DM Sans	Negrita, apretada
HashiCorp Sans	Inter	Empresarial, neutra
waldenburgNormal (Sanity)	Space Grotesk	Geométrica, ligeramente condensada
IBM Plex Sans/Mono	IBM Plex Sans/Mono	Disponible en Google Fonts
Rubik (Sentry)	Rubik	Disponible en Google Fonts

Cuando la fuente CDN de una plantilla coincide con la original (Inter, IBM Plex, Rubik, Geist), no se produce pérdida de sustitución. Cuando se usa un sustituto (DM Sans para Circular, Source Sans 3 para sohne-var), sigue de cerca los valores de peso, tamaño y letter-spacing de la plantilla; esos aportan más identidad visual que el tipo de letra específico.

Catálogo de diseños

IA y Aprendizaje Automático

Plantilla	Sitio	Estilo
claude.md	Anthropic Claude	Acento terracota cálido, diseño editorial limpio
cohere.md	Cohere	Degradados vibrantes, estética de panel de datos rico
elevenlabs.md	ElevenLabs	UI oscura cinematográfica, estética de formas de onda de audio
minimax.md	Minimax	Interfaz oscura audaz con acentos neón
mistral.ai.md	Mistral AI	Minimalismo de ingeniería francesa, tonos violetas
ollama.md	Ollama	Terminal primero, simplicidad monocromática
opencode.ai.md	OpenCode AI	Tema oscuro centrado en desarrollador, monoespaciado completo
replicate.md	Replicate	Lienzo blanco limpio, código primero
runwayml.md	RunwayML	UI oscura cinematográfica, diseño rico en medios
together.ai.md	Together AI	Diseño técnico, estilo de plano
voltagent.md	VoltAgent	Lienzo negro vacío, acento esmeralda, nativo de terminal
x.ai.md	xAI	Monocromático austero, minimalismo futurista, monoespaciado completo

Herramientas para desarrolladores y plataformas

Plantilla	Sitio	Estilo
cursor.md	Cursor	Interfaz oscura elegante, acentos degradados
expo.md	Expo	Tema oscuro, letter-spacing apretado, centrado en código
linear.app.md	Linear	Modo oscuro ultra minimalista, preciso, acento morado
lovable.md	Lovable	Degradados juguetones, estética amigable para desarrolladores
mintlify.md	Mintlify	Limpio, acento verde, optimizado para lectura
posthog.md	PostHog	Marca juguetona, UI oscura amigable para desarrolladores
raycast.md	Raycast	Cromo oscuro elegante, acentos degradados vibrantes
resend.md	Resend	Tema oscuro minimalista, acentos monoespaciados
sentry.md	Sentry	Panel oscuro, denso en datos, acento rosa-morado
supabase.md	Supabase	Tema esmeralda oscuro, herramienta de desarrollador código primero
superhuman.md	Superhuman	UI oscura premium, teclado primero, brillo morado
vercel.md	Vercel	Precisión en blanco y negro, sistema de fuentes Geist
warp.md	Warp	Interfaz tipo IDE oscura, UI de comandos basada en bloques
zapier.md	Zapier	Naranja cálido, impulsado por ilustraciones amigables

Infraestructura y Nube

Plantilla	Sitio	Estilo
clickhouse.md	ClickHouse	Acento amarillo, estilo de documentación técnica
composio.md	Composio	Oscuro moderno con iconos de integración coloridos
hashicorp.md	HashiCorp	Limpio empresarial, blanco y negro
mongodb.md	MongoDB	Marca de hoja verde, enfoque en documentación para desarrolladores
sanity.md	Sanity	Acento rojo, diseño editorial primero en contenido
stripe.md	Stripe	Degradados morados característicos, elegancia de peso 300

Diseño y Productividad

Plantilla	Sitio	Estilo
airtable.md	Airtable	Colorido, amigable, estética de datos estructurados
cal.md	Cal.com	UI neutra limpia, simplicidad orientada a desarrolladores
clay.md	Clay	Formas orgánicas, degradados suaves, diseño dirigido por arte
figma.md	Figma	Multicolor vibrante, juguetón pero profesional
framer.md	Framer	Negro y azul audaces, movimiento primero, diseño primero
intercom.md	Intercom	Paleta azul amigable, patrones de UI conversacionales
miro.md	Miro	Acento amarillo brillante, estética de lienzo infinito
notion.md	Notion	Minimalismo cálido, encabezados con serifa, superficies suaves
pinterest.md	Pinterest	Acento rojo, cuadrícula de mampostería, diseño primero en imagen
webflow.md	Webflow	Acento azul, estética de sitio de marketing pulido

Fintech y Cripto

Plantilla	Sitio	Estilo
coinbase.md	Coinbase	Identidad azul limpia, enfocada en confianza, sensación institucional
kraken.md	Kraken	UI oscura con acento morado, paneles densos en datos
revolut.md	Revolut	Interfaz oscura elegante, tarjetas degradadas, precisión fintech
wise.md	Wise	Acento verde brillante, amigable y claro

Empresarial y Consumo

Plantilla	Sitio	Estilo
airbnb.md	Airbnb	Acento coral cálido, impulsado por fotografía, UI redondeada
apple.md	Apple	Espacio blanco premium, SF Pro, imágenes cinematográficas
bmw.md	BMW	Superficies oscuras premium, estética de ingeniería precisa
ibm.md	IBM	Sistema de diseño Carbon, paleta azul estructurada
nvidia.md	NVIDIA	Energía verde-negro, estética técnica de potencia
spacex.md	SpaceX	Blanco y negro austero, imágenes a sangre completa, futurista
spotify.md	Spotify	Verde vibrante sobre oscuro, tipografía audaz, impulsado por carátulas de álbumes
uber.md	Uber	Blanco y negro audaz, tipografía apretada, energía urbana

Cómo elegir un diseño

Empareja el diseño con el contenido:

• Herramientas para desarrolladores / paneles: Linear, Vercel, Supabase, Raycast, Sentry
• Documentación / sitios de contenido: Mintlify, Notion, Sanity, MongoDB
• Marketing / páginas de aterrizaje: Stripe, Framer, Apple, SpaceX
• UIs en modo oscuro: Linear, Cursor, ElevenLabs, Warp, Superhuman
• UIs claras / limpias: Vercel, Stripe, Notion, Cal.com, Replicate
• Juguetones / amigables: PostHog, Figma, Lovable, Zapier, Miro
• Premium / lujo: Apple, BMW, Stripe, Superhuman, Revolut
• Densos en datos / paneles: Sentry, Kraken, Cohere, ClickHouse
• Monoespaciados / estética de terminal: Ollama, OpenCode, x.ai, VoltAgent