# 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.

- **Tipo:** Caso de uso
- **Tema:** Programación
- **Herramientas:** Devin
- **Dificultad:** avanzada
- **Origen:** [lumos.com](https://www.lumos.com/blog/cognitions-devin-your-new-junior-engineer)
- **En el directorio desde:** 12 de octubre de 2026
- **URL:** https://conqueia.com/caso/pasar-componentes-react-de-mui-a-tailwind-con-devin

## 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

- [lumos.com](https://www.lumos.com/blog/cognitions-devin-your-new-junior-engineer)

---

Fuente: conqueia.com/caso/pasar-componentes-react-de-mui-a-tailwind-con-devin