Cursor y Claude Code para sitios web: flujos de trabajo que ahorran tiempo

Cursor es un editor de código construido sobre la misma base que Visual Studio Code, con funciones de AI para chat, ediciones en línea y un modo agente que puede cambiar varios archivos a la vez. Puede usar modelos de varios proveedores.

Claude Code es la herramienta de codificación de línea de comandos de Anthropic. Se ejecuta en una terminal o dentro de editores, lee el proyecto, ejecuta comandos y edita archivos con la aprobación del desarrollador. Los equipos a menudo agregan un archivo de notas del proyecto, como CLAUDE.md, que le indica a la herramienta las convenciones y las partes frágiles de la base de código.

Otras herramientas en el mismo espacio incluyen GitHub Copilot, Windsurf y Codex de OpenAI. Los flujos de trabajo a continuación se aplican a la mayoría de ellas.

La corrección de errores es donde estas herramientas a menudo dan sus frutos primero, porque la tarea tiene un final claro: el error desapareció y nada más se rompió.

• Escriba el error como un informe breve: página, pasos para reproducirlo, resultado esperado y real
• Entregue el informe a la herramienta y pídale que encuentre la causa antes de cambiar nada
• Revise su explicación; si es incorrecta, corríjala a tiempo
• Deje que proponga una solución limitada a los archivos involucrados
• Ejecute el sitio localmente y verifique la página en anchos de móvil y escritorio
• Haga un commit con un mensaje que explique la causa, no solo la solución

Preguntar primero por la causa evita que la herramienta parche los síntomas. Una teoría incorrecta detectada en el paso tres ahorra una hora de reversiones más tarde.

Agregar una tabla de precios, un control deslizante de testimonios o un bloque de preguntas frecuentes es un trabajo rutinario con muchas pequeñas decisiones sobre nombres, estilos y estructura.

Pasos

• Apunte la herramienta a un componente existente que siga el estilo de la casa
• Describa el nuevo componente: campos de contenido, diseño en móvil y escritorio, necesidades de accesibilidad
• Pídale que siga la misma estructura de archivos y nombres de CSS
• Revise el marcado para ver el orden de los encabezados, las etiquetas y la compatibilidad con el teclado
• Pruebe con contenido real, incluyendo texto largo e imágenes faltantes

En un tema de bloques de WordPress, por ejemplo, esto podría significar un nuevo patrón de bloques más un archivo CSS registrado en la lista de activos del tema. Decirle a la herramienta dónde vive esa lista evita un error común: estilos escritos pero nunca cargados.

Las herramientas de codificación con AI pueden escribir pequeños scripts que verifican muchas páginas a la vez. Esto es útil para auditorías que serían aburridas de hacer a mano.

• Solicite un script que obtenga una lista de URL y verifique la longitud del título, la meta descripción, el recuento de H1 y el texto alternativo de la imagen
• Ejecútelo primero en una copia de prueba
• Revise el resultado como una hoja de cálculo
• Pídale a la herramienta que agrupe los problemas por plantilla, ya que una corrección de plantilla a menudo cubre cientos de páginas
• Corrija la plantilla, vuelva a ejecutar el script y compare

Mover contenido de un sitio antiguo, limpiar HTML o actualizar publicaciones de forma masiva es arriesgado. Un script escrito por una herramienta de AI puede ser rápido de producir y peligroso de ejecutar.

• Haga una copia de seguridad de la base de datos antes de cualquier ejecución
• Solicite un modo de prueba que informe los cambios sin guardarlos
• Pruebe con diez registros, luego cien, luego todos
• Haga que el script sea seguro para ejecutar dos veces, de modo que una nueva ejecución no cree duplicados
• Mantenga un registro de los ID de registro modificados

Estas herramientas actúan rápido y pueden estar equivocadas con confianza. Las reglas evitan que pequeños errores lleguen a los visitantes.

• Trabaje en control de versiones y revise cada diferencia antes de confirmar
• Nunca le dé a la herramienta credenciales de producción o claves de API en vivo
• Ejecute pruebas y linters después de cada cambio, por ejemplo php -l para archivos PHP
• Mantenga un archivo de notas del proyecto actualizado con convenciones y trampas conocidas
• Pídale a la herramienta que explique cualquier cambio que no entienda
• Limite los permisos: apruebe comandos que eliminen archivos o toquen la base de datos

Un archivo de notas del proyecto da sus frutos rápidamente. Cuando la herramienta sabe que no se debe eliminar una plantilla determinada o que los estilos viven en archivos separados, deja de repetir los mismos errores.

La intuición es una mala guía aquí. Los desarrolladores a menudo se sienten más rápidos con las herramientas de AI incluso en tareas donde la revisión y el retrabajo consumen la ganancia. En su lugar, realice un seguimiento de algunos números durante un mes.

• Tiempo desde el inicio de la tarea hasta el cambio fusionado, por tipo de tarea
• Número de rondas de revisión antes de la aprobación
• Errores encontrados en la semana posterior al lanzamiento
• Commits revertidos

Compare las cifras con un mes similar antes de las herramientas. Algunos tipos de tareas mostrarán ganancias claras, otros ninguna; desplace el uso de la AI hacia el primer grupo.