AIWebApp

UI from a description, with contrast you can trust

A three-tier pricing table in a dark theme. The planner sets dark mode and the design tokens are checked for WCAG AA contrast.

ComponentUI componentExample — not saved until you change it

Runs on this device in under a second. Ctrl+Enter also generates.

What the planner understood

Confidence100%
  • componentUI component template
  • pricing tableUI component template
  • darkdark colour mode
  • pricingpricing component
Feasibility, templates and prompt history

Feasibility

  • NATIVELight and dark theme
  • NATIVEResponsive layout

Start from a template

Picking a template keeps the name, colours and fields from your description.

Prompt history

Off by default. Prompts are only kept in this browser if you turn this on.

index.html
Sandboxed · network off · fits 772px

Theme preset

Colours and type

Adjusted per mode if needed to keep 4.5:1 contrast.

Colour mode

Contrast check

PairLightDarkBody text17.0:1 pass15.5:1 passButton text7.9:1 pass5.2:1 passLinks7.5:1 pass5.2:1 passMuted text5.5:1 pass6.7:1 pass

WCAG AA needs 4.5:1 for normal text.

Name and copy

Also used for the page title, icon monogram and web manifest.

This template has no hero copy. Add a Hero section in the Plan tab to edit a headline here.

Mood words become tokens

Words like “playful”, “corporate”, “earthy”, “warm” or “minimal” select a preset; colour names and hex codes set the brand colour; “dark” or “light” fixes the colour mode; “serif” or “rounded” picks a font stack; “sharp” removes corner rounding. The result is a small set of tokens rather than scattered styles.

Because colours are computed per mode, a brand colour that is too light for white backgrounds is darkened for text and buttons until it reaches 4.5:1, and lightened for dark mode. The Checks tab reports any token pair that still falls short.

Generated UI is a starting point

The components are deliberately plain so they slot into any design. Use the Design tab for global changes and the Code tab for anything specific.

Frequently asked questions

Does it generate images or icons?

It generates a simple monogram app icon as SVG. Photos and illustrations are not generated; gallery tiles are labelled placeholders.

Can I use my exact brand colours?

Yes. Enter hex values in the Design tab. If a colour fails contrast, the adjusted value is used for text and buttons, and the change is visible in tokens.css.