01Coloca
Coloca bloques. Arrástralos al lienzo (navbar, hero, calendario, tarjetas…) o añádelos con un clic o con el teclado. Cada rectángulo tiene nombre y sabe qué es.
Open source · MIT
Dibuja tu layout.Llévate tu diseño.
Coloca bloques con nombre en un lienzo (navbar, calendario, tarjetas) y Dialmade los convierte en un diseño con tu marca.
Exporta aFigmaClaude DesignFramerCódigo
Bloques
Demo en tu navegador. El Modo Layout está en desarrollo: hoy la app crea tu paleta desde el logo, te deja ajustarla y la exporta.
Modo Layout
Piensa en bloques.Genera con tu marca.
Arma la estructura con rectángulos que tienen nombre. Dialmade sabe qué es cada uno y lo diseña con tu paleta, tu tipografía y tu estilo.
- Una librería de bloques: navbar, hero, calendario, tarjetas, precios…
- Vista de escritorio y de móvil
- También sin IA: el diseño base es determinista
Cómo funciona
De rectángulos a diseño, en cinco pasos.
El lienzo es el centro. Todo lo demás le da contexto.
02Marca
Pon tu marca. Suelta tu logo y la paleta se genera en tu navegador, con contraste AA. Pronto también podrás traer tu marca.
03Genera
Genera el diseño. Cada bloque se diseña con tu marca. Sin IA obtienes una base determinista; con tu API key, copy a medida.
04Ajusta
Ajusta sin pelearte. Cambia la variante, la alineación, el énfasis y el espaciado de cada sección, mueve los dials de variación y densidad, edita los textos desde el panel y deshaz cuando quieras.
05Exporta
Expórtalo. A Figma, Claude Design, Framer o código. El link para tu diseñador llega con las cuentas.
Funciones
Todo lo demás, al servicio de tu layout.
Marca, IA, guía de estilo y exportación. Cada pieza alimenta el lienzo.
local · ~1 s
Paleta desde tu logo
Sacamos los colores en tu navegador, en OKLCH, con escalas 50–950 y roles para claro y oscuro.
pronto
Trae tu marca
¿Ya tienes marca? Pronto podrás traer tus tokens, tu guía o capturas de tu app, y Dialmade respetará lo que declaren.
BYOK
IA opcional
Funciona completa sin IA. Si quieres copy a medida, usa tu propia key de Anthropic.
HTML en el ZIP
Guía de estilo
Un brand board con paleta, tipografía, formas y componentes. Va en el ZIP de Código como HTML.
handoff
Exporta a donde trabajas
CSS listo para Tailwind v4, tokens DTCG, variables de Figma, DESIGN.md y prompts para Claude Design y Framer.
WCAG 2.2
Accesible por defecto
Contraste AA, todo se usa con teclado y las animaciones respetan tu ajuste de movimiento reducido.
Open source
Abierto, MIT y sin letra pequeña.
Dialmade es de la comunidad. Lee el código, córrelo en local o mejóralo.
- Licencia MIT
- Funciona sin IA y sin servicios de pago
- Tu logo no sale de tu navegador
- Hecho para devs que no son diseñadores
git clone https://github.com/k1rie/DialMade.gitcd DialMade && corepack enable pnpmpnpm install && pnpm dev# MIT · Node 24+
Tu próximo diseño empieza con un rectángulo.
Abre el lienzo, coloca tu primer bloque y mira cómo toma tu marca.