Claude/ChatGPT Prompt to Build a Quantum Computing Dashboard

What this prompt does

This prompt generates a research-grade quantum computing dashboard spec covering the full researcher workflow: drag-and-drop circuit construction, job submission, queue monitoring, measurement result interpretation, live hardware diagnostics, and in-browser code editing. It is explicitly tuned against the mistakes most UI generators make — no spinning atoms, no hidden error rates, no slow circuit rendering, no oversimplified abstractions that would be useless to a physicist or quantum software engineer.

The template's [framework] variable is the sharpest edge. It locks the code output to a specific frontend stack, so the histogram and Bloch sphere components come back targeting a real rendering library (D3, Three.js, Plotly — whatever you specify) rather than hedged pseudocode. The anti-pattern block does real work: it prevents the AI from flattening the UI into something that belongs in a science museum exhibit rather than a research lab.

The seven generated sections mirror how quantum researchers actually work day to day — circuit editor, job queue, results viewer, Bloch sphere, hardware monitor, code editor, and framework-specific component code — which means the layout rationale is already embedded, not left to the AI to guess.

When to use it

• You are building a web frontend for an IBM Quantum, IonQ, or Rigetti cloud API and need a dashboard scaffold fast.
• Your team is wrapping Qiskit Runtime or PennyLane experiments in an internal tool for a research group.
• You need a hardware monitor panel that surfaces T1/T2 decoherence times and calibration windows without the UI burying them.
• You are prototyping a quantum IDE with a circuit-to-QASM export button and need the UX spec before writing component code.
• You are designing a graduate-level quantum computing course platform and need a real circuit editor, not a toy simulator.

Example output

Circuit Editor (Qubit Wire Layout)
────────────────────────────────────────────────────
q[0] ──H──●──M──
           │
q[1] ──────X──M──
────────────────────────────────────────────────────
Gates palette: H · X · Y · Z · CNOT · Rz · Rx · T · S
Export: [ QASM 3.0 ] [ OpenQASM 2 ] [ Qiskit Python ]

Measurement Histogram (8192 shots, Bell state |Φ+⟩)
|00⟩  ████████████████████  50.3%
|01⟩  ▏                      0.2%
|10⟩  ▏                      0.1%
|11⟩  ████████████████████  49.4%

Pro tips

• Set [framework] to React + Plotly.js if you want copy-paste histogram code; set it to Vue + Three.js for the Bloch sphere rotation. Mixing frameworks in one prompt produces hedged, weaker code output.
• For [quantum_hardware], be specific: IBM Eagle (127-qubit) yields a connectivity map with actual heavy-hex topology. generic superconducting gets you a placeholder grid.
• The job queue section becomes significantly more useful if [user_types] names both the submitter role (grad student) and the approver role (lab admin) — the prompt will reflect access tiers in the UI.
• Pair the code output with a real qiskit.result.Result JSON fixture to stress-test the histogram component against realistic bitstring distributions before wiring to live hardware.
• If your platform is simulator-only (no real QPU), add that to [quantum_hardware] — otherwise the hardware monitor section will spec T1/T2 calibration panels you will never be able to populate.