StyleDUI
Open Studio

Docs

Getting started

StyleDUI turns one brief into six different dashboard designs, lets you lock what you like and explore the rest, and exports code you can put in your repo.

1. Write a brief

Open the Studio and describe the product and the screen in a sentence or two, for example:

Dashboard for a fintech treasury tool with a left sidebar. Show KPI metrics and a recent transactions list.

The Studio shows how it read your brief. Things you say outright, such as “left sidebar” or a brand colour, are treated as hard requirements and kept in the directions (one direction may be a labelled wildcard that deliberately breaks one). You can also set intent chips (clean, premium, technical, editorial, bold, soft), a brand colour, a radius and light or dark mode.

No account is needed to explore. Visitors who are not signed in can run up to 10 briefs a day; a free account gets 30.

2. Look at six directions

The first six directions appear straight away, drawn on your device from a catalog of real components; AI-assisted names and sample content fill in a moment later when they are available. The six are chosen to differ from each other in structure and emphasis, not just colour. Below them, “Show me more” scrolls through further options, and the design map shows where each one sits by density and expressiveness.

3. Lock what you like and explore the rest

Open a direction in the editor. Four aspects can be locked: structure (layout and sections), components (chart, list and card choices), style (the Style DNA values) and content (copy and data). Press Explore 6 variations and you get variants where the locked aspects are unchanged. StyleDUI checks this on every result, so a variant that would change something you locked is never shown.

You can also tune the Style DNA directly: radius, density, contrast, depth, typography, spacing, borders and colour use.

4. Save, share and export

  • Save and share. Sign in to save projects (with autosaved versions) and to create share links. Shared designs are view-only pages.
  • DESIGN.md is free. It is a file describing the design system that coding agents read. Use it from the Export menu, over MCP or the command line.
  • Code (Pro) exports a standalone Next.js and Tailwind project, or a file list to copy into an existing project. Exploring is free, so you see the design live before you upgrade. See export structure.
  • Design tokens (DTCG) are a Pro feature too. Use my theme is free on every plan. See plans and limits.

Using it from a coding agent

The same engine is available to Claude Code and Cursor through an MCP server, and from a terminal. Exploring, previews and DESIGN.md are free; code export needs a Pro API key. See MCP setup and the command line page.