Ten screens, two ways

## Prompt A (direct)

A sign-in page for a project-management web app called "Tallyboard". Email and password fields, a "Remember me" checkbox, a "Forgot password?" link, a primary "Sign in" button, and a link to create an account. Show an inline error under the password field reading "Incorrect password." Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A sign-in page for a project-management web app called "Tallyboard". Email and password fields, a "Remember me" checkbox, a "Forgot password?" link, a primary "Sign in" button, and a link to create an account. Show an inline error under the password field reading "Incorrect password." Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A sign-up form for "Tallyboard". Fields: full name, work email, password (with its rules shown as a hint), company size (select: 1–10, 11–50, 51–200, 201+), and a required checkbox to accept the terms. A primary "Create account" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A sign-up form for "Tallyboard". Fields: full name, work email, password (with its rules shown as a hint), company size (select: 1–10, 11–50, 51–200, 201+), and a required checkbox to accept the terms. A primary "Create account" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

An account settings page for "Tallyboard" with three groups: Profile (display name, email), Notifications (three on/off switches: email digests, mentions, weekly report), and Appearance (theme select: system, light, dark). A "Save changes" button that shows a confirmation message after it is pressed. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

An account settings page for "Tallyboard" with three groups: Profile (display name, email), Notifications (three on/off switches: email digests, mentions, weekly report), and Appearance (theme select: system, light, dark). A "Save changes" button that shows a confirmation message after it is pressed. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A pricing section for "Tallyboard" with three plans: Free ($0), Team ($12 per user per month, marked "Most popular"), and Business ($24 per user per month). Each plan lists four features and has a call-to-action button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A pricing section for "Tallyboard" with three plans: Free ($0), Team ($12 per user per month, marked "Most popular"), and Business ($24 per user per month). Each plan lists four features and has a call-to-action button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A dashboard for "Tallyboard": four stat cards (open tasks 128, completed this week 342, overdue 7, active members 24, each with a change versus last week), a line chart of tasks completed over the last 7 days, and a table of the five most recent tasks with name, assignee, status and due date. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A dashboard for "Tallyboard": four stat cards (open tasks 128, completed this week 342, overdue 7, active members 24, each with a change versus last week), a line chart of tasks completed over the last 7 days, and a table of the five most recent tasks with name, assignee, status and due date. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A tasks table for "Tallyboard" with 12 rows and columns: task, assignee, status, priority, due date. Columns sort when their header is clicked. A text filter above the table narrows the rows, a count shows how many rows match, and pagination shows 5 rows per page. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A tasks table for "Tallyboard" with 12 rows and columns: task, assignee, status, priority, due date. Columns sort when their header is clicked. A text filter above the table narrows the rows, a count shows how many rows match, and pagination shows 5 rows per page. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A checkout page for an online stationery shop called "Inkwell Supply": contact email, shipping address fields, a choice of shipping method (standard $4, express $12) as radio buttons, a payment section with card number, expiry and CVC, and an order summary showing two items, shipping and the total. A "Place order" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A checkout page for an online stationery shop called "Inkwell Supply": contact email, shipping address fields, a choice of shipping method (standard $4, express $12) as radio buttons, a payment section with card number, expiry and CVC, and an order summary showing two items, shipping and the total. A "Place order" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

An inbox screen for a support tool called "Helpline": a left column listing eight conversations (sender, subject, one-line preview, time, unread state), and a right pane showing the selected conversation with its messages and a reply box with a "Send" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

An inbox screen for a support tool called "Helpline": a left column listing eight conversations (sender, subject, one-line preview, time, unread state), and a right pane showing the selected conversation with its messages and a reply box with a "Send" button. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

The first screen a new "Tallyboard" user sees when they have no projects yet: an empty state with an illustration area, a heading, one sentence of explanation, a primary "Create project" button, a secondary "Import from CSV" button, and a three-step getting-started checklist. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

The first screen a new "Tallyboard" user sees when they have no projects yet: an empty state with an illustration area, a heading, one sentence of explanation, a primary "Create project" button, a secondary "Import from CSV" button, and a three-step getting-started checklist. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.

## Prompt A (direct)

A project list for "Tallyboard" with four projects, each with a "Delete" button. Pressing Delete opens a confirmation dialog that names the project and offers "Cancel" and "Delete project". Confirming removes the row and shows a short notification that the project was deleted. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users.

## Prompt B (KATA)

A project list for "Tallyboard" with four projects, each with a "Delete" button. Pressing Delete opens a confirmation dialog that names the project and offers "Cancel" and "Delete project". Confirming removes the row and shows a short notification that the project was deleted. Write one complete, self-contained HTML file (inline all CSS and JavaScript; no external requests except where stated). It should work in a current desktop and mobile browser, in light and dark mode, and for keyboard users. Fetch each part from kata-ui.dev/registry.json and use it unmodified.