Actualización de sitio web
Un método para convertir un sitio que parece ensamblado en uno del que su propietario se sienta orgulloso de mostrar. Se destiló de actualizaciones reales que se enviaron y que los propietarios y sus equipos calificaron altamente: el sitio de marketing de una aplicación móvil, el sitio de una empresa B2B en la nube que pasó por dos direcciones completas, y un centro de ayuda construido desde cero. Reutiliza el método, las recetas y las trampas. Nunca reutilices una apariencia: cada sitio toma su dirección de su propia marca, producto y audiencia.
Qué significa "terminado"
La actualización está terminada cuando se cumplen todos estos puntos, y no antes:
- Cada afirmación en el sitio se remonta a una fuente que puedes nombrar: código del producto, texto legal, el sistema de facturación o la respuesta escrita del propietario.
- El diseño proviene del material propio de la marca, y su idea no supera la prueba del competidor (direction.md).
- Uno o dos momentos distintivos que el visitante hace o mira; todo lo demás es disciplinado.
- Nada necesita movimiento para ser visto. Con movimiento reducido, se muestran los estados finales.
- Se verificó en un navegador real a 1440, 1920×710, 390 y 320 px, en todos los temas, con movimiento reducido, en una compilación de producción.
- Tu crítica escrita lo califica con 9/10 o más, o tu informe dice claramente dónde se queda corto (critique.md).
- Se entrega como PRs que el equipo pueda revisar, con una breve actualización que puedan copiar y pegar.
Reglas fundamentales
- La verdad antes que el diseño. Cada característica, número, precio, fecha de disponibilidad y prueba social se remonta a una fuente. El texto de incorporación y del muro de pago del producto a menudo promete demasiado: verifícalo en el código. "Desconocido" es una respuesta válida: haz que el espacio sea opcional y pregunta, nunca lo llenes con un número plausible. Elimina las pruebas inventadas.
- La marca decide el aspecto. Deriva la paleta, la tipografía y el dispositivo distintivo del material propio de la marca: logotipo, nombre, interfaz de usuario del producto, videos, lugar. Un dispositivo que parezca generado (tells.md) solo está permitido cuando el material de la marca o el propietario lo ponen allí, y el contrato de dirección lo nombra.
- El producto es el héroe. La interfaz de usuario real y los artefactos reales superan a los iconos, el 3D de stock y las abstracciones. Una demo se parece a la cosa real: una factura A4 real, una plantilla renderizada real, el catálogo real.
- Un sitio web, no una presentación de diapositivas. Evita las pilas de bloques centrados de título e imagen que aparecen gradualmente. Utiliza composición, historias de desplazamiento fijas, profundidad en capas, demostraciones interactivas y movimiento impulsado por el estado.
- Nunca ocultes el contenido detrás del movimiento. Una revelación que nunca se activa deja una página en blanco. Respeta
prefers-reduced-motionmostrando los estados finales. - El propietario informado, no estorbando. Muestra la dirección antes de la compilación completa. Haz la página de inicio primero y amplía a las otras páginas una vez que esté aprobada. Haz cada pregunta abierta una vez, con opciones, y sigue construyendo a su alrededor.
- La configuración contiene los valores. Las variables de entorno llevan una URL, un ID o un token, nunca interruptores de encendido/apagado o constantes codificadas. Deriva los valores dependientes de ellas. Compromete solo
.env.example. - Sigue el repositorio de destino. Lee su README, CONTRIBUTING, AGENTS.md y la configuración de commitlint. Usa su gestor de paquetes. Coincide con sus versiones de framework (Next 14 vs 16, Tailwind 3 vs 4, React 18 vs 19).
- Los secretos y los internos se quedan fuera. Nunca imprimas, comprometas ni hagas eco de un token que el propietario pegue. Los commits públicos y los PRs no llevan nombres de clientes, precios privados ni brechas de seguridad sin corregir.
- Nunca lo des por terminado por debajo de 9/10. Puntúa el trabajo a partir de capturas de pantalla antes de informarlo. Una autocalificación de 6 o 7 ofrecida después de "terminado" es señal de trabajo omitido.
Primero, elige el modo
Lo que el visitante vino a hacer decide hasta dónde puede llegar el diseño. Un proyecto puede contener varias superficies en diferentes modos; da a cada una el suyo.
| Modo | Superficies | El visitante | Lo que guía | Leer |
|---|---|---|---|---|
| Persuadir | producto, marketing, empresa, campaña, precios | decide y actúa | el producto demostrándose a sí mismo; una acción real en la primera pantalla | building-blocks.md |
| Leer | centro de ayuda, documentación, registro de cambios, blog | entiende algo | la pregunta del lector; la marca posee el marco, nunca la columna de lectura | read-mode.md |
| Experimentar | portafolio, escaparate, galería | explora el trabajo | el trabajo en sí mismo, desde la primera ventana gráfica | building-blocks.md § Experiencia |
El sitio de marketing de un producto es Persuadir aunque muestre la aplicación. Su centro de ayuda es Leer aunque sea hermoso.
Flujo de trabajo
Trabaja a través de las fases en orden. Lee cada referencia cuando llegues a su fase, no antes.
| Fase | Hacer | Leer |
|---|---|---|
| 0. Inicio | Crea una rama a partir de la rama predeterminada, inicia el servidor de desarrollo (anota el puerto real), captura el conjunto "antes" para el informe | verification.md § 1 |
| 1. Descubrimiento | Audita el sitio, encuentra las fuentes de verdad, escribe el libro de contabilidad de afirmaciones y el inventario de temas, recopila material de la marca, informa los hallazgos | discovery.md |
| 2. Dirección | Encuentra la idea y pasa la prueba del competidor, establece la paleta y la tipografía, elige los momentos distintivos, escribe el contrato de dirección, muéstralo | direction.md, tells.md |
| 3. Construir estático | Tokens, el héroe, cada acto con contenido real, las páginas internas. Movimiento apagado en tu cabeza. | building-blocks.md, media.md, read-mode.md |
| 4. Movimiento y firma | Una introducción coreografiada, momentos impulsados por el estado, la firma. 3D solo cuando se gana su lugar. | motion.md, three-d.md |
| 5. Contacto y conversión | Validación compartida, el formulario, una ruta de borde, un correo electrónico de notificación diseñado, reserva o prellenado de clientes potenciales | contact-email.md |
| 6. SEO y estándares | Renderizado del servidor, metadatos, tarjetas sociales, datos estructurados, archivos de rastreador, encabezados. Su propio PR apilado. | seo-standards.md |
| 7. Verificar y criticar | Bucles del navegador en cada anchura y tema, las comprobaciones con script, una compilación de producción, luego la crítica puntuada, hasta tres rondas | verification.md, critique.md |
| 8. Enviar | Commits, PRs, la actualización del equipo, el informe antes/después, DESIGN.md, notas de memoria | delivery.md |
Consulta gotchas.md cada vez que algo se comporte de manera extraña. Lee feedback.md cada vez que el propietario reaccione: convierte lo que los propietarios dicen ("no hay suficiente chispa", "colores desequilibrados", "copia barata") en qué cambiar.
Si una habilidad de dirección de diseño está instalada (frontend-design, impeccable, taste-skill), cárgala en la fase 2 para obtener un rango adicional. Esta habilidad funciona por sí sola sin ella.
Pila. Las recetas se enviaron en Next.js, React, Tailwind y GSAP, alojadas en Cloudflare Pages, y los fragmentos muestran esa pila. El método, las comprobaciones y la mayoría de los scripts no dependen de ella: en Astro, SvelteKit, Nuxt o HTML simple, mantén la regla y traduce la receta al framework y las versiones de destino.
Scripts
Ejecuta desde la raíz del repositorio de destino. <skill> es la carpeta de esta habilidad.
node <skill>/scripts/slop-scan.mjs [dir] [--json] [--strict] [--allow <rules>] [--list-rules]: escanea el código fuente en busca de señales de sitios generados, pruebas inventadas, copia genérica, enlaces rotos, secretos y trampas conocidas. Sale con 1 en caso de errores (o con advertencias con--strict). Nombra una excepción ganada con un comentariosite-upgrade-allow: <rule> <reason>(cubre las líneas debajo de él hasta la siguiente línea en blanco) o un archivo.site-upgrade-allowen la raíz del repositorio. Node 18+, sin dependencias.<skill>/scripts/ssr-audit.sh <base-url> [path]...: por página (cada página del mapa del sitio cuando no se dan rutas): estado, recuento de<h1>, bloques JSON-LD, canónica, imagen social, rescates de renderizado del cliente y el título; luego encabezados de seguridad y archivos de rastreador. Sale con 1 cuando una página falla. Ejecútalo contra un servidor de producción.<skill>/scripts/video-prep.sh <source> <out-dir> [name] [poster-second]: imprime cortes de escena como candidatos a capítulos y escribe codificaciones web silenciosas con fotogramas clave en cada corte, un póster y un clip de vista previa cuadrada. Vuelve al binarioimageio_ffmpeg.<skill>/scripts/playwright/*.js: para la herramientabrowser_run_code_unsafede Playwright MCP. El MCP lee solo archivos dentro del espacio de trabajo, así que cópialos primero (mkdir -p .playwright-mcp && cp <skill>/scripts/playwright/*.js .playwright-mcp/) y pasafilename: ".playwright-mcp/<name>.js". Mantén.playwright-mcp/fuera de git.reveal-scroll.jsse desplaza para que cada revelación se active antes de una captura de pantalla y lista el texto que aún permanece oculto después.page-audit.jsmide el marco: un<h1>, encabezados de más de dos líneas, texto pequeño, objetivos táctiles pequeños, controles sin nombre, imágenes sinalt, secciones sin título y superficies del navegador sin tema.overflow.jsencuentra qué causa el desplazamiento horizontal de 320 a 1440 px y nombra los culpables más externos.console-scan.jsvisita cada URL del mapa del sitio e informa errores de consola, errores de página, solicitudes fallidas, 4xx/5xx y violaciones de CSP.
Activos y plantillas
Copia en el repositorio de destino o en el bloc de notas y adapta:
assets/render-email.ts: renderiza plantillas de React Email a HTML sinreact-dom/server, para rutas de borde.assets/JsonLd.tsx: una etiqueta de script JSON-LD que es segura de incrustar.assets/ScrollTriggerRefresh.tsx: vuelve a medir los disparadores de desplazamiento de GSAP cada vez que cambia la altura de la página.assets/templates/claims-ledger.md: enviado, no enviado, desconocido y números, cada uno con una fuente (fase 1).assets/templates/direction-contract.md: la tesis, la idea, el mundo propio, la primera ventana gráfica, la firma y las excepciones de la marca (fase 2).assets/templates/critique-round.md: la crítica puntuada, un bloque por ronda (fase 7).assets/templates/DESIGN.md: el sistema de diseño construido, escrito al final para que los agentes posteriores se mantengan en la marca (fase 8).assets/templates/team-update.md: la actualización de copiar y pegar para el chat del equipo (fase 8).
Puntos de control del propietario
Confirma estos antes de publicar cualquier cosa que dependa de ellos. Pregunta una vez con opciones; no detengas la compilación:
- estado de lanzamiento y disponibilidad en la tienda, a partir del listado de la tienda en vivo en lugar de banderas de entorno
- precios y planes, y su fuente
- cifras que nadie puede obtener aún (tiempo de actividad, centros de datos, recuentos de clientes): déjalas fuera hasta que alguien las autorice
- la bandeja de entrada de contacto, y una bandeja de entrada que el propietario pueda leer para las pruebas
- elementos aún no lanzados en cualquier lista, catálogo o carrusel
- identidad legal, dirección y teléfono, idénticos en todas partes donde aparezcan
- cualquier tercero que reciba datos del visitante (analíticas, incrustaciones, fuentes, correo electrónico), y las líneas de política de privacidad que necesita
- los archivos fuente de cualquier mascota, modelo 3D o video antes de reconstruir uno
- cada paso de producción: dominios, DNS, configuraciones de implementación, migraciones. El propietario los ejecuta o los aprueba