Las herramientas de codificación con IA para sitios web, como Cursor y Claude Code, son asistentes que leen los archivos de un proyecto, proponen cambios de código y ejecutan comandos bajo las instrucciones de un desarrollador. En una agencia, aceleran el trabajo repetitivo de construcción, refactorización y depuración, mientras que las personas siguen siendo responsables de la arquitectura, las decisiones de diseño, la revisión de seguridad y la aprobación final antes de que cualquier cosa llegue al sitio en vivo de un cliente.
¿Qué son Cursor y Claude Code?
Cursor es un editor de código construido sobre la base de código abierto de Visual Studio Code, creado por la empresa Anysphere. Añade funciones de IA directamente al editor: autocompletado en línea, un panel de chat que puede ver el proyecto abierto y un modo agente que edita varios archivos a la vez. Los desarrolladores pueden elegir entre modelos de diferentes proveedores.
Claude Code es la herramienta de línea de comandos de Anthropic. Se ejecuta en una terminal, lee el repositorio y puede editar archivos, ejecutar pruebas y usar git cuando el desarrollador lo permite. También está disponible dentro de editores y aplicaciones de escritorio. Su punto fuerte es trabajar en tareas de varios pasos, como rastrear un error a través de un tema y dos plugins, mientras pide permiso antes de realizar acciones arriesgadas.
Ambas herramientas son tan buenas como el contexto que reciben. Un proyecto con una estructura clara, convenciones escritas y pruebas funcionales da resultados mucho mejores que un enredo de fragmentos copiados.
¿Qué partes de la construcción de un sitio web aceleran?
Las ganancias se concentran en el trabajo que está bien definido pero es tedioso. Un humano sigue decidiendo qué debe suceder; la herramienta se encarga de gran parte de la escritura y la búsqueda.
- Andamiaje (Scaffolding): creación de plantillas de bloques, tipos de publicación personalizados o archivos de componentes que siguen un patrón existente.
- Refactorización: renombrar funciones en todos los archivos, dividir una hoja de estilos grande en archivos de componentes, eliminar código muerto.
- Depuración: leer registros de errores, encontrar dónde falla un valor y sugerir una corrección para probar.
- Pruebas de accesibilidad: añadir etiquetas faltantes, atributos alt y estilos de enfoque, y luego comprobar el contraste.
- Scripts de datos: importaciones únicas, mapas de redirección de URL y limpiezas de contenido para migraciones.
- Documentación: escribir notas README para las decisiones de modo que el siguiente desarrollador las entienda.
¿Dónde siguen tomando las decisiones los humanos?
Varias áreas permanecen firmemente en manos de las personas, independientemente de lo que sugiera la herramienta. La arquitectura de la información, el sistema de diseño visual y las elecciones de marca provienen de la estrategia y la investigación, no de la generación de código. Lo mismo ocurre con cualquier decisión sobre qué datos recopila un sitio y adónde van.
La seguridad es el ejemplo más claro. Un asistente puede escribir un manejador de formularios que funcione pero que pase por alto comprobaciones de nonce, saneamiento de entradas o comprobaciones de capacidad. Cada cambio que afecta a la entrada del usuario, los pagos o la autenticación recibe una revisión humana línea por línea, por muy limpio que parezca.
Cómo utiliza Alien Road Cursor y Claude Code en los proyectos de los clientes
El descubrimiento es lo primero y ocurre sin herramientas de IA: acordamos objetivos, tipos de página, integraciones y fuentes de contenido con el cliente. El resultado es un resumen escrito y un archivo de convenciones del proyecto que describe la estructura de carpetas, las reglas de nomenclatura y las cosas que nunca deben cambiar. Ese archivo se convierte en contexto para las herramientas de codificación más adelante.
La configuración se ejecuta en un entorno de desarrollo local, normalmente Docker, nunca directamente en un servidor en vivo. Los desarrolladores utilizan Claude Code o Cursor para tareas como generar un conjunto de patrones de bloques a partir de diseños aprobados o escribir el script de importación que mueve las publicaciones antiguas del blog a una nueva estructura. Por ejemplo, una migración podría implicar cientos de publicaciones donde la herramienta escribe el script, pero un desarrollador lo ejecuta primero en modo de prueba (dry-run) y comprueba una muestra manualmente.
Cada cambio pasa por git. Los commits son pequeños, los mensajes explican el motivo y nada se fusiona sin que un humano revise el diff. La medición cubre el tiempo de construcción por plantilla de página, los defectos encontrados en las pruebas y las Core Web Vitals después del lanzamiento. Los clientes reciben un breve informe que enumera lo que se automatizó, lo que se revisó y lo que se probó.
¿Cómo se mantiene fiable el código escrito por IA?
El riesgo principal es el código que parece correcto y pasa un vistazo rápido, pero falla en casos extremos. Los modelos también tienden a añadir nuevas funciones auxiliares en lugar de reutilizar las existentes, lo que infla lentamente una base de código.
Escriba las reglas
Ambas herramientas leen archivos de instrucciones del proyecto. Claude Code utiliza un archivo CLAUDE.md; Cursor admite archivos de reglas. Registre las decisiones que le costaron tiempo aprender, como por qué no se debe eliminar un archivo de plantilla o qué función maneja las rutas. La herramienta evita así repetir viejos errores.
Pruebe lo que importa
Ejecute comprobaciones de linting y sintaxis después de cada edición, como php -l para archivos PHP. Mantenga una lista corta de URL para cargar después de cada cambio y comprobar si hay errores. Para el trabajo de diseño, compruebe anchos como 390, 768 y 1440 píxeles antes de considerar una tarea terminada.
Limite los permisos
Permita el acceso de lectura y las ediciones de archivos libremente, pero requiera confirmación para los comandos que eliminan datos, envían código o tocan bases de datos. Nunca pegue claves de API de producción en un prompt o en un archivo que la herramienta pueda confirmar.
¿Qué debería preguntar un cliente a una agencia que utiliza estas herramientas?
- ¿Cada cambio asistido por IA es revisado por un desarrollador nombrado antes de la implementación?
- ¿Dónde se realiza el desarrollo y salen los datos del cliente de ese entorno?
- ¿Qué partes del código están cubiertas por pruebas o comprobaciones manuales?
- ¿Quién es el propietario del código y de los archivos de instrucciones al final del proyecto?
- ¿Cómo se mantienen los secretos, como las claves de API, fuera de los prompts y repositorios?
Las respuestas claras a esto demuestran que la agencia trata las herramientas como instrumentos, no como un reemplazo de la artesanía. Las respuestas vagas son una señal de advertencia.
¿Qué errores cometen los equipos cuando adoptan estas herramientas por primera vez?
El error más común es pedir demasiado en una sola solicitud. Un prompt como “reconstruye el encabezado” invita a la herramienta a reescribir archivos que no necesita tocar. Las tareas más pequeñas y específicas, como mover el botón de búsqueda después del selector de idioma en anchos superiores a 1080 píxeles, producen cambios que un revisor puede comprobar en minutos.
El segundo error es saltarse la copia local. Ejecutar un agente contra un servidor de ensayo parece más rápido, pero un comando incorrecto puede sobrescribir cargas o configuraciones. Un entorno local desechable con una exportación de base de datos nueva elimina ese riesgo y permite a los desarrolladores probar dos enfoques uno al lado del otro antes de elegir uno.
Por dónde empezar esta semana
Si gestiona su propio sitio, comience con una tarea de solo lectura. Instale una de las herramientas en una copia local del proyecto y pídale que explique cómo el tema carga sus estilos o dónde vive una característica específica. Compare su respuesta con lo que sabe. Luego, escriba un archivo de convenciones de una página para el proyecto. Incluso si nunca permite que un asistente edite una línea, ese archivo le ahorrará horas al próximo desarrollador.
Siga leyendo: Diseño y desarrollo web · Diseño web