Taxfyle
Design System · 2025
De Figma a código: rediseñando el proceso
Rediseñamos la web pública antes del tax season. Aproveché para cambiar también cómo la construíamos: diseñar una landing pasó a incluir su frontend.
Resultado
De Figma a frontend en 30–60 minutos por landing
taxfyle.com se rediseñó con este proceso
Rol
Design System, Diseño de páginas, Diseño del proceso de construcción
Reto
Rediseñar la web y acortar el ciclo diseño-deploy
Decisión clave
Conectar el design system al código para que el agente no improvise
Lo que genera el agente contra el diseño original: las diferencias son mínimas y de ajuste, no de estructura. Lo que sigue es cómo se consigue eso.
Contexto
La web pública arrastraba un estilo de cinco años atrás, ya abandonado en el resto de la marca, y las landings tenían que optimizarse para conversión antes del tax season. El camino previsto era el de siempre: Figma, handoff, y un desarrollador reconstruyendo desde cero cada pantalla ya diseñada.
La apuesta
Páginas estáticas, sin backend ni datos fiscales: el lugar seguro para experimentar. Y Figma MCP, Cursor y Claude Code ya estaban maduros.
Me propuse no solo crear el Figma, sino construir en código cada componente nuevo y conectar ambas versiones.
Decisiones
01
Basé el sistema en shadcn por su paridad diseño-código. Existía como librería en Figma y como componentes funcionales. No aceleraba el diseño ni el código por separado: aceleraba la correspondencia entre ambos.
02
Responsabilidad sobre el código, no solo sobre el pixel. Aprendí lo necesario para exigir nomenclatura correcta, buena separación y cero redundancias. Evité darle independencia absoluta a Cursor: siempre verificaba el output.
03
Code Connect + MCP. Cada componente de Figma quedó atado a su archivo real en el repositorio. El agente no interpreta un botón parecido: importa el del sistema. El design system pasó de documentación a contrato.
El proceso
Empieza por construir cada componente dos veces. Las variantes en Figma (default, secondary, destructive) son exactamente las del código. Sin esa correspondencia no hay nada que conectar.
Con ambas versiones conectadas por Code Connect, Dev Mode deja de entregar CSS suelto y entrega el import del componente real. El handoff pasa de "replica estos estilos" a "usa este componente".
Eso es lo que permite que el agente reutilice en lugar de reconstruir: en la página generada, el card no se arma desde cero, se importa el que ya existía.
Esa reutilización solo ocurre trabajando sobre el repositorio real. Frente a v0, Lovable o Figma Make, Cursor usa los componentes existentes en vez de reescribir estilos ya definidos en el sistema.
Falta que el resultado sea consistente y no afortunado. Fijé una estructura de prompt con fuente única de verdad, reglas de import, guardrails y una autoauditoría del agente antes de entregar.
Resultado
- Diseñaba la landing en Figma, pedía la reconstrucción vía MCP, y en 30 a 60 minutos tenía el frontend funcionando con sus interacciones.
- Un desarrollador experto validó el output: hubo ajustes, pero su trabajo de construcción se redujo al mínimo y se reubicó en performance, tagging e integraciones.
- KPI definido: horas de desarrollo ahorradas por landing, contra el promedio de una tarea de frontend equivalente. Salí de Taxfyle antes de tener el consolidado.
- Se adoptó como el proceso para rediseñar la web pública. Cada landing del proyecto se diseñó y se desplegó con él.
¿Buscas a alguien que entienda el negocio,
diseñe con evidencia y entregue funcionando?
Hablemos.
© 2026 Aldo Huapaya