¿CON QUÉ IA?

Caso de usoProgramación

Pasar componentes React de MUI a Tailwind con Devin

Ingenieros de Lumos le dieron a Devin una instrucción corta para cambiar el estilo de componentes React y Devin abrió el cambio para revisar.

ParaprogramarConDevinLo contó lumos.comDificultad avanzada

A quién le sirve. Equipos de desarrollo con una migración repetitiva de código, como cambiar de librería de estilos, que quieren un primer borrador hecho por un agente para que una persona lo revise.

Qué hicieron

Los ingenieros de Lumos le dieron a Devin una instrucción corta para convertir componentes React de MUI a Tailwind (dos formas de dar estilo a una web) usando sus propios estilos, y Devin abrió una PR, una propuesta de cambio para revisar. Antes le dejaron ejecutar las pruebas unitarias y llenaron su función de Conocimiento con indicaciones propias del código de la empresa. Después los ingenieros revisaron la PR.

Cómo salió

La conversión salió bastante bien, pero la PR no estaba lista para integrarse tal cual. Creen que los linters y los ganchos previos al commit podrían haberlo arreglado. En conjunto, Devin subió 44 PR en 48 días y se integraron 19.

Conviene saber

Una PR típica de Devin cuesta entre 5 y 40 $, unos 20 $ de media. Cada orden tiene un tope de 10 ACU (unos 20 $), y una PR sencilla de borrado costó unos 5 $.

Qué necesitas

  • Una cuenta de Devin con un plan de pago y acceso al repositorio, que es el lugar donde vive el código.
  • Un proyecto con pruebas automáticas que Devin pueda ejecutar.
  • Notas con las normas propias de tu código, como nombres, estilos y componentes que usar, para dárselas a la función de Conocimiento de Devin.
  • Una persona que revise la propuesta de cambio antes de integrarla.

Cómo hacerlo tú, paso a paso

  1. Conecta Devin con tu repositorio y comprueba que puede ejecutar las pruebas automáticas.
  2. Escribe en la función de Conocimiento de Devin las normas de tu código: cómo se nombran los estilos, qué componentes usar y qué no tocar.
  3. Elige una carpeta pequeña de componentes para la primera prueba.
  4. Pega el prompt de esta ficha con el nombre del repositorio, la ruta y las librerías de origen y de destino.
  5. Deja que convierta los componentes, ejecute las pruebas tras cada uno y abra una PR cuando pasen. Una PR es una propuesta de cambio que otra persona revisa antes de integrarla.
  6. Revisa la PR como la de un compañero nuevo: aspecto, comportamiento y limpieza del código. Pasa antes los linters, que son herramientas que revisan el estilo del código.
  7. Si funciona, repite con otras carpetas y ajusta el Conocimiento con lo que Devin haya hecho mal.
Pruébalo con Devin
En [nombre del repositorio], convierte los componentes de React de la carpeta [ruta] de [librería de estilos actual, por ejemplo MUI] a [la nueva, por ejemplo Tailwind], manteniendo el mismo aspecto y comportamiento. Ejecuta las pruebas unitarias existentes después de cada componente y corrige los fallos antes de seguir. Abre una PR cuando todas las pruebas pasen, con una lista corta de los componentes convertidos y de lo que no hayas podido convertir.

Consejos

  • Una PR no suele estar lista para integrar tal cual. La fuente cree que los linters y los ganchos previos al guardado de cambios, llamado commit, habrían arreglado esos detalles.
  • No integres sin revisar. En el caso, de 44 PR que Devin subió se integraron 19.
  • Empieza con una conversión pequeña. Cada orden tiene un tope de gasto en Devin y las PR sencillas salen más baratas.

Preguntas frecuentes

¿Cuánto cuesta una conversión?

La fuente da un rango por PR y un tope por orden, pero las tarifas cambian. Haz primero una prueba pequeña y mira cuánto gasta antes de lanzar migraciones grandes.

¿Puedo fiarme de que no rompe nada?

Las pruebas automáticas ayudan, pero no lo cubren todo, y por eso el prompt le obliga a ejecutarlas tras cada componente y a listar lo que no pudo convertir. La revisión humana sigue siendo obligatoria.

Fuentes

En el directorio desde el 12 de octubre de 2026.

Parecidos

  1. Conectar un servicio externo pidiendo el trabajo a Devin

    Un programador pidió a Devin por Slack una integración con un servicio externo y lo revisó como si fuera el trabajo de un junior.Caso@prpatel05 en DEVDevinDificultad avanzada
  2. Crear una página de ofertas por pasos con Devin

    Una ingeniera encargó a Devin una página de ofertas dividida en sesiones; gastó sus 150 unidades de uso en menos de una semana.Casoqubika.comDevinDificultad avanzada
  3. Crear un juego web de nombres y caras a partir de una hoja de cálculo

    Scott Wu dio a Devin una lista de ponentes con fotos y obtuvo en minutos una web de preguntas con contador de rachas.Casoai.engineerDevin2 fuentesDificultad media
  4. Crear una web de WordPress desde un diseño de Figma en una noche

    Un desarrollador dio a Devin acceso a un archivo de Figma y el agente construyó de noche la web de WordPress con gestión de contenidos.Caso@bnistordev en XDevinDificultad avanzada
  5. Crear y publicar una web del juego de la vida con Devin

    En una demostración de lanzamiento del fabricante, Devin creó una web interactiva del juego de la vida, le añadió funciones una a una y la publicó en Netlify.Casocognition.comDevinDificultad media
  6. Crear y publicar una app con Devin en un fin de semana

    El autor hizo que Devin construyera y publicara una app: rápido con los comentarios de revisión, flojo con proyectos antiguos y caro con peticiones amplias.Caso@sambhavgaur_70582 en MediumDevinDificultad media

Más: todo con Devin · todo sobre programación

Cada lunes, lo nuevo en tu correo

Lo que ha salido esa semana, las skills que más suben y tres casos que puedes copiar.

Un correo a la semana. Te das de baja con un clic.