Quién monta un botón más rápido y mejor en Figma: tú o una IA?
Te cuento…
En el vídeo de esta semana iteré el componente Button de mi design system de dos formas: a mano y con Claude Code.
Monté el estado focus, en las dos variantes y tres tamaños que ya tenía del vídeo anterior.
Y aquí no me salto el «ring», ese indicador que aparece cuando navegas con la tecla tab. Es accesibilidad, no decoración.
Lo resolví con un FocusIndicator: un frame con borde, flotando a 2 px del botón, con constraints para que se ajuste cuando el botón crece o se achica.
Ahí tomé una decisión que no delego.
El FocusIndicator necesitaba un border-radius de 10 px. Tenía un token con ese valor, pero su scope estaba pensado para otra cosa. Antes que ensuciar el sistema reutilizándolo mal, lo puse a mano.
Un valor a mano puntual es mejor que un token fuera de sitio.
Otra historia.
Le pasé a Claude Code un prompt con el link al componente y le pedí cinco variantes nuevas: outline, ghost, success, warning y error.
Las montó en minutos. A mano me hubieran llevado bastante más.
Después le pedí el estado loading. Y no me entendió a la primera: puso el spinner donde no tocaba, repitiéndolo en variantes que no debían llevarlo.
Le puse un segundo prompt y lo resolvió.
El error de esa vuelta de más fue mío, por no comprobar antes las propiedades de las instancias. Me lo apunto.
Los dos prompts que usé los dejo aquí, en mi GitHub, para que los uses en tu propio design system.
La IA no diseña. Ejecuta.
El radius a mano, el scope del token, dejar el spinner solo en loading. Esas decisiones son del diseñador. La máquina acelera cuando ya sabes lo que quieres.
Esta semana subo dos vídeos más.
Seguimos.
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.