Implementar un sistema de ratings en el frontend con Claude Code te permite acelerar el desarrollo de componentes UI sin perder control sobre el alcance. Aquí verás cómo levantar el servidor, exportar conversaciones entre sesiones, invocar subagentes especializados y usar capturas de pantalla como contexto visual para iterar sobre el diseño.

Cómo levantar el servidor de frontend con Claude Code

Antes de tocar una sola línea de código, necesitas el entorno corriendo. El archivo README.markdown dentro de la carpeta de frontend suele tener las instrucciones, pero cuando no las encuentras, Claude Code puede leer la base de código y proponer cómo ejecutarla.

El flujo estándar es sencillo: instalar dependencias y luego arrancar el servicio.

• Ejecuta yarn install para instalar dependencias.
• Corre yarn dev desde la terminal de Claude Code para que tome la salida como contexto.
• Presiona Control+B para mandar el proceso a background y liberar la conversación.
• Usa el comando bashes para ver las tareas activas y su salida.

En el ejemplo de la clase, el servicio quedó listo en 639 milisegundos en localhost:3000 [02:30]. Si abres el navegador y ves un error porque no encuentra la lista de cursos, significa que el backend no está prendido. Entra a la carpeta backend y ejecuta make start para levantar la base de datos y el API juntos.

¿Qué hace Control+B en Claude Code? Envía un proceso largo, como un servidor de desarrollo, al background para seguir conversando con el agente sin bloquear la sesión.

Cómo exportar una conversación de Claude Code a otra sesión

Cuando abres Claude Code dentro de la carpeta de frontend, los subagentes definidos en la raíz del proyecto no están disponibles. Para no perder el contexto que ya construiste, usa el comando export [06:45].

Este comando te ofrece dos caminos: copiar la conversación al portapapeles o guardarla en un archivo. Al elegir la opción uno, puedes pegar todo el historial en una nueva sesión abierta desde la carpeta padre.

Cuando pegas un texto extenso, Claude Code lo comprime visualmente y muestra un mensaje indicando que se pegó un bloque de más de cien líneas. Internamente sí recibe el contenido completo, pero la interfaz se mantiene ordenada.

La instrucción que acompaña al pegado es clave: pídele que entienda el contexto de la conversación previa antes de continuar. Así puedes invocar al subagente especialista en frontend sin reconstruir todo el plan desde cero.

Cómo invocar el subagente de frontend para crear el componente de rating

Con el contexto cargado, el siguiente paso es ejecutar la fase uno del plan: tipos e interfaces de ratings. La instrucción debe ser específica para evitar que el agente se desvíe.

Un problema frecuente con agentes de codificación es que se van más allá del alcance solicitado. En la clase, Claude empezó a revisar archivos del backend cuando solo se le pidió la UI de la lista de cursos. La solución fue detener la ejecución y enviar un prompt correctivo.

¿Cómo evito que Claude Code haga más de lo pedido? Sé explícito en el alcance, indica qué archivos puede tocar y aclara cuándo usar datos mock en lugar de integrarse con APIs reales.

La instrucción correcta fue: crear el componente de ratings con valores mock para ciertos cursos, sin tocar la integración con el API. Tras el ajuste, el agente generó la lista de tareas pendientes nuevamente y procedió con la implementación de los componentes UI.

Para aprobar ediciones más rápido durante una sesión activa, presiona la opción dos cuando aparezca el diálogo de permisos. Esto permite cualquier modificación sin confirmar archivo por archivo.

Qué pasa cuando el puerto 3000 ya está en uso

Si tienes un yarn dev corriendo por fuera de Claude Code y el agente intenta levantarlo de nuevo, verás un error de puerto ocupado. Detén el proceso anterior y deja que Claude reinicie el servicio dentro de su propia sesión, así mantiene el contexto de la salida del servidor.

Al ejecutar bashes después de esto, verás dos instancias: una detenida y otra activa con el yarn dev actual.

Cómo usar capturas de pantalla como contexto visual en Claude Code

Una vez que el componente está renderizado, abrir el navegador en localhost:3000 muestra las estrellas, el contador y un efecto CSS sobre el promedio de cada curso. Pero el diseño rara vez queda perfecto en el primer intento.

Aquí entra una de las funciones más útiles: pegar imágenes directamente en la conversación.

• Captura pantalla con la herramienta de tu sistema operativo, en macOS queda en el portapapeles.
• Pega la imagen en Claude Code con Control+V, no con Command+V.
• Pide un análisis detallado activando el modo de pensamiento extendido o usando ultra think.

El agente describe lo que ve: el card del curso de React con 3.5 estrellas, los estilos aplicados, el modo read-only del componente y los datos mockeados [16:20]. A partir de ese análisis puedes pedirle ajustes de CSS, comparar contra una imagen de referencia o validar que el render coincida con un diseño esperado.

¿Para qué sirve pegar imágenes en Claude Code? Para darle contexto visual del estado actual de la UI o de un diseño de referencia, así sus iteraciones de CSS y layout se basan en lo que realmente ves en pantalla.

Esta capacidad multiplica las formas de pasar contexto. No estás limitado al código: capturas de pantalla, mockups, referencias de Figma o screenshots de bugs funcionan igual.

Qué falta para completar el feature de ratings

La lista de cursos ya muestra el componente con datos mock. Quedan pendientes la vista de detalle del curso y la vista de clases, además de reemplazar los valores simulados por la conexión real al API construido en las clases de backend.

Cuéntame en los comentarios qué retos enfrentaste al implementar el componente para el detalle del curso y cómo los resolviste con Claude Code.