Las herramientas de codificación con AI como Cursor y Claude Code aceleran el trabajo en sitios web, pero los errores más comunes provienen de tratar su resultado como código terminado. Los equipos omiten la revisión, permiten que el agente toque demasiados archivos a la vez, ignoran los efectos secundarios en el rendimiento y el SEO, y trabajan sin control de versiones. Cada uno de estos es evitable con algunos hábitos de trabajo.
Cursor es un editor de código basado en AI construido sobre la base de código de VS Code, con chat, ediciones en línea y un modo agente que puede cambiar varios archivos. Claude Code es la herramienta de codificación agentica de Anthropic que se ejecuta en la terminal, lee un repositorio, ejecuta comandos y propone ediciones. Ambos son capaces. Ambos también producirán con confianza código que parece correcto y rompe silenciosamente algo que no pediste.
¿Por qué se rompen los sitios web creados con AI en producción?
La mayoría de los fallos no son errores de sintaxis. El código funciona. El problema es lo que el cambio hizo en los bordes: una plantilla que perdió su etiqueta canonical, una imagen principal que ahora se carga sin dimensiones, un formulario que dejó de enviar su evento de seguimiento. Un agente optimiza para la tarea que describiste, por lo que todo lo que no describiste está desprotegido.
La segunda causa es el alcance. Una solicitud como “limpiar el encabezado” puede convertirse en ediciones en doce archivos. Cuando el diff es tan grande, nadie lo lee correctamente y se cuelan pequeñas regresiones.
Error 1: trabajar sin una red de seguridad
El error más costoso es dejar que un agente edite un proyecto que no está bajo Git, o confirmar todo en un commit gigante al final del día. Si el cambio rompe la página de pago, necesitas saber exactamente qué edición lo hizo.
- Haz un commit antes de cada sesión de agente, para que siempre tengas un punto limpio al que regresar.
- Pide un cambio por sesión o por commit, con un mensaje corto que lo describa.
- Mantén una copia de staging del sitio; nunca apuntes un agente al servidor en vivo.
- En Claude Code, mantén activadas las solicitudes de permiso para comandos de shell que escriban fuera del proyecto o toquen el despliegue.
Error 2: aceptar diffs grandes sin leerlos
Cursor muestra las ediciones propuestas en línea, y Claude Code muestra los diffs antes de aplicarlos. La tentación es aceptar porque el resumen suena bien. Los resúmenes describen la intención, no el cambio real. Lee el diff, especialmente las eliminaciones.
Una regla práctica que usamos: si un diff es demasiado largo para leerlo en cinco minutos, es demasiado largo. Pide a la herramienta que divida el trabajo en pasos más pequeños. Lo hará, y la revisión se volverá realista.
Error 3: olvidar los presupuestos de rendimiento
Los agentes añaden bibliotecas fácilmente. Pide un carrusel y puedes obtener una dependencia de 90 KB donde bastarían veinte líneas de CSS. También tienden a escribir imágenes sin atributos de ancho y alto y a cargar fuentes sin pensar en el bloqueo de renderizado.
Los Core Web Vitals de Google dan un objetivo claro: Largest Contentful Paint por debajo de 2.5 segundos, Interaction to Next Paint por debajo de 200 milisegundos y Cumulative Layout Shift por debajo de 0.1. Pon esos números en tu archivo de instrucciones del proyecto (reglas de Cursor o un archivo CLAUDE.md para Claude Code) para que la herramienta los vea en cada tarea, y ejecuta Lighthouse o PageSpeed Insights antes de fusionar.
Error 4: romper el SEO sin darse cuenta
Los problemas de búsqueda rara vez aparecen en una verificación visual. La página se ve idéntica; la sección head no. Las regresiones comunes después de una edición de AI incluyen:
- Una etiqueta meta noindex copiada de una plantilla de staging a producción.
- URLs canónicas que apuntan a la ruta incorrecta después de un cambio de enrutamiento.
- Encabezados reorganizados para que una página tenga dos elementos H1 o ninguno.
- Datos estructurados eliminados cuando se reescribió un componente.
- Enlaces internos cambiados de anclas reales a manejadores de clic de JavaScript que los rastreadores no pueden seguir.
La solución es una breve verificación automatizada. Un script que obtiene plantillas clave y afirma que el título, el canonical, la etiqueta robots y el JSON-LD están presentes atrapa la mayoría de estos en segundos.
Error 5: confiar en APIs inventadas y sintaxis obsoleta
Los modelos de lenguaje a veces llaman a funciones que no existen, o usan una API de framework que cambió hace dos versiones. En WordPress esto puede parecer un nombre de hook que es casi correcto; en Shopify puede ser Liquid obsoleto. El código puede incluso fallar silenciosamente.
Pide a la herramienta que cite la documentación en la que se basa, ejecuta el linter o el verificador de temas, y prueba en un navegador real. Si una respuesta incluye una función que no reconoces, búscala antes de aceptarla.
Error 6: pegar secretos y datos de clientes en los prompts
Las claves de API, los volcados de base de datos y las exportaciones de clientes no pertenecen a una ventana de chat. Mantén los secretos en archivos de entorno que estén excluidos del contexto que lee la herramienta, usa datos de prueba para depurar y revisa la configuración de datos de la herramienta. Tanto Cursor como Anthropic publican opciones de privacidad y retención en el momento de escribir esto; léelas para tu plan en lugar de asumir.
Cómo aplica Alien Road las herramientas de codificación con AI en los sitios web de los clientes
En una construcción web típica, comenzamos con un descubrimiento que no tiene nada que ver con la herramienta: inventario de páginas, Core Web Vitals actuales de datos de campo en Search Console, eventos de seguimiento que deben sobrevivir y elementos SEO por plantilla. Esa lista se convierte en el archivo de instrucciones del proyecto que el agente lee en cada tarea.
La configuración viene después. El repositorio se pone bajo Git con un entorno de staging, un linter y un pequeño script de verificación para títulos, canonicals, etiquetas robots y esquema. Las sesiones de agente se limitan a un ticket. Un desarrollador revisa cada diff y ejecuta las verificaciones antes de que algo se fusione.
La medición es la parte que ven los clientes. Comparamos las puntuaciones de Lighthouse y los datos de campo antes y después, confirmamos que los eventos de analítica siguen disparándose en la vista de depuración y rastreamos el staging con Screaming Frog para comparar las páginas indexables. Los informes enumeran lo que cambió, lo que se probó y lo que se dejó solo a propósito. La herramienta escribe código más rápido; el proceso es lo que mantiene el sitio estable.
Una lista de verificación corta antes de fusionar
- Diff leído en su totalidad, incluyendo las líneas eliminadas.
- Lighthouse ejecutado en las plantillas cambiadas, sin regresiones en Core Web Vitals.
- Título, meta descripción, canonical, robots y datos estructurados presentes.
- Formularios enviados en staging y eventos de seguimiento visibles en el modo de depuración de analítica.
- Ninguna nueva dependencia añadida sin una razón declarada.
- Conceptos básicos de accesibilidad verificados: texto alternativo, estados de enfoque, contraste de color.
Por dónde empezar esta semana
Elige un ticket pequeño y real, como arreglar el cambio de diseño en la plantilla del blog. Haz un commit primero, escribe un archivo de instrucciones corto con tus reglas de rendimiento y SEO, y ejecuta la tarea en Cursor o Claude Code con la revisión de diff activada. Cronometra todo, incluyendo la revisión y las verificaciones. Esa única ejecución medida te dice más sobre cómo encajan estas herramientas en tu equipo que cualquier demo.
Sigue leyendo: Diseño y desarrollo web · Diseño web