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.
Todo lo que producen estas skills queda organizado en cuatro superficies que el equipo puede revisar en cualquier momento, sin tener que preguntarme a mí.
Everything these skills produce is organized into four surfaces the team can check anytime, without having to ask me directly.
Frames con las especificaciones de cada componente y el componente mismo.
Índice de los tokens que existen en el Design system, incluye la capa primitiva y semántica, además de algunas especificaciones de uso.
Cada componente tiene tres partes: qué hay medido (ejes de variante, tokens reales enlazados — leído en vivo desde Figma, no a ojo), problemas encontrados (evidencia, no opinión), y decisiones registradas. El detalle completo de cada auditoría vive en los research reports originales; esta página es la versión de consulta rápida para el equipo.
Registro de cada cambio —componente, token, decisión— con su link de referencia, y un checkbox para que desarrollo marque cuando ya quedó implementado.
Frames with each component's specs and the component itself.
Index of every token in the design system, covering both the primitive and semantic layers, plus some usage specs.
Each component has three parts: what was measured (variant axes, real linked tokens — read live from Figma, not eyeballed), issues found (evidence, not opinion), and decisions on record. The full detail of each audit lives in the original research reports; this page is the quick-reference version for the team.
Log of every change —component, token, decision— with its reference link, and a checkbox for development to mark once it's actually implemented.
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.