What this prompt does
This prompt has the AI act as a senior product designer and front-end engineer specifying a patient-friendly lab results viewer, and it asks for working component code rather than pseudocode. It defines a result row per test with value, reference range, and a status badge (normal/high/low/critical) using accessible color plus icon, a trend chart per test, a plain-English explanation block, actions like print/share/flag, layout for many results, and an accessibility pass. The [test_types] placeholder sets which tests are supported, and [tone] shapes how results are explained.
The structure works because the hard part of a lab viewer is making a scary number readable without alarming the patient. By requiring a plain-English explanation per result and a reassuring [tone], the prompt keeps the viewer both correct and calm. The status badges combine color and icon so status never relies on color alone, the [audience] variable tailors the reading level, and the [stack] keeps components, props, and a sample data shape aligned to your project. The critical-results-first sort and per-test reference range mean a patient sees the values that matter most without scrolling, and can tell whether a number sits inside or outside the expected band without needing to interpret raw figures on their own.
When to use it
- Building a patient-facing lab results viewer
- Supporting specific
[test_types]like a blood panel, lipids, A1C, or thyroid - You need plain-English explanations in a reassuring
[tone] - Designing status badges that don't rely on color alone
- Sorting many results with critical-results-first and search
- Generating components plus a sample data shape for your
[stack]
Example output
You get components, props/types, and a sample data shape you can drop in. Each test renders a result row with value, reference range, and a normal/high/low/critical badge using both color and icon; a trend-over-time chart with hover values and units; and a plain-English explanation translating the result. Actions cover print/download PDF, share with provider, and flag a question, and the layout supports grouping, search, and critical-first sorting.
Pro tips
- List your
[test_types]accurately; the viewer is generated to support each category you name - Set
[tone]to reassuring and plain-language so the explanation blocks calm rather than alarm - Tailor
[audience]to your real users; a non-technical mobile audience changes the reading level and layout - Keep
[stack]accurate so the components, types, and sample data shape fit your project - Lock the accessibility pass before shipping: confirm status badges use an icon alongside color, since color-only badges fail audits
- Ask for the critical-results-first sort explicitly if a long results list feels flat
- For long result sets, request that the grouping and search behaviour be defined too, so a patient with a full blood panel can find a single value without scrolling endlessly
