Codificación Vibe representa una nueva era de desarrollo de software en la que la creatividad humana y la inteligencia artificial trabajan juntas para producir código en un flujo continuo y centrado. No se trata solo de acelerar el desarrollo, sino de programar con sensibilidad, reducir la fricción y mejorar la experiencia del desarrollador. En Marvik, vemos la programación con herramientas de inteligencia artificial como una evolución en la forma en que diseñamos, construimos y abordamos el software. Los copilotos de IA ayudan a:

• Completar automáticamente la lógica compleja
• Refactorización instantánea del código.
• Generación de componentes estándar o completos.

Esto permite a los desarrolladores concentrarse en la arquitectura, la experiencia del usuario y la resolución creativa de problemas, mientras que la IA se encarga de las tareas repetitivas. ¿El término «codificación de vibraciones» comenzó a ganar terreno tras un tuit de febrero de 2025 de Andrej Karpathy, cofundador de OpenAI. Describió la sensación de programar junto con la IA como algo fluido y casi meditativo. Desde entonces, la frase se ha extendido entre las comunidades tecnológicas para describir este estilo de programación inmersivo y potenciado por la IA.

El impacto de la codificación de vibraciones con herramientas de inteligencia artificial en el desarrollo moderno

En Marvik, siempre estamos buscando formas de optimizar los procesos sin sacrificar la calidad. Como parte de ese esfuerzo, probamos una variedad de herramientas de desarrollo basadas en inteligencia artificial para evaluar su rendimiento y determinar si podían automatizar partes de nuestro flujo de trabajo de desarrollo web. El objetivo era simple: medir cuánto más rápido podíamos crear e integrar nuevas páginas en nuestra base de código. Nos centramos en las herramientas que se conectan directamente a Figma y generan código utilizable a partir de los diseños. Nuestra gama incluye:

• Adorable
• Tempo
• v0
• Tornillo
• VSCode + Copiloto de GitHub
• Cursor

El objetivo: creación de páginas más rápida

Nos centramos en automatizar la tarea repetitiva, pero es necesario añadir nuevas páginas que sigan una estructura coherente. Por lo general, estas incluyen:

• Una sección de héroes con texto personalizado e imagen de fondo.
• Secciones informativas que reutilizan componentes e iconos comunes
• Carruseles o vitrinas con contenido dinámico
• Archivos de traducción de idiomas que mapean el texto para la internacionalización.

Para agilizar este proceso, creamos plantillas de mensajes que podían generar automáticamente los archivos JSX/React y JSON relevantes en función del contenido de nuestros diseños de Figma.

Herramientas basadas en Figma: Lovable, TempoAI, v0 y Bolt

Estas herramientas son excelentes cuando construyes algo nuevo desde cero. Ofrecen formas rápidas de convertir diseños visuales en código. Ideal para páginas de destino, prototipos o sitios pequeños.

Sin embargo, nos encontramos con desafíos al integrar su salida en nuestra base de código existente:

• Tornillo fue útil para crear un punto de partida, pero adaptarlo a nuestra arquitectura requirió un esfuerzo considerable.
• Adorable, Tempo AI y v0 funcionan de manera similar: son eficientes desde el diseño hasta el código, pero carecen de flexibilidad para adaptarse a una arquitectura personalizada o reutilizar la lógica.

Estas herramientas funcionan bien para proyectos totalmente nuevos, pero son menos eficaces para la integración en bases de código maduras.

Cómo usar el cursor: un ejemplo práctico

El siguiente ejemplo ilustra las solicitudes necesarias para modificar el componente de la sección ShowCase y alinearlo con el diseño de destino. Inicialmente, tanto la imagen del nuevo diseño como el código del componente actual se compartían en el chat para definir el contexto.

Posteriormente, se emitió una solicitud adicional para corregir un problema, ya que los cambios implementados hacían que la información de la tarjeta no se mostrara correctamente.

El siguiente paso consistió en solicitar una modificación de los subtítulos: añadir un color degradado y corregir su alineación.

El último paso consistió en la modificación de los textos lingüísticos para la implementación de i18n, garantizando la visualización precisa de los títulos y el contenido en la página.

Entonces, después de todos estos pasos, finalmente logramos el resultado esperado:

Cómo usar el cursor de manera eficiente

Para usar Cursor de manera eficiente y aprovechar al máximo sus indicaciones, recomendamos el siguiente enfoque estructurado: Entendí qué es Cursor:

• Cursor es un editor de código con IA integrado, basado en VS Code.
• Te ayuda a escribir, editar, refactorizar y entender el código con la ayuda de la IA.
• Utiliza el contexto real del código y del archivo, lo que hace que las indicaciones sean mucho más precisas que en un chat independiente.

Escriba indicaciones eficientes:

• Sea directo y específico sobre el problema: concéntrese en tareas claras y específicas.
  • Ejemplo: «Reescribe esta función usando async/await sin cambiar la lógica».
• Pida explicaciones: es útil cuando se trabaja con código heredado.
  • Ejemplo: «¿Qué hace exactamente este reductor?»
• Solicite alternativas: compare varios enfoques.
  • Ejemplo: «Deme otra forma de hacer esto sin usar useEffect»
• Usa comentarios estructurados: el cursor interpreta los comentarios como instrucciones.
  • Ejemplo: «Mejorar el rendimiento de este bucle»
• Trabaja por partes: »Divida el código complejo en uno más pequeño y manejable secciones»
  • Ejemplo: Refactorizar una función a la vez.

Consejos adicionales:

• Usa el LLM para generar pruebas unitarias y ayudar a depurar tu código.
• Haga clic con el botón derecho y pida a Cursor sugerencias contextuales basadas en el código seleccionado.

MCP: protocolo de contexto modelo

MCP es un protocolo abierto que estandariza la forma en que las aplicaciones proporcionan contexto y herramientas a la LLM. Considérelo como un sistema de complementos para Cursor, ya que amplía las capacidades de la IA al conectarse a fuentes de datos y herramientas a través de interfaces estandarizadas. Ofrece las siguientes funciones:

• MCP Define cómo se selecciona y estructura el contexto al enviar mensajes a la IA.
• Organiza los archivos del proyecto, las acciones del usuario, los cambios de código y el historial de navegación en un contexto rico pero compacto.
• Permite que la IA comprenda en qué estás trabajando sin sobrepasar los límites de los tokens.

Ejemplo en acción: Supongamos que está editando un componente llamado UserForm.tsx. MCP realizará los siguientes pasos:

• Incluya archivos relacionados como UserSchema.ts o FormStyles.scss
• Agregue las ediciones recientes que haya realizado en Validations.ts
• Estructure esto en un mensaje que LLM pueda procesar de manera efectiva.

Los servidores MCP son programas livianos, cada uno de los cuales expone capacidades específicas a través del Protocolo de contexto modelo estandarizado. Los servidores MCP más populares:

• Espacio de trabajo de Copiloto de GitHub.
• Jupyter MCP.
• MCP de SQLite.
• Docker MCP.

Si está interesado en explorar todo el potencial de los MCP, eche un vistazo a nuestros blogs relacionados: Modelo de protocolo de contexto: integración de agentes en IA cloud y Protocolo de contexto modelo: potencie a sus agentes con MCP.

Reglas del cursor

Como desarrolladores, podemos definir reglas para guiar el comportamiento del agente de IA dentro de Cursor cuando interactúa con nuestro código, ya sea refactorizando, completando código o generando pruebas unitarias. Estas reglas son esenciales para evitar alucinaciones, la creación de estructuras inexistentes o cambios no deseados. Ejemplo: REGLAS: - No cree nuevas funciones, archivos o importaciones que no existan. - Utilice únicamente bibliotecas ya importadas en el archivo actual. - Utilice la sintaxis ES6+ (const/let, funciones de flecha, etc.). - Siga las convenciones de nomenclatura y la estructura de carpetas existentes del proyecto. - No modifique los bloques de código no relacionados. - Mantenga los cambios mínimos y centrados a menos que lo especifique lo contrario. - Conserve las firmas y bloques de código no relacionados. parámetros de las funciones existentes. - Prefiere async/await a Promises con .then () cuando se trata de código asíncrono. - No introduzca TypeScript ni escriba; utilice JavaScript simple. - Añadir comentarios solo si es necesario para mayor claridad. - Modifique solo el archivo actual a menos que se le indique explícitamente que actualice otros. Podriamos incorporar estas reglas en un aviso inicial o como (comentario)//) dentro del código. El cursor los reconoce y respeta como guía contextual para la edición.

Ventajas y desventajas de cada herramienta

Herramienta 🔧 Ventajas ✅ Desventajas ❌ Características ⭐ Tiempo transcurrido ⏱️ Adorable

• Genial para empezar y desarrollar una idea desde cero.
• Genera fácilmente la estructura inicial y la base de código

• Limitado para personalización avanzada.
• No es ideal para proyectos complejos o de gran escala.

• Editor visual de maquetación.
• Biblioteca de componentes.
• Exporta un código.
• Ideal para MVP.

• 15-30 para una página de destino funcional.

v0

• Permite la generación de interfaces a partir de indicaciones en lenguaje natural.

• La calidad del código puede variar.
• Limitado a la lógica empresarial o a los flujos de usuarios personalizados.

• AI Prompt-to-UI.
• Soporta Tailwind.
• Exporta de forma limpia.
• Reacciona el código.
• Soporte CMS sencillo.

• De 10 a 20 minutos para un diseño y maquetación iniciales.

Tornillo

• Generación rápida de sitios completos.
• Ideal para fluir con páginas de navegación y de varias secciones.

• Puede generar componentes redundantes.

• Generador IA Flujos.
• Generación de páginas y componentes.
• Soporta Tailwind + Next.js.

• 15-30 minutos para un sitio web funcional básico.

Tempo AI

• Experiencia de desarrollador en el desarrollador.
• Produce código estructurado y reutilizable.

• Todavía limitado para una personalización profunda.
• Es posible que sea necesario un refinamiento manual para las fundas laterales.

• Generación de páginas a partir de indicaciones.
• Pila React + Tailwind.
• Integración con IDE.

• 20-30 minutos para una página bien estructurada y codificada de forma limpia.

Copiloto de GitHub

• Excelente para modificar y ampliar las bases de código existentes.
• Proporciona una sólida ayuda contextual en el IDE.

• No está diseñado para generar páginas desde cero.
• Requiere una guía clara para el desarrollador con indicaciones correctas y específicas.

• Autocompletado en IDE.
• Generación de código sensible al contexto.
• Soporte multilingüe.

• 30 minutos para implementar una nueva página web con la estructura existente, incluidos los cambios de diseño. Depende del modelo usado.

Cursor

• Ideal para trabajar con bases de código existentes.
• Sólida comprensión contextual del proyecto.

• No es adecuado para construir desde cero.
• A veces da sugerencias incompletas o repetitivas, por lo que necesitamos volver a escribir indicaciones más específicas.

• IDE que prioriza la IA.
• Chat de código + autocompletar.
• Integración profunda con GitHub.

• 30 minutos para implementar una nueva página web utilizando la estructura existente, incluidos los cambios de diseño. Depende del modelo usado.

Tiempo ahorrado: métricas que importan

Medimos el tiempo que se tardó en generar y adaptar una nueva página con diferentes herramientas: GitHub TareasFocus copilot/cursor Cree JSX + i18n manualmente ~90 minutos ~15 minutos Ajustar el diseño y los estilos ~30 minutos ~15 minutos (4 indicaciones) Total ~2 horas~30 minutos Eso es un Reducción de tiempo del 75% with AI work flujos de trabajo asistidos por IA.

Qué funcionó mejor (y por qué)

Herramientas basadas en FIGMA como v0, Tempo AI, y Tornillo son fantásticos para la creación rápida de prototipos y construcciones nuevas. Sin embargo, en las bases de código maduras, su salida requería demasiada limpieza. Aqui es donde herramientas como GitHub, Copiloto y Cursor destacó. Al combinar una ingeniería rápida con entornos compatibles con el código, pudimos:

• Genere nuevas plantillas de página con datos y lógica reales.
• Genere y complete automáticamente los archivos de traducción.
• Reutilice y ajuste los componentes existentes con un mínimo esfuerzo.

La diferencia radica en conocimiento del contexto. Cuando herramientas como Cursor o GitHub Copilot comprenden la estructura de tu proyecto, pasan a ser mucho más que autocompletarse, actúan como colaboradores. Las tareas que antes llevaban horas (copiar código, ajustar elementos o vincular traducciones) ahora tardan menos de 30 minutos si se realizan unas cuantas instrucciones específicas y se configuran correctamente.

Reflexiones finales

Si estás poniendo en marcha un nuevo proyecto web, herramientas basadas en Figma como v0 y Adorable son un excelente lugar para empezar. Les ayudan a pasar del diseño al código en poco tiempo. Pero si trabajas con una base de código más grande y estructurada, no hay nada mejor que la eficiencia de Copiloto y Cursor with indicaciones con el alcance adecuado. Codificación Vibe impulsado por herramientas de IA como Cursor y Copiloto de GitHub está cambiando la forma en que los desarrolladores abordan la creación de software. Ya no se trata solo de escribir líneas de código, sino de mejorar la experiencia de codificación a través del flujo, la creatividad y la colaboración con asistentes inteligentes. En esencia, Codificación Vibe con herramientas de IA no es solo una tendencia, es una nueva filosofía de desarrollo. Aumenta tanto la productividad como el disfrute, lo que permite a los equipos crear un software mejor, más rápido y con más intención. En Marvik, esta combinación nos ayudó a reducir drásticamente el tiempo de desarrollo, sin sacrificar la consistencia ni la calidad.