🌱 Empieza aquí · Analista visual de páginas web

¿Alguna vez publicaste una landing que en tu compu se veía perfecta y en el celular estaba toda corrida, con el botón escondido y una imagen saliéndose de la pantalla? Este es justo el problema que resuelve esta semilla. Instala a tu asistente un analista visual: abre cualquier página en un navegador de verdad, la captura como la ve un usuario en computadora y en celular, y te dice qué se ve bien y qué está roto —si tu llamado a la acción aparece sin hacer scroll, si en mobile hay scroll horizontal, si hay cosas encimadas o texto cortado— con cada hallazgo ubicado y su recomendación.

Para instalarla

Abre esta carpeta con Claude Code (o Cowork) y dile a tu asistente:

"Siembra esta semilla 🌱"

Con eso basta de tu parte. Tu asistente hace todo lo demás y al final te dice cómo comprobar que quedó funcionando. Vas a ver algunas palabras en inglés en la pantalla (nombres de herramientas); ni caso, él te guía.

¿Otras formas de pedírselo? "instala esta semilla", "pon a funcionar el analista visual", "haz el setup de esto". Te entiende igual.

Para el asistente que siembra 🤖

Este componente es un agente (un subagente especializado), no un hook ni un script de arranque: no lleva chmod, no lleva entrada en settings.json y no se ejecuta solo. Se "siembra" colocando su definición en la carpeta de agentes de la plataforma, para que quede disponible como un analista invocable. Ojo: este agente sí necesita una dependencia externa (Playwright + Chromium) para poder capturar; instálala como parte de la siembra (paso 2).

1. Copia el agente a la carpeta de agentes

El kernel trae dos archivos:

• kernel/seo-visual.md — la definición del agente analista (lo que se instala).
• kernel/checklist-visual.ejemplo.md — una plantilla para aterrizar el análisis a la página real de esta persona.

Coloca seo-visual.md en la carpeta de agentes de tu plataforma:

macOS / Linux (Claude Code o Cowork):

mkdir -p "$HOME/.claude/agents"
cp kernel/seo-visual.md "$HOME/.claude/agents/seo-visual.md"

Windows (Claude Code o Cowork), en PowerShell:

New-Item -ItemType Directory -Force "$HOME\.claude\agents" | Out-Null
Copy-Item kernel\seo-visual.md "$HOME\.claude\agents\seo-visual.md"

Los archivos dentro de ~/.claude/agents/ quedan disponibles como subagentes que el asistente puede invocar. Claude Code y Cowork usan el mismo mecanismo y lo detectan solos. La plantilla de checklist NO va en esa carpeta (no es un agente, es una guía que usas en el paso 3).

Nota de compatibilidad: este componente es un agente, y Claude Code y Cowork lo instalan igual (mismo mecanismo de la carpeta agents). Lo particular de ESTE agente es que, para capturar, necesita un entorno con Python + Playwright + Chromium (paso 2): donde puedas instalar y correr ese navegador, el agente captura de verdad. En una plataforma sin subagentes con nombre (por ejemplo Codex) o sin ese entorno de captura, no lo instales como agente: usa el contenido de seo-visual.md —incluido su script— como un prompt de análisis que corres manualmente.

2. Instala la dependencia de captura (obligatorio para que funcione)

El agente captura las páginas con Playwright y el navegador Chromium. Sin esto, no puede tomar capturas. Instálalos:

pip install playwright && playwright install chromium

Si pip no existe, prueba pip3 o python -m pip. Si la descarga de Chromium falla (permisos, red), avísale a la persona con el mensaje de error exacto en vez de dar por hecho que quedó.

3. Aterriza el checklist a ESTA página (recomendado)

El análisis es más útil cuando sabe qué te importa a TI. Abre kernel/checklist-visual.ejemplo.md. Con la persona (o detectándolo de su sitio), llena la plantilla: la URL a auditar, cuál es su llamado a la acción principal, qué debe verse sin scroll, qué dispositivos usa de verdad su audiencia. Guárdala donde el asistente pueda leerla y, cuando invoques el agente, dale esa ruta como contexto.

Si la persona todavía no tiene claras sus prioridades, no pasa nada: el agente funciona con los checklists genéricos que ya trae y marca como "por confirmar" lo que no pueda verificar, en vez de inventarlo.

4. Verificación post-siembra (obligatoria)

a) El archivo del agente quedó colocado:

ls -la "$HOME/.claude/agents/seo-visual.md"; echo "exit=$?"

Salida esperada: una línea que lista el archivo (con su tamaño) y exit=0. Si sale No such file or directory, la copia no se hizo; repite el paso 1.

b) La dependencia quedó instalada:

python -c "import playwright; print('playwright OK')"

Salida esperada: playwright OK. Si sale un error de import, repite el paso 2.

c) El analista captura de verdad (prueba de comportamiento): pídele al asistente que use el analista visual para revisar una página pública (por ejemplo https://example.com). La conducta correcta es que primero tome las capturas desktop y mobile, las lea, y luego reporte qué se ve en el above-the-fold, cómo se comporta en mobile y qué problemas de layout hay, con las rutas de las imágenes guardadas. Si en vez de eso opina sin capturar, algo falló: revisa que seo-visual.md esté en la carpeta de agentes y que Playwright esté instalado.

Cuando las tres partes pasen, avísale a la persona en una línea qué gana con esto.

✅ ¿Cómo sé que funcionó?

De ahora en adelante, antes de publicar cualquier página puedes preguntarle a tu asistente "¿cómo se ve esto en la compu y en el celular?" y de verdad lo va a mirar —no adivinar—: te trae las capturas, te dice si tu botón se ve sin scroll, si en mobile hay algo corrido, y qué corregir con lugar exacto. También sirve para espiar cómo se ve la página de un competidor. Menos "en mi compu se veía bien", más control de cómo te ve tu cliente de verdad. 🌱