Un equipo que trabaja en más de un framework termina manteniendo el mismo botón varias veces. No es que se copie mal. Es que cada copia envejece a su ritmo: alguien arregla el foco en React y esa corrección no llega a Angular, alguien ajusta el alto en Vue y el de Angular se queda como estaba. A los seis meses son tres botones parecidos, no el mismo.
El componente no es código
Lo primero que cambia es dónde vive la definición. Un componente en Snapflow no se define escribiendo su implementación, sino su contrato: qué variantes tiene, qué estados, qué tokens consume y qué garantiza en accesibilidad. Ese contrato es lo único que se edita.
De ahí salen las tres implementaciones. La API pública es la misma en todas: si en React es variant y size, en Vue son las mismas props y en Angular las mismas entradas.
// Button.tsx · generado por Snapflow · solo tokens
export function Button({variant = 'primary', size = 'md', ...props}) {
return <button className={cx(btn[variant], btn[size])} {...props} />
}
// color/brand/600 · radius/md · space/3Solo tokens y eso se verifica
La regla que hace posible todo lo demás es que ninguna implementación puede contener un valor suelto. Ni un hex, ni un px, ni una fuente arbitraria. Todo sale de los tokens y por eso cambiar el color de acción principal se propaga a los tres exports sin tocar código.
No es una convención que se pide por favor en una revisión. Es determinístico y corre en tu CI, sin API key y sin modelo de por medio:
$ snapflow check --ci
✓ 38 componentes adheridos
✗ Login.tsx:42 color #2E6BE6 no está en tus tokens
✓ contraste AA en 40/40 estados
1 hallazgo · salida JSON · exit 1Un botón no dice azul. Dice color de acción principal.
El contrato de accesibilidad viaja con el export
Los estados de foco, los roles y las relaciones de contraste no se reimplementan en cada framework: forman parte del contrato, así que llegan iguales a los tres. Cuando una combinación de marca no pasa contraste, el sistema la rechaza en la personalización, no en producción.
Qué significa esto el día a día
Que un ajuste se hace una vez. Se corrige el contrato, se vuelven a obtener los exports y los tres repos reciben lo mismo. La diferencia no está en escribir menos código, sino en que deja de haber tres verdades que se van separando.
Preguntas frecuentes
¿Hay que mantener tres librerías de componentes?
No. Se mantiene una sola definición, el contrato de cada componente, y de ahí salen las tres implementaciones. Un ajuste se hace una vez y llega igual a React, Vue 3 y Angular.
¿La API es la misma en los tres frameworks?
Sí. Las mismas variantes, los mismos estados y los mismos tokens: lo que en React son props, en Vue son props y en Angular son entradas, con los mismos nombres.
¿Qué pasa si alguien escribe un color o un tamaño suelto?
La verificación lo detecta antes de que entre: cualquier valor que no venga de los tokens es un hallazgo y el pull request no pasa. Es determinista, corre en tu CI y no necesita un modelo de por medio.
¿Puedo usar solo uno de los tres frameworks?
Sí. Cada design system trae un framework a elegir, y los demás se agregan como complemento cuando los necesites. La definición es la misma; cambian las salidas que pides.
Pruébalo con tu marca
La forma más corta de ver una definición y tres salidas es con tus propios componentes. Snapflow está en acceso por lista de espera y liberamos cupos por tandas, en orden de llegada. Súmate a la lista de espera o mira el precio.
