🧩 Qué es / qué hace
Engine de inteligencia competitiva basada en investigación para sitios web: scraping, análisis, informe y construcción en 6 fases encadenadas, todas basadas en datos reales del mercado.
O website-intelligence es un skill sénior de estrategia web que trabaja en 6 fases secuenciales: extracción de marca del cliente → análisis del nicho competitivo → informe HTML listo para PDF → build brief → construcción del sitio → auditoría de calidad. Todo se guarda en archivos entregables en cada fase.
mcp__firecrawl__scrape — página únicamcp__firecrawl__map — arquitectura completa del dominiomcp__firecrawl__search — descubrimiento de competidores@media print)#c45d3e🎣 Cuándo se activa
Los desencadenantes exactos que hacen que Claude Code active website-intelligence: palabras clave, contextos e intenciones de la solicitud.
Claude Code lee la description de la skill y la activa cuando detecta cualquiera de los términos listados abajo en el pedido del usuario. No hace falta decir el nombre de la skill.
- ✓"website intelligence"
- ✓"crear un sitio" / "crear un sitio web"
- ✓"redesign" / "website for [negocio]"
- ✓"scrape and rebuild"
- ✓"análisis competitivo"
- ✓"niche research" / "website audit"
- ✗"crea una landing page sencilla"
- ✗"haz un componente React"
- ✗"genera un diagrama del sistema"
- ✗"crea una animación 3D"
- ✗"haz un email marketing"
- ✗tareas sin contexto de negocio real
🚀 Cómo mejora tus resultados
Valor concreto que website-intelligence aporta en comparación con el enfoque tradicional de crear un sitio sin investigación de mercado.
Los sitios creados a partir de una investigación competitiva real tienen posicionamiento informado: sabes qué hacen bien tus competidores, dónde hay brechas de SEO, qué patrones comparten el 10 % mejor posicionados, y construyes por encima de ese nivel, no a su lado.
- ✓Informe PDF con puntuación de los competidores (8 criterios)
- ✓Paleta de colores y tipografía justificadas con datos
- ✓Oportunidades de SEO y keywords de brecha identificadas
- ✓Sitio con animaciones al desplazarse con calidad Apple/Stripe
- ✓Marcador de posición para un asset 3D (
<!-- 3D SCROLL ASSET HERE -->)
- ✗Sitio bonito, pero sin diferenciación en el mercado
- ✗Colores y tipografía elegidos por gusto, no por posicionamiento
- ✗SEO genérico, sin insights sobre brechas competitivas
- ✗Animaciones decorativas sin jerarquía de conversión
- ✗Ningún entregable para presentar al cliente
El sitio generado debe alcanzar LCP < 2.5s, TBT < 200ms, CLS < 0.1. Sin JavaScript que bloquee el renderizado. Imágenes con carga diferida y dimensiones explícitas.
⚙️ Cómo funciona por dentro
Stack, herramientas MCP, enfoque por fase y decisiones reales de implementación de SKILL.md.
Antes de iniciar cualquier fase, la skill verifica si Firecrawl MCP está conectado. Si no lo está, proporciona instrucciones de configuración (claude mcp add firecrawl). Sin Firecrawl, las fases 1 y 2 quedan bloqueadas.
mcp__firecrawl__map — descubre todas las URL del dominio del cliente
mcp__firecrawl__scrape — rastrea las páginas principales (inicio, acerca de, servicios)
Guarda research/01-client-brand.md con: colores, tipografía, tono de voz, propuesta de valor, estructura de navegación
mcp__firecrawl__search — encuentra a los 5 principales competidores del nicho
mcp__firecrawl__scrape — scraping exhaustivo de cada competidor
Puntuación según 8 criterios: diseño, UX, SEO, rendimiento, texto, CTA, prueba social, móvil
Guarda research/02-competitor-analysis.md
HTML estático sin JavaScript: solo HTML + CSS con @media print
Diseño: papel cálido #f6f4f0, terracota #c45d3e, superposición de grano mediante filtro SVG
Cards con borde de acento de 4px, fases con conectores SVG discontinuos
Guarda competitive-analysis.html en la raíz del proyecto
Define: Design Direction · Site Architecture · Content Framework · Conversion Playbook
HARD STOP obligatorio — no avanza a la fase 5 sin la aprobación explícita del usuario
Guarda research/03-build-brief.md
Animaciones activadas por el scroll en cada transición de sección + profundidad de paralaje
Hero con marcador de posición indicado: <!-- 3D SCROLL ASSET HERE --> con dimensiones exactas
Microinteracciones premium: botones, tarjetas, navegación
Estructura: site/ con index.html, css/, js/, assets/
Auditoría SEO: meta tags, schema markup, jerarquía de encabezados, sitemaps
Auditoría de accesibilidad: contraste, alt text, etiquetas ARIA, navegación con teclado
Auditoría de rendimiento: LCP, TBT, CLS, JS que bloquea el renderizado, carga diferida
Guarda research/04-quality-audit.md
💬 Ejemplo práctico + Prompt listo
Prompt real para pegar en Claude Code y activar el skill de inmediato, junto con lo que debes esperar en cada fase.
Reemplaza la URL y el nicho. El skill detecta "competitive analysis" y "build a site" y se activa automáticamente. Recibirás entregables en cada fase antes de aprobar la siguiente.
competitive-analysis.html — ábrelo en el navegador e imprímelo como PDF.
site/index.html + auditoría final.
🧬 Combina con / límites
website-intelligence es el skill que cierra el curso: investigación competitiva → construye el mejor sitio. Para ir más allá del sitio, combina con las skills de las rutas anteriores.
Este es el último módulo de Skill Design porque representa el ciclo completo: aprendiste a construir interfaces (T1), crear identidad visual (T2), producir medios (T3) y usar herramientas de apoyo (T4). Website-intelligence usa todo esto — y además agrega la capa de inteligencia de mercado que diferencia un buen sitio de uno imbatible.
Después de que website-intelligence entregue el site/index.html, activa frontend-design para pulir el código React/Tailwind/shadcn, agregar componentes responsivos avanzados y garantizar accesibilidad de nivel AA. El sitio de website-intelligence define qué construir — frontend-design define como construir con excelencia de código.
Después de la Fase 6 (Quality Audit), ejecuta impeccable para una segunda capa de verificación: contraste de colores, jerarquía tipográfica, microtextos de los CTA y coherencia visual entre secciones. impeccable complementa la auditoría técnica de website-intelligence con una auditoría de diseño.
website-intelligence deja un marcador de posición explícito en el hero: <!-- 3D SCROLL ASSET HERE --> con dimensiones exactas. El 3d-animation-creator se creó exactamente para eso: genera el asset 3D interactivo activado por scroll que va en ese slot. Esa integración es la más directa: website-intelligence reserva el espacio y 3d-animation-creator lo rellena con maestría.
¡Completaste Skill Design!
Recorriste las 4 rutas — Construir, Identidad, Medios y Soporte — y llegaste al módulo que cierra el ciclo: inteligencia de mercado al servicio del diseño. Ahora sabes investigar, analizar, planificar y crear sitios que se diferencian con datos reales.
✓ Qué aprendiste en este módulo
Ahora que conoces los 16 skills del curso, vuelve al inicio y relee los módulos con otros ojos. La segunda lectura siempre revela conexiones que no viste en la primera, especialmente cómo los skills de las 4 rutas se integran en un flujo de trabajo completo de diseño con Claude Code.