Flash DSM - El genoma de diseño con el que construyen tus agentes.
Define tus fundamentos. Cada componente y módulo los sigue. El genoma de diseño sabe dónde vive cada uno y qué se mueve cuando algo cambia.
Sáltate Figma. Empieza por el sistema de diseño.
Figma, como toda herramienta que parte del lienzo, se creó para dibujar imágenes de un sistema de diseño, no para construir uno. Primero pintas, luego deduces un sistema por debajo y acabas publicando código que nunca coincide del todo. Flash le da la vuelta: construye primero el sistema y pasa directamente a código que sí es fiel. Y como el sistema es legible por máquinas, también sirve de barrera de seguridad para todo lo que generen tus herramientas de IA.
Color, tipografía, espaciado, componentes: enlazados.
Dale a Flash un brief, una URL o un archivo de Figma y te corta el patrón: escalas de color completas en los dos temas, un par tipográfico, espaciado, radios, movimiento y componentes que los referencian. Ese es el punto de partida, no el producto. El producto es lo que hagas con él en el editor.
Descríbelo
Escribe un prompt, pega la URL de un sitio publicado o conecta un archivo de Figma. En cualquiera de los casos, Flash extrae el ADN de diseño.
Hazlo tuyo
Flash arranca con escalas completas de tokens (colores en claro y oscuro, un par tipográfico, espaciado, radios, sombras, movimiento) y tú las editas ahí mismo. Cambia la fuente, reajusta una escala, elimina las decisiones con las que no estés de acuerdo.
Publícalo
Exporta variables CSS, una config de Tailwind o JSON de Tokens Studio. O envíalo directamente a GitHub.
- Extrayendo el ADN de la marca
- Construyendo escalas de color
- Combinando tipografías
- Definiendo espaciado y radios
- Ajustando movimiento y efectos
- Enlazando componentes
+ 8–14 componentes propios del sector, enlazados a tokens
Un patrón. La tela que quieras.
El patrón de un sastre fija el corte y las costuras. Nunca fija el color de la tela. Esa separación es lo que permite que un solo sistema vista a toda una empresa.
El patrón que todos comparten
La estructura es la parte que no debería variar: de qué se compone una tarjeta, cómo separa un botón su etiqueta, qué estados existen. Flash la guarda en un solo sitio, así que cada producto se corta con la misma forma.
La tela que elige cada producto
Color, tipografía, radios, movimiento. El tema se apoya sobre la estructura y se cambia sin tocarla, de modo que un equipo puede no parecerse en nada al siguiente y aun así compartir todos los componentes.
Por qué se estancan los sistemas
Publica un componente que además es un azul concreto y el siguiente equipo dirá «ese no es nuestro azul» y escribirá el suyo. Dos meses después mantienes dos sistemas. Tener la tela aparte es lo que lo evita.
¿Un sistema de diseño aplana el trabajo?
Zanja lo que nadie debería volver a decidir cada vez, y eso es justo lo que deja sitio para lo que solo tú habrías hecho.
Cada sistema de diseño es único
Flash no te entrega una plantilla. Fundamentos, componentes y módulos, todo hecho a la medida de tu marca, no al revés.
Tu propio estilo
Los colores, la tipografía y el espaciado los defines tú. Nunca salen de una paleta predefinida.
Arte, efectos y movimiento
Ilustraciones, efectos, animaciones y transiciones forman parte del sistema, no son añadidos sueltos pegados a una sola pantalla.
Componentes y módulos, a tu manera
Crea nuevos componentes y módulos que encajen con la visión de tu producto. Flash no te limita a una biblioteca fija.
Todavía no hay logos de clientes.
Flash es nuevo, y los testimonios son fáciles de conseguir. Aquí tienes tres cosas que puedes comprobar por tu cuenta antes de pagar nada.
Abre los ejemplos
Todos los sistemas de esta página son públicos. Abre uno, lee los tokens que produjo, haz un fork en tu cuenta y desmóntalo. Nada de esto es una captura de pantalla.
Llévate los archivos y vete
Las exportaciones son tokens.css, una config de Tailwind y JSON de Tokens Studio: archivos planos que podrías haber escrito a mano. Siguen funcionando estemos nosotros o no.
Lee las fechas
Cada arreglo y cada función quedan registrados con el día en que salieron. Si el ritmo baja, lo verás aquí antes de que nadie te lo cuente.
¿Dudas?
¿Qué es Flash?
Flash es un constructor de sistemas de diseño. A partir de un prompt, la URL de un sitio publicado o un archivo de Figma, arranca una arquitectura de tokens completa (escalas de color en claro y oscuro, pares tipográficos, espaciado, radios, sombras, movimiento) más componentes propios del sector enlazados a esos tokens. Tú editas y luego exportas CSS, Tailwind o JSON de Tokens Studio, o lo envías a GitHub.
¿Por qué los builders de IA necesitan un sistema de diseño?
Herramientas como Lovable, v0 y Bolt generan pantallas rápido, pero cada prompt nuevo inventa sus propios colores y espaciados si nada los fija. Un sistema de diseño es esa capa de reglas: dales tokens legibles por máquinas y el resultado se mantiene fiel a la marca, conserva un contraste accesible y coincide con el código que ya publicaste. Flash construye esa capa y la sirve en los formatos que estas herramientas leen de verdad: kit.md, archivos de tokens y MCP.
¿Para quién es Flash?
Design engineers, en solitario o en equipo, que responden por la calidad de la UI pero no tienen tiempo de vigilar un sistema de diseño. También para equipos de desarrollo que van rápido y necesitan un sistema que siga su ritmo.
¿Flash es gratis?
Sí, para empezar. Cada cuenta construye un Genome, es decir, un sistema de diseño y todo lo que lee de él, gratis y sin tarjeta. Pro, Team y Studio suman la opción de traer módulos, la sincronización de actualizaciones, un Genome compartido y la entrega a clientes. En la página de precios verás qué incluye cada uno.
¿Puedo importar mis diseños existentes?
Conecta un archivo de Figma, pega la URL de cualquier sitio publicado o trae tu código desde GitHub y Storybook. Flash extrae el ADN de diseño que ya existe y lo convierte en tokens estructurados y editables.
¿Flash se mantiene sincronizado con Figma y mi código?
Esto es lo que funciona hoy: importar desde Figma, una URL o una base de código; exportar CSS, Tailwind y JSON de Tokens Studio; enviar a GitHub; mandar variables a Figma a través del plugin de Flash. La sincronización bidireccional completa, con los cambios volviendo solos desde el código y desde Figma, está en camino, y preferimos prometer de menos antes que fingir que ya está.
¿Qué puedo exportar?
Formatos listos para producción: tokens.css con propiedades CSS personalizadas, una extensión de tailwind.config.js, JSON de Tokens Studio que va y vuelve con Figma, y especificaciones de componentes. También puedes enviarlo directamente a GitHub.
¿Genera código real y usable?
Las exportaciones son las mismas variables CSS y los mismos tokens de Tailwind que escribirías a mano, listos para tu base de código. Sin runtime propietario, sin ataduras.
¿En qué se diferencia Flash de los generadores de UI con IA?
Los generadores de pantallas te dan maquetas. Flash te da el sistema que hay debajo: escalas consistentes, tokens semánticos, los dos modos de color y componentes que referencian tokens en lugar de valores fijos, para que todo lo que construyas después siga siendo consistente.
¿Soy dueño de lo que Flash genera?
Por completo. Cada token, especificación de componente y exportación es tuya: úsala en trabajos para clientes, productos comerciales o tus propias herramientas de diseño.