Skip to content
WunderUI
Get All-Access
AI design

Same prompt, same model

. Drag the slider to see what the AI builds on its own and what it builds with WunderUI.

Prompt 01

Design the analytics dashboard for Tern, a subscription billing tool: MRR, churn, revenue by plan, recent invoices.

  1. get_design_mdReads the rules: tokens, spacing, charts, copy
  2. list_componentsFinds KPI cards, chart cards and the data table
  3. get_starterStarts from the dashboard shell instead of raw divs
  4. get_tokensColours, radii and type come from the tokens
The same dashboard built with WunderUI: library KPI cards, chart cards and data table on the shared tokens.
A billing analytics dashboard built from the prompt alone: generic cards, a line chart and a table.
Without WunderUIWith WunderUI

Prompt 02

Design the sign-in screen for Halden, a project planning tool for small agencies: email and password, Google sign-in, a short panel about the product.

  1. get_skillFollows the wunderui-screen skill for auth screens
  2. list_componentsPicks input, button, checkbox and social sign-in
  3. get_componentReads the real props of each component
  4. get_tokensBrand panel and focus states use the tokens
The same sign-in screen built with WunderUI.
A sign-in screen built from the prompt alone.
Without WunderUIWith WunderUI

Prompt 03

Design the pricing page for Pavo, an analytics API: three plans, a monthly and yearly toggle, a plan comparison and a short FAQ.

  1. get_design_mdReads the rules for pricing and copy
  2. list_componentsFinds the segmented control, cards, table and accordion
  3. get_componentReads the real props before writing any JSX
  4. get_tokensSpacing and colour come from the tokens
The same pricing page built with WunderUI.
A pricing page built from the prompt alone.
Without WunderUIWith WunderUI

Prompt 04

Design the chat screen for Orbit, an AI assistant for finance teams: a conversation list, a thread with sources, and a message composer.

  1. get_starterStarts from the AI chat starter
  2. list_componentsFinds message, source list and composer
  3. get_componentReads the real props of the chat parts
  4. get_tokensBubbles and states use the tokens
The same chat screen built with WunderUI.
An AI chat screen built from the prompt alone.
Without WunderUIWith WunderUI

Prompt 05

Design the checkout for Nord, a shop for standing desks: shipping, delivery method, payment, and an order summary.

  1. get_skillFollows the wunderui-screen skill for forms
  2. list_componentsFinds fields, option cards and the order summary
  3. get_componentReads the real props of each component
  4. get_tokensFields, borders and focus use the tokens
The same checkout built with WunderUI.
A checkout built from the prompt alone.
Without WunderUIWith WunderUI
Want your agent to build like this?Build with AI