StyleDUI
Open Studio
V1Dashboards first · other screen types coming soon

Explore the UI before you build it.

Six genuinely different designs for your dashboard in under a second. Lock what you like, explore the rest, export React and Tailwind code into your repo.

Explore a screen View examples

Free to explore, no card · DESIGN.md is free, code export is Pro · Directions are drawn on your device in milliseconds; AI-assisted names and content follow

Brief

Dashboard for an AI video SaaS. Premium, dark, dense but clean. Usage chart, recent generations, and an upgrade CTA.

DashboardExplore 6 directions
  • FrameFlow
    Northwind StudioOverview

    Overview

    Create video
    Videos generated
    2,418
    Generation time
    18.2h
    Monthly usage
    68%
    1,092 / 1,600 min
    Render success
    99.2%

    Generation minutes

    Rendered minutes per day across all projects

    7d30d90d
    1,092 minof 1,600 included
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Pro planRenews Oct 14
    68%of monthly minutes
    Used
    1,092 min
    Projected
    1,540 min

    You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

    Upgrade to Studio

    Recent generations

    View library
    • Product teaser0:32
    • Summer launch1:05
    • Founder story2:14
    • AI workflow demo0:48
    01Precision
  • FrameFlowNew video

    September, in review

    2,418 videos, made in 18.2 hours.

    Output is up 12.4% on August while render time fell 6.1%. Your team shipped four launches this month; the product teaser is already your most-watched cut.

    Render success
    99.2%
    Avg. length
    1:04
    Collaborators
    7

    Minutes rendered

    30 days
    Sep 1Sep 8Sep 15Sep 22Sep 30
    68%1,092 of 1,600 min

    Recent work

    1. No. 01— Ready

      Product teaser

      0:32 · 4K · 12 min ago

    2. No. 02— Rendering

      Summer launch

      1:05 · 1080p · 38 min ago

    3. No. 03— Ready

      Founder story

      2:14 · 4K · 3 h ago

    4. No. 04— Queued

      AI workflow demo

      0:48 · 1080p · Yesterday

    02Editorial
  • FrameFlow New render
    Videos
    2,418+12.4%
    Gen time
    18.2h−6.1%
    Success
    99.2%+0.4%
    Queue
    3est. 2m
    p95 render
    42s−3s
    Plan · Pro
    68%Upgrade
    Render throughput · 30d min/daypeak 104
    100500
    sep 1sep 8sep 15sep 22sep 30
    Event log live
    • 14:32:08ok render g_1a4 product-teaser → 4K done
    • 14:31:52run render g_1a5 summer-launch 62%
    • 14:30:11ok upscale pass completed · 18.4s
    • 14:28:40warnqueue depth 3 · est. wait 2m
    • 14:27:02ok voice track synced · founder-story
    • 14:25:47ok webhook delivered → slack#launch
    Recent generations4 of 2,418
    IDNameStatusDur
    g_1a4product-teaserready0:32
    g_1a5summer-launchrendering1:05
    g_1a6founder-storyready2:14
    g_1a7ai-workflow-demoqueued0:48
    03Command

  • Good morning, Maya

    Here's what your studio made this week.

    New video

    What should we make today?

    A 30-second teaser for our autumn release… Create
    Product demoSocial cutExplainerFounder note
    68%

    Monthly minutes

    1,092 of 1,600 used

    Videos generated
    2,418+12.4%
    Generation time
    18.2h−6.1%

    Recent generations

    See all
    • 0:32

      Product teaser

      Ready · 12 min ago

    • 1:05

      Summer launch

      Rendering · 38 min ago

    • 2:14

      Founder story

      Ready · 3 h ago

    • 0:48

      AI workflow demo

      Queued · Yesterday

    Pro plan · renews Oct 14

    Make more with Studio

    5,000 minutes, priority 4K and brand kits for your whole team.

    Upgrade plan
    04Soft Grid
  • FrameFlowCreate video
    Monthly usagePro · renews Oct 14
    68%1,092 / 1,600 minutes

    At this pace you'll run out on Oct 9. Studio gives you 5,000 minutes.

    Upgrade
    Videos generated2,418+12.4%
    Generation time18.2h−6.1%
    Render success99.2%+0.4%
    Usage — 30 daysMinutesVideosCredits
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Recent generations
    1. 01Product teaser0:32
    2. 02Summer launch1:05
    3. 03Founder story2:14
    4. 04AI workflow demo0:48
    05Monochrome
  • FrameFlow Create
    This month+12.4%
    2,418videos generated
    18.2hgeneration time · −6.1%
    68%monthly usage
    Success99.2%
    In queue2
    • Ready

      Product teaser

      0:32 · 4K

    • Rendering

      Summer launch

      1:05 · 1080p

    • Ready

      Founder story

      2:14 · 4K

    • Queued

      AI workflow demo

      0:48 · 1080p

    Pro · 68% used

    You're moving fast. Go Studio.

    Upgrade
    06Signal

Illustration: the six hand-built starting designs. Your own brief generates its own six from the component catalog.

01 — Explore

One brief. Six directions.

Not six color swaps. The six are picked to be as different from each other as the component catalog allows, in structure and emphasis. Anything you state outright, like “left sidebar”, is kept in every direction except one labelled wildcard.

  • Hierarchy
  • Composition
  • Density
  • Navigation
  • Card treatment
  • Typography
  • Color
FrameFlow
Northwind StudioOverview

Overview

Create video
Videos generated
2,418
Generation time
18.2h
Monthly usage
68%
1,092 / 1,600 min
Render success
99.2%

Generation minutes

Rendered minutes per day across all projects

7d30d90d
1,092 minof 1,600 included
Sep 1Sep 8Sep 15Sep 22Sep 30
Pro planRenews Oct 14
68%of monthly minutes
Used
1,092 min
Projected
1,540 min

You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

Upgrade to Studio

Recent generations

View library
  • Product teaser0:32
  • Summer launch1:05
  • Founder story2:14
  • AI workflow demo0:48
Navigation
Labelled sidebar with workspace switcher
Hierarchy
KPI row → usage trend → activity
Density
Balanced, 12-column rhythm
Typography
Neutral grotesk, tabular numerals
Color
Indigo reserved for actions and data
Open Precision

02 — Lock

Lock what works. Explore what doesn't.

Happy with the layout but not the feel? Lock structure and content, then explore style and components. Every result is checked, so a variant that would change something you locked is never shown.

Lock & Explore

Try it
  • StructureLayout, sections, hierarchy
  • StyleStyle DNA values
  • ContentCopy, data, labels
  • ComponentsChart, list and card choices

Next exploration keeps structure, content and reinterprets style, components.

Illustration with canned moves. In the editor, Explore runs the real engine and checks every result against your locks.

  • FrameFlow
    Northwind StudioOverview

    Overview

    Create video
    Videos generated
    2,418
    Generation time
    18.2h
    Monthly usage
    68%
    1,092 / 1,600 min
    Render success
    99.2%

    Generation minutes

    Rendered minutes per day across all projects

    7d30d90d
    1,092 minof 1,600 included
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Pro planRenews Oct 14
    68%of monthly minutes
    Used
    1,092 min
    Projected
    1,540 min

    You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

    Upgrade to Studio

    Recent generations

    View library
    • Product teaser0:32
    • Summer launch1:05
    • Founder story2:14
    • AI workflow demo0:48

    Sharpened

    Crisper corners, defined edges

  • FrameFlow
    Northwind StudioOverview

    Overview

    Create video
    Videos generated
    2,418
    Generation time
    18.2h
    Monthly usage
    68%
    1,092 / 1,600 min
    Render success
    99.2%

    Generation minutes

    Rendered minutes per day across all projects

    7d30d90d
    1,092 minof 1,600 included
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Pro planRenews Oct 14
    68%of monthly minutes
    Used
    1,092 min
    Projected
    1,540 min

    You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

    Upgrade to Studio

    Recent generations

    View library
    • Product teaser0:32
    • Summer launch1:05
    • Founder story2:14
    • AI workflow demo0:48

    Editorial

    Serif display, restrained color

  • FrameFlow
    Northwind StudioOverview

    Overview

    Create video
    Videos generated
    2,418
    Generation time
    18.2h
    Monthly usage
    68%
    1,092 / 1,600 min
    Render success
    99.2%

    Generation minutes

    Rendered minutes per day across all projects

    7d30d90d
    1,092 minof 1,600 included
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Pro planRenews Oct 14
    68%of monthly minutes
    Used
    1,092 min
    Projected
    1,540 min

    You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

    Upgrade to Studio

    Recent generations

    View library
    • Product teaser0:32
    • Summer launch1:05
    • Founder story2:14
    • AI workflow demo0:48

    Expressive

    Heavier type, bolder accent

03 — Restyle

Every design has a Style DNA.

Radius, density, contrast, depth, type, spacing, borders and color use: the handful of values that give a design its character. Change one and the whole screen follows.

FrameFlow
Northwind StudioOverview

Overview

Create video
Videos generated
2,418
Generation time
18.2h
Monthly usage
68%
1,092 / 1,600 min
Render success
99.2%

Generation minutes

Rendered minutes per day across all projects

7d30d90d
1,092 minof 1,600 included
Sep 1Sep 8Sep 15Sep 22Sep 30
Pro planRenews Oct 14
68%of monthly minutes
Used
1,092 min
Projected
1,540 min

You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

Upgrade to Studio

Recent generations

View library
  • Product teaser0:32
  • Summer launch1:05
  • Founder story2:14
  • AI workflow demo0:48

Style DNA

10px
Balanced · 55
Original

04 — Export

Real components, not screenshots.

Every direction is a tree of real React components. The export copies the same source files the preview renders, plus your tokens and content, as a standalone Next.js and Tailwind project. Dashboards only in V1.

  1. 1

    Brief

    “Dashboard for an AI video SaaS. Premium, dark, dense but clean. Usage chart, recent generations, and an upgrade CTA.”

  2. 2

    Design direction

    01Precision

    Minimal, structured, crisp, product-led.

    SidebarHairline bordersBalanced densityGeist
  3. 3

    Catalog components

    • shell.sidebarshell
    • └overview.breadcrumb-toolbarfull
    • └metrics.spark-cardsfull
    • └usage.area-paneltwo-thirds
    • └upsell.plan-cardone-third
    • └activity.thumb-rowsfull
  4. 4

    Your repo

    import { ShellSidebar } from "@/components/catalog/shells/sidebar";

export default function Page() {
  return (
    <ShellSidebar content={content} regions={regions} />
  );
}

Simplified excerpt. Exported actions are typed no-op handlers: StyleDUI generates no business logic. Verified by a daily check that builds exported designs and compares them with the preview.

05 — Agents

Give your coding agent taste.

Coding agents write working but samey UI. Give one a real design direction to follow, in a file it reads or a tool it calls.

  • DESIGN.md, free

    A design-system file that coding agents read. Export it from the editor, the MCP server or the command line.

  • MCP server

    Claude Code and Cursor can explore directions, lock what works and read the result. Exploring is free; export needs a Pro API key.

  • Command line

    Explore, print DESIGN.md and export from a terminal.

The styledui npm package is coming soon; today the MCP server and CLI run from a checkout of the repository.

MCP setup

Examples

Dashboard styles

Illustrations of dashboard styles to steer toward; open the Studio to generate your own. Landing pages, pricing and settings screens are coming soon: V1 generates dashboards only.

  • FrameFlow
    Northwind StudioOverview

    Overview

    Create video
    Videos generated
    2,418
    Generation time
    18.2h
    Monthly usage
    68%
    1,092 / 1,600 min
    Render success
    99.2%

    Generation minutes

    Rendered minutes per day across all projects

    7d30d90d
    1,092 minof 1,600 included
    Sep 1Sep 8Sep 15Sep 22Sep 30
    Pro planRenews Oct 14
    68%of monthly minutes
    Used
    1,092 min
    Projected
    1,540 min

    You're on pace to hit your limit before renewal. Studio adds 4K priority rendering and 5,000 minutes.

    Upgrade to Studio

    Recent generations

    View library
    • Product teaser0:32
    • Summer launch1:05
    • Founder story2:14
    • AI workflow demo0:48

    FrameFlow

    AI video dashboard

    • Dark
    • Precise
    • Dense
    Try it

  • Q3 · All regions

    Revenue overview

    1M3MYTD1Y

    MRR

    $482.1k

    +8.2%

    Net retention

    118%

    +3.1%

    Active accounts

    3,214

    +146

    Churn

    1.8%

    −0.4%

    Monthly recurring revenue

    Top accounts

    NNorthwind$48.0k
    AAcme Corp$41.0k
    GGlobex$34.0k
    IInitech$27.0k
    UUmbrella$20.0k

    Retention cohorts

    Ledgerly

    Fintech analytics

    • Technical
    • Calm
    • Light
    Try it

  • settings / api-keys

    API keys

    Create key
    Productionrk_live_••••4f2aFull access2m ago
    Stagingrk_test_••••91bcRead / write1h ago
    CI pipelinerk_test_••••0d7eDeploy onlyYesterday
    Analytics exportrk_live_••••c3e1Read only6 days ago

    Webhook endpoints

    https://api.acme.dev/hooks/relay

    https://hooks.slack.com/T0…/B0…

    Rate limits

    Requests / min64%
    Burst38%
    Daily quota81%

    Revoke all keys and rotate secrets

    Revoke all

    Relay

    Developer API dashboard

    • Mono
    • Dark
    • Ruled
    Try it
  • CanvaslyProductCreatorsPricingStart free

    For video creators

    Long videos in. Short clips out.

    Canvasly finds the moments worth sharing and cuts them for every platform.

    Upload a video Watch demo

    12 clips found

    from a 48-min podcast

    Coming soon

    Canvasly

    Creator landing page

    • Editorial
    • Warm
    • Bold
  • Pricing

    Plans that grow with your team

    MonthlyAnnual · save 20%

    Starter

    $0 /mo

    • 3 projects
    • Community support
    • Basic exports
    Choose Starter

    Pro

    $24 /mo

    • Unlimited projects
    • Brand kits
    • Priority support
    • Version history
    Choose Pro

    Team

    $64 /mo

    • Everything in Pro
    • SSO & roles
    • Shared libraries
    Choose Team
    Coming soon

    Signal

    SaaS pricing page

    • Soft
    • Premium
    • Airy

  • Profile

    How you appear across Northwind.

    MOChange avatarRemove

    Full name

    Maya Okafor

    Email

    maya@northwind.studio

    Role

    Design lead

    Timezone

    Europe/Lisbon (GMT+1)

    Weekly digest

    A summary of project activity every Monday.

    CancelSave changes
    Coming soon

    Northwind

    Settings & account

    • Clean
    • Structured
    • Neutral

Pricing

Start free. Upgrade when you ship.

Explore, mix and share within fair use on Free, and take DESIGN.md with you. Pro is for shipping: code export, design tokens, and MCP or CLI export.

Free

$0no card needed

For exploring, and taking DESIGN.md with you.

  • Unlimited exploring, within fair use: 10 briefs a day without an account, 30 signed in
  • Six directions per brief, locks, mixing, the feed and the design map
  • Share links
  • DESIGN.md export
  • MCP and CLI explore and preview
  • 3 saved projects
Start exploring

Pro

Recommended

$10/mo, billed yearly ($120/yr)

Save 33% compared with monthly

For builders who ship the code.

  • Everything in Free
  • Code export: zip, or a file list to copy into your project
  • DTCG design tokens export
  • API key for MCP and CLI export
  • Unlimited saved projects, with version history
  • Fair use of 200 briefs a day

14-day refund: if Pro isn't for you, email contact@styledui.com within 14 days of your first payment. No trial and no card needed for Free.
Payments and sales tax are handled by Dodo Payments, our merchant of record.

Pricing details and FAQ

Your next screen has more than one good answer.

Explore a screen