La base que todo

proyecto necesita

La base de todo proyecto, documentada para personas y para Claude, para que el equipo diseñe desde reglas y no desde cero.

TipoBase de productoRolDiseño UX y documentaciónHerramientasFigma · código · ClaudeAplica enTodos los proyectos
Sistema de diseño / Demo

Cada pantalla empezaba de cero.

Sin una base común, cada pantalla nueva se diseña desde cero.

Otro botón parecido al anterior, otro espaciado, otra forma de mostrar un error. Nadie lo decide así; simplemente no hay dónde consultar cómo se hace. El producto se vuelve inconsistente, el equipo pierde tiempo rehaciendo lo que ya existía y el usuario tiene que aprender cada pantalla como si fuera nueva.

Una base que también lee Claude.

Las pantallas nuevas ya nacen dentro del sistema.

Primero definimos las piezas mínimas: color, tipografía, espaciado y estados. Sobre ellas armamos los componentes y escribimos para cada uno cuándo se usa, cuándo no y por qué. Esa documentación la conectamos con Claude, y el diseño se enfoca en decidir, no en volver a dibujar.

01Primero las reglas, luego las piezasColor, tipografía y espaciado se definen como tokens. Los componentes se construyen encima, así un cambio en la base llega a todo el producto.
02Documentado para personas y para ClaudeCada componente dice cuándo se usa, cuándo no y por qué. Escrito así, lo entiende alguien nuevo en el equipo y lo puede seguir Claude.
03Diseñar es decidirCon Claude armando pantallas desde el sistema, el tiempo de diseño se va a lo que importa: el flujo, el contenido y los casos difíciles.
Flujo completo
Pantallas
01 · La portadaLa portada
02 · Cambias un alias y todo se actualizaCambias un alias y todo se actualiza
03 · La escala tipográficaLa escala tipográfica
04 · El radio manda el espaciadoEl radio manda el espaciado
05 · Iconos con color por tokenIconos con color por token
06 · Cada estado con su colorCada estado con su color
07 · Un botón que carga y confirmaUn botón que carga y confirma
08 · Validación en vivoValidación en vivo
09 · El sistema en el productoEl sistema en el producto
10 · Vista generalVista general
El resultadoLas pantallas nuevas ya nacen dentro del sistema. El diseño deja de empezar de cero en cada proyecto.

La base que todo

proyecto necesita

La base de todo proyecto, documentada para personas y para Claude, para que el equipo diseñe desde reglas y no desde cero.

TipoBase de productoRolDiseño UX y documentaciónHerramientasFigma · código · ClaudeAplica enTodos los proyectos
Sistema de diseño / Demo

Cada pantalla empezaba de cero.

Sin una base común, cada pantalla nueva se diseña desde cero.

Otro botón parecido al anterior, otro espaciado, otra forma de mostrar un error. Nadie lo decide así; simplemente no hay dónde consultar cómo se hace. El producto se vuelve inconsistente, el equipo pierde tiempo rehaciendo lo que ya existía y el usuario tiene que aprender cada pantalla como si fuera nueva.

Una base que también lee Claude.

Las pantallas nuevas ya nacen dentro del sistema.

Primero definimos las piezas mínimas: color, tipografía, espaciado y estados. Sobre ellas armamos los componentes y escribimos para cada uno cuándo se usa, cuándo no y por qué. Esa documentación la conectamos con Claude, y el diseño se enfoca en decidir, no en volver a dibujar.

Flujo completo
01Primero las reglas, luego las piezasColor, tipografía y espaciado se definen como tokens. Los componentes se construyen encima, así un cambio en la base llega a todo el producto.
02Documentado para personas y para ClaudeCada componente dice cuándo se usa, cuándo no y por qué. Escrito así, lo entiende alguien nuevo en el equipo y lo puede seguir Claude.
03Diseñar es decidirCon Claude armando pantallas desde el sistema, el tiempo de diseño se va a lo que importa: el flujo, el contenido y los casos difíciles.
Pantallas
01 · La portadaLa portada
02 · Cambias un alias y todo se actualizaCambias un alias y todo se actualiza
03 · La escala tipográficaLa escala tipográfica
04 · El radio manda el espaciadoEl radio manda el espaciado
05 · Iconos con color por tokenIconos con color por token
06 · Cada estado con su colorCada estado con su color
07 · Un botón que carga y confirmaUn botón que carga y confirma
08 · Validación en vivoValidación en vivo
09 · El sistema en el productoEl sistema en el producto
10 · Vista generalVista general
El resultadoLas pantallas nuevas ya nacen dentro del sistema. El diseño deja de empezar de cero en cada proyecto.

Proyectos que te pueden interesar