Communitygithub.com

Diseño Web para Clientes

Úsalo SIEMPRE para cualquier solicitud de diseño web: sitio web, página web, landing page, página de inicio, maqueta, rediseño, reconstrucción de sitio, UI o sitio promocional para un cliente: crea un diseño personalizado y no genérico y lo verifica.

¿Qué es Diseño Web para Clientes?

Este skill está diseñado para garantizar que cada solicitud de diseño web para un cliente (ya sea un sitio completo, una landing page, un rediseño o una maqueta) se maneje con un flujo de trabajo profesional y libre de contenido genérico de IA. Su propósito es construir sitios web que parezcan hechos por una agencia real: diseño con criterio, contenido real, código limpio y verificación en un navegador real antes de la entrega. El skill es compatible con cualquier stack tecnológico (HTML/CSS/JS plano, Angular, React/Next.js, WordPress/Elementor) y con cualquier tipo de negocio, con énfasis en negocios locales indios. El proceso comienza con la comprensión del cliente (preguntando sobre el stack, negocio, activos reales y objetivos) y la creación de una especificación de diseño detallada (dirección estética, tipografía, color, cuadrícula y contenido real). Luego, sigue reglas estrictas de construcción (componentes pequeños y componibles, diseño mobile-first, accesibilidad WCAG AA, imágenes optimizadas, motion sutil) e incluye elementos esenciales para negocios locales (botón flotante de WhatsApp, enlace click-to-call, mapa de Google, reseñas, formulario de contacto funcional, SEO completo). El skill termina con una verificación en un navegador real usando Playwright (capturas de pantalla a 1440px y 390px, revisión de errores de consola y diseño) y una lista de verificación previa a la entrega que garantiza que no quede contenido genérico, enlaces rotos o problemas de accesibilidad y rendimiento Lighthouse superior a 90.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yogeshwaran-venkatesan/claude-skills/tree/HEAD/client-web-design
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Diseño Web para Clientes (sin contenido genérico de IA)

Aplica este skill automáticamente a CADA solicitud de diseño web (sitio web, página, landing page, página de inicio, maqueta, rediseño, reconstrucción, sitio promocional) — el usuario no necesita nombrarlo.

Crea sitios web para clientes que parezcan hechos por una agencia real: diseño con criterio, contenido real, código limpio, verificado en un navegador real antes de la entrega.

Paso 0 — Pregunta, nunca asumas

Antes de escribir cualquier código, confirma (pregunta solo lo que falta):

  • Stack: HTML/CSS/JS plano, Angular, React/Next.js o WordPress/Elementor.
  • Negocio: nombre (ortografía exacta), industria, ciudad, servicios/productos, cliente objetivo.
  • Activos reales: logotipo, fotos, lista de proyectos, números de contacto, WhatsApp, dirección, enlace de Google Maps, calificación de Google, enlaces a redes sociales.
  • Idiomas (ej. Inglés + Tamil/Kannada) — nunca adivines.
  • Objetivo principal del sitio: llamadas, consultas de WhatsApp, solicitudes de cotización, reservas o pedidos en línea. Si faltan activos, usa slots TODO claramente marcados — nunca fotos de stock de personas o datos inventados.

Paso 1 — Especificación de diseño primero (sin componentes aún)

Escribe una especificación breve y obtén aprobación:

  1. Dirección estética — elige UNA: editorial, lujo, industrial, cálido-local, brutalista, minimal-premium. Una frase sobre por qué encaja con este negocio.
  2. Tipografía — una fuente de exhibición distintiva + una fuente de cuerpo limpia. Tamaños fluidos con clamp() en una escala modular estricta (ej. 1.25). Nunca uses Inter/Roboto/Arial por defecto como fuente de exhibición.
  3. Color (60-30-10) — 60% base (ej. blanco cálido #F7F6F2 o carbón #111214), 30% superficie estructural, 10% un acento de marca fuerte. Define como variables CSS / tokens de diseño.
  4. Cuadrícula y diseño — cuadrícula de 12 columnas, al menos una sección asimétrica/de división editorial, bordes finos de 1px, espacio en blanco generoso.
  5. Lista de páginas + contenido real — titular y cuerpo del texto para cada sección, escrito para esta industria y ciudad.

Presets de dirección (puntos de partida, ajusta por cliente)

  • Joyería / oro: lujo-editorial; serif de exhibición (ej. Cormorant, Instrument Serif); marfil + granate/verde intenso + acento dorado usado con moderación; fotografía de producto grande; bloque de tasa de oro con fecha/hora; sección de plan de ahorro; sello de confianza BIS.
  • Industrial / manufactura / B2B: industrial-preciso; grotesk de exhibición (ej. Space Grotesk, Archivo); carbón + gris acero + un acento de seguridad (naranja/amarillo); tablas de especificaciones, estudios de caso de proyectos (cliente, ubicación, área, cronograma), descarga de folleto, formulario de cotización detallado.
  • Hotel / hostelería: cálido-editorial; tarjetas de habitaciones con fotos reales, tarifas/comodidades, ubicación y atracciones cercanas, CTA de reserva/WhatsApp.
  • Fotografía / creativo: galería minimalista primero; mampostería asimétrica liderada por imágenes, poco cromo, tipografía fuerte para nombres/categorías.

Paso 2 — Prohibiciones estrictas (clichés de IA)

NUNCA:

  • Gradientes púrpura/índigo/azul-violeta, manchas de vidrio, orbes flotantes con gradiente.
  • Iconos genéricos dentro de círculos de color en una cuadrícula de 3 columnas centrada.
  • Contenido placeholder: "Transforma tu flujo de trabajo", "Empoderando negocios", "Desbloquea tu potencial", "Eleva tu experiencia", Lorem Ipsum, "Título de ejemplo".
  • Fotos de stock de personas sonrientes no relacionadas con el negocio.
  • Estadísticas falsas, testimonios falsos o contadores animados que puedan mostrar "0+".
  • Emojis como iconos, todo centrado, alturas de tarjetas idénticas en todas partes.
  • Enlaces a "#" en el sitio terminado.

Paso 3 — Reglas de construcción

  • Los componentes son pequeños y componibles (ej. Tarjeta con partes de Encabezado/Cuerpo/Pie de página), no un componente enorme con muchas props.
  • Mobile-first; prueba anchos 390px y 1440px.
  • Imágenes: texto alternativo real, ancho/alto establecido (sin cambio de diseño), carga diferida debajo del pliegue, WebP/AVIF cuando sea posible.
  • Movimiento: sutil y con propósito (desvanecimiento/deslizamiento al hacer scroll, estados hover reales); respeta prefers-reduced-motion.
  • Accesibilidad: contraste WCAG AA, estados de enfoque visibles, encabezados semánticos (un H1 por página), texto de enlace descriptivo (no solo "Saber más").
  • Angular + TranslateModule: siempre genera archivos de clave i18n para cada idioma del proyecto.
  • Si la salida es larga, propón un plan por lotes primero y genera cada lote completo — nunca trunques un archivo.

Esenciales para negocios locales (clientes PyME indios)

  • Botón flotante de WhatsApp y enlace click-to-call (tel:).
  • Dirección + mapa de Google incrustado + horario de apertura.
  • Calificación/reseñas de Google (reales, vinculadas al perfil).
  • Formulario de contacto/cotización que realmente envíe (correo electrónico y/o alerta de WhatsApp) con protección contra spam.
  • SEO: título de página = "Servicio en Ciudad | Marca"; meta descripción por página; schema JSON-LD de LocalBusiness; imagen de Open Graph; sitemap.xml; robots.txt.
  • Página de política de privacidad; año de copyright actual correcto.

Paso 4 — Verifica en un navegador real

Usa Playwright (Chromium headless):

  1. Captura de pantalla de cada página a 1440px y 390px; revisa las capturas.
  2. Verifica desbordamiento horizontal, texto superpuesto, imágenes rotas, objetivos táctiles pequeños (<44px).
  3. Verifica errores de consola y solicitudes de red fallidas.
  4. Corrige y vuelve a capturar hasta que esté limpio.

Paso 5 — Lista de verificación previa a la entrega (todo debe pasar)

  • No queda texto Lorem Ipsum / "Ejemplo" / TODO visible.
  • Sin href="#" o enlaces muertos; todos los enlaces a redes sociales van a perfiles reales.
  • Sin enlaces de admin/inicio de sesión en páginas públicas; sin correos electrónicos de desarrollador o rutas internas en metaetiquetas o fuente.
  • Nombre del negocio, nombres de clientes y direcciones escritos correctamente y de manera consistente.
  • Contadores, sliders, tickers de tarifas y formularios muestran valores reales y funcionan.
  • Cada imagen tiene texto alternativo significativo; títulos y meta descripciones son únicos por página.
  • Capturas de pantalla móvil y de escritorio revisadas.
  • Lighthouse: Rendimiento, Accesibilidad, SEO cada uno 90+ (o explicar por qué no).

Termina con un breve resumen: dirección de diseño elegida, páginas construidas, resultados de la lista de verificación y cualquier cosa que aún espere al cliente (fotos, contenido, credenciales).

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community