Cuando llegué, el design system era casi un esqueleto: pocos componentes y ninguna estructura real. Soy la única diseñadora del producto, así que ese esqueleto creció al ritmo que yo podía sostenerlo — hasta que empezó a crecer más rápido de lo que yo podía compatibilizar con mis otras tareas. Ahí aparecieron las urgencias reales: documentar en serio, estandarizar, y meter por fin una capa de tokens semánticos para color.
When I joined, the design system was barely a skeleton: a handful of components and no real structure. I'm the product's only designer, so that skeleton grew at whatever pace I could sustain — until it started growing faster than I could balance alongside my other tasks. That's when the real urgencies showed up: documenting properly, standardizing, and finally introducing a layer of semantic color tokens.
El problema no era de criterio, era de horas. Documentar a mano se volvía cada vez más lento, y estandarizar se hacía más difícil con cada componente nuevo — y no podía clonarme. Por eso diseñé un flujo en Claude con distintas skills para cada etapa de crear un componente: para ganar tiempo, construir con más precisión, sostener la estandarización y, sobre todo, cerrar la brecha entre lo diseñado y lo construido para que el handoff con desarrollo fuera más fluido.
The problem wasn't judgment, it was hours. Documenting by hand kept getting slower, and standardizing got harder with every new component — and I couldn't clone myself. So I designed a Claude workflow with different skills for each stage of building a component: to save time, build with more precision, sustain standardization and, above all, close the gap between what's designed and what's built so handoff with development would be smoother.
Estas son las skills que diseñé para cubrir cada etapa del proceso, desde que un componente se construye hasta que queda documentado y registrado en el design system.
These are the skills I designed to cover each stage of the process, from when a component is built to when it ends up documented and logged in the design system.
Antes de documentar, audita cómo está armado el componente por dentro (variantes, naming interno, tokens, auto-layout).
Revisa naming público, página de destino y accesibilidad recién cuando el componente pasó el chequeo anterior.
Arma el frame de documentación una vez confirmados nombre y ubicación. Esta misma skill también mantiene un Notion con el índice de tokens, un Change Log donde desarrollo va marcando qué está implementado, y una página de componentes con la descripción de cada uno, correcciones, deuda pendiente y convenciones a tener en cuenta.
Sigue un flujo propuesta → revisión → construcción para tokens semánticos nuevos.
Dejan trazabilidad de por qué se decidió algo, separado de la documentación de uso.
Before documenting, audits how the component is built internally (variants, internal naming, tokens, auto-layout).
Reviews public naming, destination page and accessibility only once the component has passed the previous check.
Assembles the documentation frame once the name and location are confirmed. This same skill also maintains a Notion with the token index, a Change Log where development marks off what's already implemented, and a components page describing each one, along with corrections, outstanding debt and conventions to keep in mind.
Follows a proposal → review → build flow for new semantic tokens.
Keep a trail of why something was decided, separate from usage documentation.
Antes de las skills, en un día normal alcanzaba a documentar hasta aprox. 3 componentes, y sin mirarlos con demasiada profundidad — no daba el tiempo. Con el flujo en Claude, ese número subió a aprox. 8 componentes por día, y ahora sí se revisan con mayor profundidad: estructura, tokens, accesibilidad, naming. No es solo más rápido — es más rápido y más riguroso.
Before the skills, on a normal day I could document up to approx. 3 components, without looking at them too closely — there wasn't time. With the Claude workflow, that number rose to approx. 8 components a day, and now they do get reviewed in more depth: structure, tokens, accessibility, naming. It's not just faster — it's faster and more rigorous.
Mejorar el handoff con desarrollo trajo algo más allá de la velocidad: mayor cercanía y visibilidad del trabajo de diseño. Con el tiempo, desarrollo pasó de simplemente recibir el handoff a volverse promotor activo de las iniciativas de diseño.
Improving the handoff with development brought something beyond speed: more closeness and visibility for design's work. Over time, development went from simply receiving the handoff to becoming an active promoter of design initiatives.
Para que esto no se degrade con el tiempo, dejé programada una auditoría mensual a las 5 skills: reviso que sigan funcionando correctamente y voy corrigiendo lo que deja de funcionar.
To keep this from degrading over time, I scheduled a monthly audit of the 5 skills: I check that they're still working correctly and progressively fix whatever stops working.
Aprendizaje: la métrica que importaba no era cuántas skills construí, sino cuánto más rápido y con más profundidad se documenta ahora. Queda pendiente implementar una forma de medir el design system en sí.
Takeaway: the metric that mattered wasn't how many skills I built, but how much faster and more thoroughly things get documented now. What's still pending is implementing a way to actually measure the design system itself.