Skip to main content

Build with AI

You can build working product screens with Prism by describing what you want to an AI assistant — and get back code that uses the real components, colours and layouts in this system, not an invented look-alike. This page is the starting point whether you write code or not.

If a tool doesn't know your design system, it makes one up: invented colours, a re-built button, ignored focus rules. Prism ships a machine-readable layer (a context file + structured specs) so an assistant generates on-system code instead.

If you don't write code — start here​

You don't need to understand the code to get a good result. You need to give the assistant the right context and ask in the right way.

Step 1 — Pick a tool​

Any modern AI assistant that can write and run code works. Good options:

  • Claude (claude.ai) or ChatGPT — paste context, describe the screen, copy the result.
  • An AI coding tool (Claude Code, Cursor, v0, Bolt) — these can create and preview files for you.

Step 2 — Give it the system​

Open the For LLMs page and copy the context file with the Copy button (or give the assistant this link: https://prism.artoftechconsulting.com/docs/llms.txt). Paste it in and say:

"This is the Prism design system. Use only these components and the theming rules. Don't invent components or colours."

Step 3 — Paste the rules​

Paste the Agent rules block below. It keeps the assistant honest.

Step 4 — Describe the screen in plain language​

Be concrete about content and intent, not styling. For example:

"Build a hotel check-in screen for a TV. Show the guest's reservation (name, room, nights, rate), a big 'Confirm check-in' button, and after confirming, show a room-key QR code. Use the hospitality signature."

Good descriptions name: who it's for, what's on screen, the main action, and which product (signature). Point the assistant at a matching screen in Platforms as a reference — e.g. "like the HospitalityOS Check-in screen."

Step 5 — Preview and refine​

Ask the assistant to show it running, then refine in plain language: "make the confirm button the primary accent," "this should be one column on mobile," "use the compact density." If something looks off, paste a screenshot back and describe the problem.

Agent rules (paste this in)​

You are generating UI with the Prism design system. Follow these rules:

1. Use ONLY components from Prism (window.PrismDesignSystem_39d121). Never
   re-implement a button, input, dialog, table, etc. — import the real one.
2. Theme with cascading attributes, never by overriding component internals:
   data-signature (commerce|campus|finance|health|hospitality|media),
   data-theme="dark", data-density (compact|neutral|relaxed), data-scale="cinema".
3. Use semantic role tokens, never raw colours or hex:
   --accent, --text-primary/secondary/tertiary, --surface-page/card,
   --border-subtle, --positive/--notice/--negative, --focus-ring.
4. Exactly one accent (primary) action per view. Reserve positive/notice/negative
   for genuine confirm/caution/destructive meaning — not decoration.
5. Never remove or restyle the focus ring.
6. Imagery is customer content passed via props (image/media/avatar/src). Prism
   ships no stock photos — use neutral placeholders if none is provided.
7. Every icon-only control needs an accessible label.
8. Check prop names/types against the component spec before using them
   (see /ai/components.json) — do not guess prop shapes.
9. Prefer a Prism layout/pattern over hand-built CSS. If you must add CSS,
   consume Prism tokens, never hardcoded values.

The three things that win most of the battle​

  1. The system summary — the For LLMs page / llms.txt: import path, namespace, theming attributes, and every component with a one-line description.
  2. The rules — the Agent rules block above.
  3. The exact specs for the components in play — components JSON carries exact prop names and types, so the model stops guessing. For one big paste, use llms-full.txt which inlines every component's props.

What else is here​

Common pitfalls (and the fix)​

SymptomCauseFix
Colours look "close but wrong"Model used hex codesTell it to use role tokens (--accent, --text-primary…)
A button/input looks hand-builtModel re-implemented it"Use the Prism Button/TextField, don't build your own"
Product doesn't match the brandNo signature setSet data-signature="…" on a wrapping element
Prop errors / nothing rendersGuessed prop namesGive it the component spec for those components
Looks fine on desktop, breaks on mobileNo responsive intent statedAsk for the mobile layout explicitly; preview at each viewport

Why this matters​

A design system's whole promise is consistency. An assistant that doesn't know the system quietly breaks that promise one generated screen at a time. This layer is how you keep AI-assisted work on-system without reviewing every line by hand.