Docs / AI Prompts
Paste-ready prompts that make an assistant build with real KATA parts instead of lookalikes.
The catalog is published for machines first in this workflow: registry.json carries every part with its files, and llms.txt indexes the docs. A prompt that names those sources gets real parts; one that does not gets an improvisation.
Build a settings page using only KATA UI parts from kata-ui.dev. Fetch the part list from https://kata-ui.dev/registry.json, use each part’s own CSS unmodified, style nothing from scratch, and theme only through the tokens in tokens.css. Sections: profile, notifications, danger zone.
The same prompt works for dashboards, checkout and landing pages — change the sections, keep the sources.
Models are good at layout and bad at inventing design systems. Anchoring the conversion to the catalog turns a lookalike into the real parts, with names you can verify on their pages.
Recreate this screen with KATA UI parts from kata-ui.dev. For every element, name the part you used and where its code came from. If a piece has no KATA part, say so plainly instead of inventing one.
Because parts read tokens and nothing else, a restyle is a token diff. This is the fastest way to feel what the mold buys: the markup does not change at all.
Keep this page’s markup exactly as it is. Re-theme it by changing only KATA UI tokens: accent to Ruri (#1E50A2), radius to 10px, dark mode on. Show me the token diff and nothing else.
Point the assistant at the forms guide and the Field contract, and the generated code inherits the decisions — timing, placement, wording — instead of re-deciding them per prompt.
Add validation to this form following https://kata-ui.dev/docs/guide-forms-pro/ exactly: validate on blur and submit, errors replace hints, the submit button disables with a progress label, and no input is lost on failure.
Dark mode in KATA is one attribute, which makes it a one-line prompt — and a good test of whether the assistant actually read the docs or is guessing.
Give this page a dark theme the KATA UI way: data-theme="dark" on the sections that need it, no color overrides in the parts. If any part looks wrong, name the token responsible instead of patching the part.
The mold is written down (KATA.md) and machine-checked (check.py) in the repository, so an assistant can audit foreign code against the same standard the catalog ships by.
Audit this code against the KATA UI mold in KATA.md: list every raw color that should be a token, every class used but not defined, and every interactive part missing its keyboard behavior. Do not fix anything yet — report first.
Introduction · Getting Started · CLI · Theming · Dark Mode · Accessibility · Installation · Plain HTML · Astro · Laravel · React & Next.js · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Guide: Forms, For Real · Guide: Data Tables That Survive Real Data · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · KATA vs shadcn/ui · FAQ · Registry · Forms · MCP Server · RTL · Contributing · Changelog