Skip to main content

Worked example

A short, end-to-end pass: building a commerce orders screen with an assistant, the way it actually goes.

1. Set up the context​

Paste /llms.txt. Then the rule block:

Build with the Prism Design System. Import from window.<namespace>. Theme with data-signature, never by overriding components. Use role tokens, not hard-coded values. Keep the focus ring and label every control.

2. The task prompt​

Build an orders list for the commerce product. Page container has data-signature="commerce". Use a DataGrid with search, a status filter and a saved-views control. Columns: order #, customer, status, total (right-aligned), date. Include empty, loading and error states. One primary action: "New order".

3. What good output looks like​

The assistant should reach for DataGrid (not a hand-built table), import it from the namespace, wrap the page in data-signature="commerce", and use --accent for the single primary action. Totals are right-aligned with tabular figures. Status uses a Tag, not free-form colored text. The three states use EmptyState, sized section.

const { DataGrid, Button, EmptyState, Tag } = window.PrismDesignSystem_39d121;

<div data-signature="commerce">
  <header>{/* PageHeader with the "New order" accent button */}</header>
  <DataGrid /* columns, search, filter, saved views */ />
  {/* empty / loading / error handled with EmptyState */}
</div>

4. Where it usually drifts — and the correction​

  • Hard-coded color ("#16a34a for paid"). Correction: a Tag with a semantic tone, or a role token.
  • A hand-built table instead of DataGrid. Correction: point it back to the selection guide — filtering and saved views mean DataGrid.
  • No empty/error state. Correction: ask explicitly; they are part of the screen, not extras.
  • Default cobalt instead of commerce. Correction: confirm the data-signature is on a real ancestor of the content.

5. Verify​

Run the review prompt from the prompt library over the result. It catches the four drifts above mechanically, so you are reviewing intent, not syntax.

The point of the loop is that each step constrains the next. Context sets the vocabulary, the task names the components, the review enforces the rules — and the output stays on-system without hand-correction.