🌱 Empieza aquí · Control de calidad visual antes de entregar
Esta semilla le enseña a tu asistente un buen hábito: antes de decir "listo" y mostrarte cualquier archivo que se ve con los ojos (un reporte, un PDF, una imagen, un video), primero lo abre, le toma capturas de pantalla reales en computadora y en celular, mide las grietas de presentación con números (no "a ojo"), las arregla, y solo entonces te lo entrega. Menos entregas descuidadas, menos rebotes.
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; ni caso, él te guía.
¿Otras formas de pedírselo? "instala esta semilla", "pon a funcionar el control de calidad visual antes de entregar", "haz el setup de esto". Te entiende igual.
Para el asistente que siembra 🤖
Este componente es un workflow (método de trabajo), no un programa ejecutable.
No es un hook (gancho de automatización): no lleva chmod, no lleva entrada en
settings.json y no ejecuta ningún script. Se "siembra" colocando el método
donde tú, el asistente, lo leas de forma automática al arrancar cada conversación,
para aplicar el reflejo por tu cuenta cada vez que generes un archivo visible.
0. Requisito de capacidad (léelo antes de sembrar)
El corazón del método es tomar capturas de pantalla reales y medir sobre ellas.
Para eso necesitas una herramienta que controle un navegador (por ejemplo
chrome-devtools-mcp, un navegador controlado por Playwright, o un navegador
"headless"). Para revisar PDFs conviene además una utilidad que los convierta a
imágenes (por ejemplo pdftoppm, incluida en poppler).
Si el entorno tiene esa herramienta de navegador, el método corre completo. Si no la tiene, avísale a la persona: el método aún aporta la disciplina del checklist y la conversión de PDF, pero sin capturas reales no puede medir el render.
1. Copia el método donde lo leas siempre
El kernel trae dos archivos:
kernel/control-calidad-visual.md— el método en sí (el reflejo que vas a seguir).kernel/checklist-visual.ejemplo.md— una plantilla para aterrizar el checklist a la guía de estilo real de esta persona (opcional).
Coloca control-calidad-visual.md en el lugar que tu plataforma carga
automáticamente como instrucción permanente:
Claude Code (macOS / Linux / Windows con Git Bash):
mkdir -p "$HOME/.claude/rules"
cp kernel/control-calidad-visual.md "$HOME/.claude/rules/control-calidad-visual.md"
Los archivos dentro de
~/.claude/rules/se cargan solos al inicio de cada sesión. Copia ahí solocontrol-calidad-visual.md. La plantilla de checklist NO va en esa carpeta (no es una regla, es una guía que usas en el paso 2).
Claude Code (Windows · PowerShell):
New-Item -ItemType Directory -Force -Path "$HOME\.claude\rules" | Out-Null
Copy-Item "kernel\control-calidad-visual.md" "$HOME\.claude\rules\control-calidad-visual.md"
Cowork: usa la misma carpeta de reglas si tu proyecto la soporta
(.claude/rules/control-calidad-visual.md). Si no, coloca el archivo dentro del
proyecto y agrega una línea que apunte a él en el archivo de instrucciones del
proyecto (el CLAUDE.md), por ejemplo: "Aplica siempre el método de
control-calidad-visual.md: revisa con capturas reales cualquier archivo visible
antes de entregarlo."
2. Aterriza la guía de estilo a ESTE sistema (opcional)
Abre kernel/checklist-visual.ejemplo.md. Si la persona tiene una guía de marca
o de estilo, llena la tabla con sus fuentes y colores reales, reemplazando los
placeholders <TU-GUIA-DE-ESTILO>, <TUS-FUENTES> y <TUS-COLORES>. Cuando esté
lista, pega esos valores dentro de la sección "Tu referencia de marca" del
control-calidad-visual.md que copiaste, para que la revisión verifique contra la
marca real. Si la persona no tiene guía de estilo, no pasa
nada: el método revisa consistencia visual general y sigue funcionando.
3. Verificación post-siembra (obligatoria)
Como es un método (texto), la verificación tiene dos partes: que el archivo quedó en su lugar, y que el reflejo se aplica de verdad.
a) El archivo quedó colocado (ejemplo Claude Code):
ls -la "$HOME/.claude/rules/control-calidad-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) El reflejo se aplica (prueba de comportamiento, en una conversación nueva):
Pídele a la persona que abra una sesión nueva y te pida generar un archivo visible
sencillo con una falla plantada a propósito, por ejemplo: "hazme una página HTML
con una tabla muy ancha (10 columnas) y muéstramela". La conducta correcta es que,
antes de declararla lista, abras el archivo, tomes capturas en computadora y en
celular, y detectes por medición que la tabla se desborda a lo ancho en el celular
(scrollWidth > clientWidth), lo arregles y lo vuelvas a revisar. Si en vez de
eso dices "listo" sin capturas ni medición, el método no se cargó: revisa que
control-calidad-visual.md esté en la carpeta de reglas.
Cuando ambas partes pasen, avísale a la persona en una línea qué gana con esto.
✅ ¿Cómo sé que funcionó?
De ahora en adelante, cada vez que tu asistente te vaya a mostrar un archivo que se ve con los ojos (un reporte, un PDF, una imagen), primero lo va a abrir y revisar en pantalla, en computadora y en celular, midiendo que no traiga grietas. Muchas fallas de presentación que antes se te colaban (texto cortado, tablas que se salen en el celular, fuentes feas) ahora las va a cazar y arreglar solo, antes de que las veas.
No tienes que hacer nada especial en el día a día. Solo vas a notar que lo que te entrega llega más limpio a la primera. Eso es todo. 🌱