Construyendo a Cami

Cómo pasé de una necesidad de negocio a un agente de IA que genera pantallas pixel-perfect en Figma, en dos sesiones de trabajo.

¡Hola! soy Cami 😀

Tabla de contenido

Parte I: El problema que quería resolver

Mientras desarrollábamos las primeras versiones de Investo, gran parte de mi trabajo era conceptualizar nuevos flujos junto a Cami, una de nuestras diseñadoras UX/UI y la inspiración para el nombre de mi agente.

Para esto, manteníamos varias reuniones de brainstorming y alineación, pero nunca llegaron a ser suficientes. Siempre quedaron áreas grises porque no lograba explicarme con claridad. El hablar, simplemente se quedaba corto.

Opté por usar Claude para crear artefactos funcionales con las ideas que tenía para estos flujos. Esto sí tuvo impacto y movió la aguja, haciendo que nuestra comunicación mejore notablemente.

El problema es que aún cuando Claude me entregaba diseños que respetaban Material Design, no tenían ninguna relación a Investo, su manejo de marca y look & feel. Además, cada flujo quedaba desconectado de todo el contexto anterior, de todo lo que habíamos hecho ya en Figma.

Soy product manager en Fideval. Lidero Investo, una app móvil de fondos de inversión con miles de usuarios. El equipo de producto es pequeño y el roadmap es enorme. Cada día que paso haciendo trabajo mecánico es un día que no pienso en estrategia, no creo más pitches, o no converso con usuarios.

El diseño es especialmente costoso. Investo tiene un design system vivo: Componentes con variantes, variables de color ligadas a tokens, una guía de copies estricta (no decimos "tasas", decimos "rendimiento"; no decimos "rescate", decimos "retiro"), tipografía outfit en cinco pesos distintos, y reglas de auto-layout que respetan Material Design 3. Cada pantalla nueva tiene que respetar todo eso, y cuando quiero iterar sobre una pantalla existente para probar algo, dependo enteramente de un diseñador.

Necesitaba algo que entendiera Investo tan bien como yo, que hablara español, y que ejecutara en Figma sin la ayuda de un profesional.

Por qué las herramientas existentes no servían

Exploré las opciones disponibles antes de construir algo propio. Figma Make, el producto de IA oficial de Figma, es prometedor pero genérico. Además, no entiende mi design system, no respeta mi guía de copies, y no sabe nada de Investo. Los plugins de terceros que prometen generar diseños con IA producen resultados que parecen wireframes de hace 10 años. Las herramientas como v0 de Vercel están pensadas para código, no para Figma.

Lo que yo necesitaba era una pieza muy específica: Un agente que tomara una pantalla existente de mi archivo de Figma y la modificara según instrucciones en español, respetando cada regla del design system. O que pueda generar una pantalla desde cero, pero respetando todo el contexto de Investo.

Nadie lo había construido porque ese agente, por definición, solo sirve para una empresa. Me di cuenta de que esa era la oportunidad. Si lo construía yo, sería exactamente lo que Fideval necesita.

Parte II: La arquitectura, en detalle

<aside> <img src="/icons/error_brown.svg" alt="/icons/error_brown.svg" width="40px" />

Es importante entender mis habilidades para contextualizar la información: Yo no soy un desarrollador ni tengo experiencia con código. No sé programar. Todo esto lo vibecodee con el chat de Claude. No usé Claude Code porque quería aprender en el proceso. Quería recibir explicaciones y no depender de las automatizaciones que, por definición, tiene este producto. La parte técnica de este artículo la redacté con la ayuda de Claude, ****y hay muchas partes que posiblemente no sepa argumentarlas. Decidí agregarlas para darle información completa a una persona técnica, a la vez que me ayuda en mi proceso de aprendizaje.

</aside>