Skip to main content

Prompt library

These are starting prompts for common build tasks. Each assumes you have given the tool /llms.txt first. Adjust the bracketed parts. They are written to constrain output to the system, not just to describe a screen.

Scaffold a screen​

Using the Prism Design System (see llms.txt), build a [orders list] screen for the [commerce] product. Set data-signature="commerce" on the page container. Use a [DataGrid] for the data with [search and a status filter]. Import components from window.<namespace>. Use role tokens for all color and spacing; do not hard-code values. Include empty and loading states. Keep every control keyboard-reachable and labelled.

Build a form​

Build a [patient intake] form with Prism. Use Field, FormSection and FormRow for layout, ErrorSummary at the top, and FormActions for the buttons. Validate on blur and submit. One primary action only. Use the [health] signature and compact density. Labels are visible and persistent — no placeholder-as-label.

Convert an off-system mockup​

Here is a screen built with raw HTML/CSS. Rebuild it with Prism components from window.<namespace>. Replace ad-hoc buttons, inputs and cards with their Prism equivalents, swap every hard-coded color for the nearest role token, and apply the [finance] signature. Preserve the layout and content; change only the implementation. List any place where no Prism component fits.

Add a state you forgot​

This [DataGrid / list / dashboard] only handles the happy path. Add the missing states with Prism EmptyState: first-run, no-results, error (with retry) and offline. Match the component's size to its container. Keep the copy plain and action-oriented.

Review for adherence​

Review this code against the Prism rules: components imported from the namespace (not re-implemented), color and spacing via role tokens (no hard-coded hex/px), theming via data-signature (no internal overrides), focus ring intact, semantic colors used only for real meaning, every control labelled. List violations with the fix for each.

Tips​

  • Always name the target data-signature. Output themed in default cobalt is rarely what you want.
  • Ask for empty, error and loading states explicitly — models default to the happy path.
  • For prop-heavy components, paste that component's entry from the components JSON so the model uses exact prop names.