ContextoContext
Soy Product Designer y, como cualquiera en mi lugar, mi proceso de trabajo siempre fue el mismo: [más allá de las etapas de discovery con usuarios] abrir Figma, especificar cada pantalla y cada interacción, sesiones largas de handoff a desarrollo y por último QA para validar lo que desarrollo construyó.
I'm a Product Designer, and like anyone in my position, my workflow was always the same: [beyond the user discovery stages] open Figma, spec out every screen and every interaction, long handoff sessions with engineering, and finally QA to validate what engineering built.
Hace unos meses empecé a probar algo distinto: dejar de simular la interfaz y directamente construirla, con el design system real de la empresa, el mismo que se utiliza para todo, ayudado por herramientas de código asistido por IA.
A few months ago I started trying something different: instead of simulating the interface, building it directly, with the company's real design system — the same one used for everything — with the help of AI-assisted coding tools.
Aquí les cuento un poco más sobre cómo trabajaba antes, qué cambió, cómo trabajo ahora y qué habilita este nuevo proceso.
Here's more on how I used to work, what changed, how I work now, and what this new process makes possible.
This is what the full process used to look like, step by step.
Cómo trabajaba antesHow I used to work
Durante años mi día se organizaba igual. Abría Figma, armaba la pantalla, pensaba la interacción, la anotaba al margen porque Figma no la podía mostrar de verdad. Después la mandaba a desarrollo y esperaba. A veces el resultado se parecía a lo que había imaginado. A veces no, y ahí empezaba la ronda de ajustes: yo explicando de nuevo algo que ya había explicado, desarrollo interpretando algo que nunca terminó de estar del todo claro.
For years my day was organized the same way. I'd open Figma, build the screen, think through the interaction, and jot it down in the margin because Figma couldn't actually show it. Then I'd hand it off to engineering and wait. Sometimes the result matched what I'd imagined. Sometimes it didn't, and that's when the round of adjustments began: me explaining again something I'd already explained, engineering interpreting something that was never quite fully clear.
No era un mal proceso. Era el proceso normal. El que todos usan. Pero cada traspaso perdía algo en el camino.
It wasn't a bad process. It was the normal process — the one everyone uses. But something got lost with every handoff.
const handleOpen = () => {// TODO: What was the exact animation again?setIsOpen(true);};Qué cambióWhat changed
En algún momento empecé a mirar de reojo lo que estaba pasando con las herramientas de código asistido por IA. No como algo lejano, de programadores, sino como algo que de repente estaba a mi alcance. Nunca aprendí a programar en serio. Pero con estas herramientas, entender cómo se arma una interfaz por dentro dejó de ser un mundo aparte.
At some point I started paying closer attention to what was happening with AI-assisted coding tools. Not as something distant, for programmers, but as something that had suddenly become reachable for me. I never seriously learned to code. But with these tools, understanding how an interface is put together stopped being a world apart.
Le propuse a un compañero probarlo en serio, no como curiosidad de fin de semana sino como una forma real de trabajar. La pregunta era simple: ¿y si el prototipo dejaba de ser una simulación y pasaba a ser algo que de verdad funciona?
I asked a colleague to try it seriously with me — not as a weekend curiosity, but as an actual way of working. The question was simple: what if the prototype stopped being a simulation and became something that actually works?
Cómo trabajo ahoraHow I work now
Hoy cuando diseño una funcionalidad nueva, la escribo. Uso el design system real de Mango, no una versión simplificada armada para ir rápido. Y contra lo que podría pensarse, no es más lento: es más rápido y más realista, porque no hay nada que simular. Lo que el usuario ve cuando testea es exactamente lo que existe en el sistema de la empresa. No una promesa de cómo se va a ver. Cómo se ve.
Today, when I design a new feature, I write it. I use Mango's real design system, not a simplified version put together to move fast. And against what you might expect, it's not slower — it's faster and more realistic, because there's nothing to simulate. What the user sees when they test it is exactly what exists in the company's system. Not a promise of how it'll look. How it looks.
Para esto trabajo sobre un repo paralelo al del producto real, donde tengo libertad para probar y romper cosas sin ningún riesgo para lo que está en producción. Está desplegado en un proyecto de Vercel corporativo, con las mismas normas de seguridad que cualquier otro proyecto de la empresa. Y aunque tengo libertad para experimentar, no programo libremente: uso el design system real y sigo parámetros de código ya establecidos, para no salirme de la norma y que lo que construyo sea reutilizable.
To do this I work on a repo that runs parallel to the real product, where I have the freedom to try things and break them with zero risk to what's in production. It's deployed on a corporate Vercel project, with the same security standards as any other project at the company. And while I have room to experiment, I don't code freely: I use the real design system and follow established code conventions, so I don't stray from the standard and what I build stays reusable.
Los usuarios entran desde su propio ordenador con una URL, nada más, y la experiencia que tienen al testear es fantástica: todo tiene interacción real y datos reales, nada es cartón piedra. Antes, sentar a alguien frente a un prototipo de Figma siempre tenía esa fricción inicial, esa sensación de estar viendo una maqueta. Ahora entran a algo que funciona de verdad, y eso cambia la conversación. Las pantallas ya nacen responsive, sin ese trabajo extra de simular cómo se comportarían. Y lo que se testea es, pixel a pixel, exactamente lo que se va a construir.
Users get in from their own computer with just a URL, and the experience they have testing it is fantastic: everything has real interaction and real data, nothing is a cardboard cutout. Before, sitting someone in front of a Figma prototype always had that initial friction, that feeling of looking at a mockup. Now they walk into something that actually works, and that changes the conversation. Screens are responsive from day one, without the extra work of simulating how they'd behave. And what gets tested is, pixel for pixel, exactly what's going to be built.
No lo pienso como un experimento que estoy probando por curiosidad. Es cómo trabajo ahora. Documento en código, testeo con usuarios reales, ajusto lo que no funciona, y lo que le entrego a desarrollo ya viene validado.
I don't think of this as an experiment I'm running out of curiosity. It's how I work now. I document in code, test with real users, fix what doesn't work, and what I hand off to engineering already comes validated.
// Direct access via a real URL
const session = await createTestUserSession({
prototypeUrl: "https://mango-internal-proto.app/flow/journey",
device: "User Laptop"
});No installs required.
The user opens a URL in their own browser and they're in.
We remove the initial friction of Figma presentations. Testing happens in the user's natural environment, with no mockup plugins or extra walkthroughs needed.
Qué habilitaWhat it enables
Cuando el prototipo ya funciona de verdad, dejo de tener que explicar cómo se comporta algo. Se comporta así porque está corriendo. Eso saca ambigüedad del medio, y ya veo señales de que también acorta lo que después le toma a desarrollo construirlo — aunque todavía es pronto para tener ese número cerrado.
When the prototype actually works, I no longer have to explain how something behaves. It behaves that way because it's running. That removes ambiguity from the equation, and I'm already seeing signs that it also shortens what it later takes engineering to build it — though it's still early to have that number nailed down.
Pero lo que más me importa de esto no es la velocidad. Es que entrego algo distinto. Ya no una idea para que otro la resuelva, sino algo que ya resolví. Es la misma dirección en la que quiero seguir moviéndome: hacia un lugar con más decisión real sobre el producto, no solo sobre su forma.
But what matters most to me here isn't speed. It's that I deliver something different. No longer an idea for someone else to solve, but something I've already solved. It's the same direction I want to keep moving in: toward having more real decision-making power over the product, not just its shape.
One unified Product flow
UX, interaction and flow decisions, made with real users.
Built directly using the company's real components.
ConclusiónConclusion
No cambié de oficio. Sigo pensando en usuarios, en flujos, en fricción. Lo que cambió es la herramienta con la que pruebo si esas decisiones están bien. Diseñar en código no reemplaza el pensamiento de producto. Lo hace más difícil de esconder cuando algo no funciona.
I didn't change professions. I still think about users, flows, friction. What changed is the tool I use to test whether those decisions are right. Designing in code doesn't replace product thinking. It just makes it harder to hide when something doesn't work.