01Place
Place blocks. Drag them onto the canvas (navbar, hero, calendar, cards…) or add them with a click or the keyboard. Every rectangle has a name and knows what it is.
Open source · MIT
Sketch your layout.Walk away with your design.
Place named blocks on a canvas (navbar, calendar, cards) and Dialmade turns them into an on-brand design.
Exports toFigmaClaude DesignFramerCode
Blocks
Runs in your browser. Layout Mode is still in progress: today the app builds a palette from your logo, lets you tune it and exports it.
Layout Mode
Think in blocks.Generate with your brand.
Build the structure with named rectangles. Dialmade knows what each one is and designs it with your palette, your type and your style.
- A block library: navbar, hero, calendar, cards, pricing…
- Desktop and mobile views
- No AI needed: the base design is deterministic
How it works
From rectangles to a design, in five steps.
The canvas is the center. Everything else gives it context.
02Brand
Add your brand. Drop your logo and the palette is built in your browser, with AA contrast. Bringing your existing brand is coming soon.
03Generate
Generate the design. Each block is designed with your brand. Without AI you get a deterministic base; with your API key, tailored copy.
04Tune
Tune it without a fight. Swap each section's variant, alignment, emphasis and spacing, move the variance and density dials, edit the copy from the panel and undo anytime.
05Export
Take it with you. To Figma, Claude Design, Framer or code. A shareable link for your designer comes with accounts.
Features
Everything else serves your layout.
Brand, AI, style guide and exports. Each piece feeds the canvas.
local · ~1 s
Palette from your logo
We pull the colors in your browser, in OKLCH, with 50–950 scales and roles for light and dark.
soon
Bring your brand
Already have a brand? Soon you'll bring your tokens, your guide or screenshots of your app, and Dialmade will keep what they declare.
BYOK
Optional AI
Works fully without AI. For tailored copy, use your own Anthropic key.
HTML in the ZIP
Style guide
A brand board with palette, type, shapes and components. It ships in the Code ZIP as HTML.
handoff
Export where you work
Tailwind v4-ready CSS, DTCG tokens, Figma variables, DESIGN.md and prompts for Claude Design and Framer.
WCAG 2.2
Accessible by default
AA contrast, full keyboard use, and motion that follows your reduced-motion setting.
Open source
Open, MIT, no fine print.
Dialmade belongs to the community. Read the code, run it locally or make it better.
- MIT license
- Works without AI or paid services
- Your logo never leaves your browser
- Made for devs who aren't designers
git clone https://github.com/k1rie/DialMade.gitcd DialMade && corepack enable pnpmpnpm install && pnpm dev# MIT · Node 24+
Your next design starts with a rectangle.
Open the canvas, place your first block and watch it take on your brand.