yzfly/awesome-design-html

Awesome Design HTML

Una biblioteca de referencia de 118 páginas HTML de un solo archivo, divididas en:

• assets/web/design.zhongguo-colors.html — 🎨 Colores Tradicionales Chinos: una página de 742 tonos derivada de nevertoday/zhongguo-traditional-colors. Los tonos se agrupan automáticamente por familia de color (rojo/naranja/amarillo/verde/cian/azul/violeta/blanco/gris-marrón/negro), se pueden buscar por nombre o HEX y se copian al hacer clic. Úsalo cuando el usuario quiera una paleta de colores tradicionales chinos / combinación de colores china / tarjeta de colores. Aparece primero en la galería.
• assets/web/ — 96 demostraciones de páginas de marketing (incluyendo 22 de grandes empresas chinas). Hero + características + precios + referencia del sistema de diseño. Úsalo cuando el usuario quiera un sitio web / página de aterrizaje / página de producto en el estilo de una marca.
• assets/ios/ — 22 maquetas de apps iOS. Tres marcos de iPhone en una etapa hero que muestran las pantallas de inicio / detalle / perfil de la aplicación real + referencia del sistema de diseño. Úsalo cuando el usuario quiera una maqueta de UI de app móvil o para honrar las superficies nativas de iOS de una marca (Now Playing, mazo de deslizamiento, burbuja de chat, ruta de lección...).

Cada archivo es autocontenido: CSS en línea en un bloque de tokens :root, Google Fonts CDN, colores/tipografía/radio/componentes fieles a la marca, más un enlace "Ver fuente ↗" a la especificación de diseño subyacente.

Cómo usar este skill

Cuando el usuario mencione un nombre de marca junto con diseño / estilo / página / UI / hero / precios / pantalla / iPhone / app:

1. Empareja la marca y la plataforma:
   • Quiere una página web / página de aterrizaje / página de marketing → busca en assets/web/
   • Quiere una maqueta de app iOS / pantalla de iPhone / UI móvil → busca en assets/ios/
   • Algunas marcas tienen ambas (Spotify, Notion, Airbnb, etc.) — elige la que coincida con la intención del usuario.
2. Lee el HTML coincidente en assets/web/design.<slug>.html o assets/ios/design.<slug>-ios.html.
3. Adapta a la solicitud del usuario — extrae tokens (colores, tipografía, radio, forma de botón, arquetipo de héroe) y aplícalos. No homogenices múltiples marcas en un solo aspecto genérico.

Nomenclatura de archivos

• Variante web: assets/web/design.<slug>.html
• Variante iOS: assets/ios/design.<slug>-ios.html

Algunos slugs fueron normalizados:

Marca	Slug	Notas
linear.app	linear
mistral.ai	mistral
together.ai	together
x.ai	xai	(solo web)
opencode.ai	opencode
bmw-m	bmw-m	guion conservado
x.com (Twitter)	x-twitter	(solo iOS)
apple-music	apple-music	(solo iOS)

Índice de marcas — Web (95)

🇨🇳 Nivel China (22, NUEVO 2026)

ByteDance: feishu (飞书), douyin (抖音), doubao (豆包) Alibaba: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) Tencent: tencent-cloud (腾讯云), wechat (微信) IA nacional: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · plataforma AI-Native Cloud) Vehículos eléctricos: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) Contenido/Consumo: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · feed de exploración en cascada)

Nivel Global (73)

Productividad / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

Herramientas de desarrollo / IDEs: browseros (navegador agente · crema + terracota + mascota de perro), bun (kit de herramientas JS todo en uno · hero de herencia crema + rosa intenso #ff73a8 + mascota bun · superficie de documentación), cursor, figma, framer, opencode, raycast, sanity, vercel, warp

Plataformas de IA / LLM: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai

Infraestructura / infra de desarrollo: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase

Fintech / cripto: binance, coinbase, kraken, mastercard, revolut, stripe, wise

Automóviles / lujo: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla

Consumo / comercio: airbnb, nike, pinterest, shopify, spotify, starbucks, uber

Empresarial / plataforma: ibm, meta, nvidia, expo

Medios / editorial: theverge, wired

Videojuegos / aero / telecom: playstation, spacex, vodafone

Los 3 originales (referencias de calidad): stripe, linear, notion

Índice de marcas — iOS (22)

Música / Video: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios

Social: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios

Mensajería: whatsapp-ios, telegram-ios, discord-ios

IA / Productividad: chatgpt-ios, notion-ios

Viajes: uber-ios, airbnb-ios

Citas: tinder-ios, hinge-ios

Comida / Finanzas / Aprendizaje: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios

Arquetipos de marca (consulta rápida cuando no se menciona una marca específica)

Arquetipo	Ejemplos web	Ejemplos iOS
Lienzo oscuro + UI de producto como protagonista	linear, warp, cursor, sentry, hashicorp, opencode	spotify, netflix, threads, x-twitter, discord
Hero de luz + malla degradada	stripe, vercel, intercom	apple-music
Tarjetas pastel claras / espectro colorido	notion, slack, airbnb, miro, clay, pinterest, xiaohongshu	instagram, snapchat, duolingo
Feed de tarjetas vertical en cascada / mampostería	pinterest, xiaohongshu	—
Revista editorial impresa	wired, theverge, claude, mistral, resend, elevenlabs	—
Monocromo austero + radio mínimo	apple, vercel, figma, bugatti, tesla, spacex	uber, threads, chatgpt
Maqueta de tablero como pieza central	stripe, mongodb, supabase, posthog, hashicorp, coinbase	robinhood
Sistema de botones tipo píldora	stripe, slack, airbnb, spotify, mastercard, coinbase	airbnb-ios, instagram-ios
Sistema de botones rectangulares (8px o menos)	notion, supabase, vercel, linear, mistral, expo	whatsapp, notion, telegram
Automóvil de lujo + tabla de especificaciones	bmw, ferrari, lamborghini, bugatti, bmw-m, tesla	—
Botones 3D con sombra gruesa	—	duolingo
Mazo de deslizamiento + acciones codificadas por color	—	tinder
Burbuja de chat de dos colores	—	whatsapp, telegram, discord

Estructura del archivo HTML web

<head>
  - CSS en línea en <style> (bloque único, todos los tokens de diseño como :root --custom-properties)
  - Google Fonts CDN (Inter + fuentes complementarias apropiadas para la marca)

<body>
  - Barra de navegación superior que coincida con la marca
  - Hero (patrón característico de la marca: malla, banda oscura, maqueta de producto, etc.)
  - 2-4 secciones de características que respeten el ritmo de la marca
  - Precios o CTA apropiados para la marca
  - Sección de referencia del sistema de diseño (Parte B):
    - Subbloques agrupados de "Color"
    - Tabla de "Tipografía": nombre del token (mono) + especificación (mono) + muestra en vivo
    - Escalera visual de "Radio"
    - Matriz de "Componentes": botones + entradas + tarjetas + etiquetas/insignias
  - Pie de página que coincida con la marca
  - Enlace flotante "Ver fuente ↗" en la parte inferior derecha al repositorio original
</body>

Estructura del archivo HTML iOS

<head>
  - CSS en línea, tokens :root, Google Fonts
  - CSS del marco del iPhone (270pt × ~600pt, isla dinámica, pantalla redondeada de 38px, botones laterales)

<body>
  - Barra de navegación superior (marca + sufijo iOS)
  - Hero con 3 marcos de iPhone:
    - iPhone izquierdo (rotado -4°) — pantalla secundaria
    - iPhone central (escalado 1.05) — pantalla característica
    - iPhone derecho (rotado +4°) — pantalla terciaria
    Cada iPhone muestra: isla dinámica + barra de estado (9:41) + UI de la aplicación renderizada + etiqueta inferior
  - Cuadrícula de características "Anatomía de superficie iOS" (3 superficies)
  - 3 filas de características específicas de iOS alternadas (ej. Actividad en vivo de la Isla Dinámica, matriz de hápticos, widget de pantalla de bloqueo, gestos de deslizamiento, etc.)
  - Sección de referencia del sistema de diseño (Parte B) — igual que la web pero con una tabla de especificaciones iOS (alturas, rellenos, curvas de animación, hápticos)
  - Pie de página + "Ver fuente ↗" flotante → galería spectr.to o README original
</body>

Nivel de calidad (al generar nuevas páginas a partir de esta referencia)

• Respeta la firma real de la marca — no apliques una plantilla genérica. La malla de Stripe, el lienzo #010102 de Linear, los tintes pastel de Notion, el ritmo de mosaicos de producto de Apple, la píldora 9999px de Spotify con seguimiento en mayúsculas son identificadores no negociables.
• No introduzcas acentos cromáticos que la marca no usa — Linear solo tiene lavanda, NVIDIA solo tiene verde, xAI no tiene acentos en absoluto, Threads no tiene acentos excepto la marca de verificación azul heredada y el corazón rojo.
• Coincide exactamente con la forma del botón — píldora vs rectángulo vs esquinas afiladas define la marca.
• Espaciado entre letras negativo en títulos donde la especificación de la marca lo requiera (Linear -3px, Stripe -1.4px, etc.).
• Cifras tabulares (font-feature-settings: "tnum") donde la marca muestra dinero o números (Stripe, Coinbase, Binance, Wise, Robinhood).
• Archivos iOS: el marco del iPhone debe incluir la Isla Dinámica, la barra de estado a las 9:41 con barras de celular y batería, el número correcto de pestañas de la barra de pestañas según la marca (ej. Snapchat 5 pestañas con botón de cámara central, Instagram 5 pestañas, ChatGPT sin barra de pestañas).
• Archivos iOS: los botones 3D con sombra gruesa no son negociables para Duolingo (box-shadow 0 4-6px 0 más oscuro). El corte de esquina de la burbuja de chat no es negociable para WhatsApp (esquina del remitente = 0).
• Sin sombra paralaje en marcas de lienzo oscuro — Linear, Bugatti usan escaleras de superficie + líneas finas en su lugar.

Cuándo NO usar este skill

• El usuario está pidiendo un patrón de diseño genérico (ej., "tablero de dos columnas") sin referencia de marca — usa el criterio de diseño general en su lugar.
• El usuario tiene su propio sistema de diseño / pautas de marca que deberían anular estas referencias.
• El usuario pregunta por una marca que NO está en la lista de 116 marcas — dilo explícitamente en lugar de adivinar.

Atribución de fuentes

• Especificaciones web derivadas de VoltAgent/awesome-design-md (MIT).
• Especificaciones iOS derivadas de Meliwat/awesome-ios-design-md (galería Spectr para especificaciones completas).

Cada HTML en la esquina inferior derecha enlaza a su fuente.