- Claude Code se está usando para crear código funcional directamente, sin maquetas intermedias, aumentando la eficiencia del diseño
- El uso de Figma se ha reducido mucho, y al editar funciones sobre código funcional con datos reales, las mejoras de UX se vuelven mucho más evidentes y rápidas que en maquetas estáticas
- Las funciones pequeñas se implementan directamente con Claude Code sin pasar por Figma, y en las funciones grandes se realiza trabajo de descubrimiento antes de crear artefactos interactivos para compartir con el equipo
- El proceso ha cambiado hacia uno en el que se completa directamente hasta el envío del PR sin handoff ni entregables desperdiciados
- Se mantiene el pensamiento centrado en el usuario, la exploración del problema y la mejora iterativa, conservando los principios clave del diseño mientras evoluciona hacia un nuevo flujo de trabajo que reduce la frontera entre diseño y desarrollo
Cambio clave: trabajo de diseño con Claude Code
- Usa Claude Code todos los días, y el aumento en la cantidad de commits en su gráfico de Git muestra la integración entre diseño y desarrollo
- El uso de Figma ha bajado notablemente, cambiando hacia un diseño basado en código
- Si describe en lenguaje natural la experiencia de usuario deseada (casos de uso, comportamiento esperado, dirección de evolución de la funcionalidad), Claude Code entiende cómo implementarla
- Es igual que la forma en que antes colaboraba con ingeniería, pero ahora el diseñador tiene el control directo
- Se salta por completo las maquetas de fidelidad media (mid-fi) y puede implementar en minutos una versión funcional mediante prompting directamente en Claude Code
- Al editar una versión funcional con datos reales incluidos, los mejoras de UX se hacen visibles de inmediato, como problemas de alineación, filtrado o longitud de datos
Nuevo proceso de diseño
- En los últimos meses, el proceso ha cambiado mucho
-
Las funciones pequeñas se implementan directamente con Claude Code sin Figma
- Mejoras de QoL, agregar un campo de búsqueda a una lista y otras funciones que aprovechan patrones y componentes existentes se hacen directamente en Claude Code, saltándose por completo Figma
- No hay wireframes ni handoff
- Claude Code usa bien los componentes y patrones adecuados; en especial, Opus 4.6 entiende la base de código y realiza el trabajo correcto incluso sin instrucciones explícitas
-
En las funciones grandes todavía se hace exploración previa y definición del problema
- Se redactan por escrito el problema, los casos de uso, la “forma” de una buena solución (por ejemplo, “rápida y sin fricción”, “sin hacer que el usuario tenga trabajo extra”) y enfoques potenciales
- Luego eso se lleva al chat general de Claude para pedir más ideas, y aparecen algunas ideas interesantes que no se habían considerado, junto con otras que no encajan con el contexto
- Para la dirección preferida, se crean con Claude artefactos interactivos, se prueba directamente la sensación y se comparten con el equipo para recopilar feedback
- Cuando es más rápido que escribir prompts, a veces también se dibujan en Figma wireframes lo-fi simples
- Después de iterar, discutir con el equipo y recoger feedback de usuarios para definir el enfoque, se construye y pule directamente en el código con Claude Code
Áreas donde Figma sigue teniendo ventaja
- En la exploración visual (combinaciones de colores, opciones tipográficas, componentes nuevos), Figma sigue estando por delante
- Comparar lado a lado, hacer zoom y mover elementos son tareas difíciles de hacer en código
- Aun así, como la mayor parte del trabajo ocurre dentro del producto existente y del sistema de diseño actual, el peso de esta área ha disminuido
Lo que no ha cambiado
- El pensamiento centrado en el usuario, la identificación de necesidades, la comprensión del problema, la exploración de distintas opciones, la iteración y las pruebas, y el pulido para mejorar la calidad final se mantienen igual
- Solo que la etapa intermedia del proceso se ha movido principalmente a Claude Code, y ahora también es posible llevar directamente el código hasta las manos del usuario
- Como resultado, la frontera entre diseño y desarrollo se reduce y se acelera la entrega a usuarios reales
- El flujo consiste en trabajar directamente en el medio final y enviar el PR, sin handoff ni entregables desperdiciados
- No se puede predecir cómo cambiará en el futuro, pero es un momento de mucha experimentación con nuevas herramientas y formas de trabajo
2 comentarios
He oído que ahora hasta dicen que los desarrolladores también tienen que encargarse del diseño usando Claude Code, pero ¿el diseño no necesita revisión/validación?
En comparación con el desarrollo, se necesita un ciclo de retroalimentación muchísimo más rápido y frecuente.
Como el desarrollador está al final del ciclo de trabajo, creo que también hay un aspecto en el que su rol dentro del equipo tiende a sobredimensionarse.