Dashboardsystem

Medical Clinical

77
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with sterile clinical precision — cool whites, diagnostic blues, vital sign monitors, and the calm authority of a well-designed medical interface. Precision saves lives.

medicalclinicalvital signssterileblue

Added February 16, 2026 by unslop.dev

Example output

Vital signs monitor

Patient Vitals

Stable

Heart Rate

72

bpm → normal

Blood Pressure

120/80

mmHg → normal

Temperature

38.1

°C ↑ elevated

SpO2

98

% → normal

View code
<div style="padding: 1.5rem; background: #f8fafb;">
  <div style="max-width: 32rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
      <h3 style="font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; font-weight: 600; color: #1e293b; margin: 0;">Patient Vitals</h3>
      <div style="display: flex; align-items: center; gap: 0.375rem;">
        <span style="width: 6px; height: 6px; border-radius: 50%; background: #16a34a;"></span>
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #16a34a; font-weight: 500;">Stable</span>
      </div>
    </div>
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;">
      <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; border-top: 2px solid #16a34a;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.375rem 0;">Heart Rate</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 1.75rem; font-weight: 700; color: #1e293b; margin: 0; line-height: 1;">72</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; color: #94a3b8; margin: 0.125rem 0 0 0;">bpm → normal</p>
      </div>
      <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; border-top: 2px solid #16a34a;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.375rem 0;">Blood Pressure</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 1.75rem; font-weight: 700; color: #1e293b; margin: 0; line-height: 1;">120<span style="font-size: 0.875rem; color: #64748b;">/</span>80</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; color: #94a3b8; margin: 0.125rem 0 0 0;">mmHg → normal</p>
      </div>
      <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; border-top: 2px solid #f59e0b;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.375rem 0;">Temperature</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 1.75rem; font-weight: 700; color: #f59e0b; margin: 0; line-height: 1;">38.1</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; color: #f59e0b; margin: 0.125rem 0 0 0;">°C ↑ elevated</p>
      </div>
      <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; border-top: 2px solid #16a34a;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.375rem 0;">SpO2</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 1.75rem; font-weight: 700; color: #1e293b; margin: 0; line-height: 1;">98</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; color: #94a3b8; margin: 0.125rem 0 0 0;">% → normal</p>
      </div>
    </div>
  </div>
</div>

Clinical action buttons

View code
<div style="padding: 1.5rem; background: #f8fafb; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #2563eb; color: white; border: none; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Order Test</button>
  <button style="background: white; color: #1e293b; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">View History</button>
  <button style="background: white; color: #dc2626; border: 1px solid #fecaca; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Flag Alert</button>
  <button style="background: #f1f5f9; color: #94a3b8; border: none; border-radius: 6px; padding: 0.5rem 1.25rem; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: not-allowed;">Discharged</button>
</div>

Patient info panel

JD

Jane Doe

ID: PT-2026-00847 · F · 34y

Admitted

Ward

3-East, Bed 12

Attending

Dr. K. Patel

Admitted

Feb 14, 2026

Allergies

Penicillin Latex (mild)
View code
<div style="padding: 1.5rem; background: #f8fafb;">
  <div style="max-width: 30rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
    <div style="padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <div style="width: 36px; height: 36px; border-radius: 50%; background: #eff6ff; border: 1px solid #bfdbfe; display: flex; align-items: center; justify-content: center;">
          <span style="font-family: -apple-system, sans-serif; font-size: 0.75rem; font-weight: 600; color: #2563eb;">JD</span>
        </div>
        <div>
          <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 600; color: #1e293b; margin: 0;">Jane Doe</p>
          <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #64748b; margin: 0;">ID: PT-2026-00847 · F · 34y</p>
        </div>
      </div>
      <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.6875rem; color: white; background: #16a34a; padding: 0.125rem 0.5rem; border-radius: 9999px; font-weight: 500;">Admitted</span>
    </div>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid #e2e8f0;">
      <div style="padding: 0.875rem 1.25rem; border-right: 1px solid #e2e8f0;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.25rem 0;">Ward</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; color: #1e293b; margin: 0;">3-East, Bed 12</p>
      </div>
      <div style="padding: 0.875rem 1.25rem; border-right: 1px solid #e2e8f0;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.25rem 0;">Attending</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; color: #1e293b; margin: 0;">Dr. K. Patel</p>
      </div>
      <div style="padding: 0.875rem 1.25rem;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.25rem 0;">Admitted</p>
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; color: #1e293b; margin: 0;">Feb 14, 2026</p>
      </div>
    </div>
    <div style="padding: 0.875rem 1.25rem;">
      <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.375rem 0;">Allergies</p>
      <div style="display: flex; gap: 0.375rem;">
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: 0.0625rem 0.375rem; border-radius: 4px;">Penicillin</span>
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.6875rem; color: #f59e0b; background: #fffbeb; border: 1px solid #fde68a; padding: 0.0625rem 0.375rem; border-radius: 4px;">Latex (mild)</span>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a medical/clinical aesthetic — the visual language of hospital monitoring systems, diagnostic dashboards, and healthcare applications. Cool sterile whites, diagnostic blue accents, structured data grids, and the calm authority that comes from interfaces where clarity is literally life-or-death. Clean, precise, trustworthy.

VISUAL RULES:
- Background: Clinical white (#f8fafb) — slightly cool-tinted. Panels in pure white (#ffffff) with very subtle borders. Everything feels sterile and clean.
- Primary: Diagnostic blue (#2563eb). The blue of hospital scrubs, monitoring equipment, and trust. For primary actions, selected states, and key data.
- Secondary: Clinical teal (#0891b2) for secondary information, charts, and supplementary data.
- Alert colors: Red (#dc2626) for critical/danger. Amber (#f59e0b) for warnings. Green (#16a34a) for normal/healthy. These are FUNCTIONAL colors only — never decorative.
- Text: Dark navy-gray (#1e293b) for primary. Medium gray (#64748b) for secondary. Light gray (#94a3b8) for tertiary.
- Typography: Clean, precise sans-serif. `font-family: -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif`. System fonts for maximum readability. Numbers in tabular figures for alignment.
- Borders: 1px solid cool gray (#e2e8f0). Subtle but visible — every boundary matters.
- Border radius: 6-8px on cards and buttons. Moderate — professional, not playful.
- Spacing: Structured and consistent. 4px grid. Sections clearly separated. Labels close to their data. Dense but never cramped.
- Data display: Large numbers for vitals, small labels. Right-aligned numbers. Consistent units. Everything tabular.

SPECIFIC PATTERNS:
- Cards/panels: White bg, 1px cool gray border, 8px radius. Optional thin blue top border for active/selected state.
- Buttons primary: bg-blue-600 text-white, rounded-md. Clean, authoritative. No shadows needed.
- Buttons secondary: White bg, gray border, dark text.
- Buttons danger: Red bg or red outlined. Only for genuinely critical actions.
- Vital signs: Large number, small unit label below, trend indicator (↑ ↓ →) with color coding.
- Status badges: Small, rounded-full pills. Green/amber/red fill with white text. Clear labels.
- Tables: Full borders, alternating rows, compact cells. Header row in light gray bg.
- Charts: Simple, clean. Blue/teal color coding. Minimal decoration.

ANTI-PATTERNS:
- No decorative elements or ornaments. Function over form.
- No warm colors in the base palette (no terracotta, brown, gold).
- No dark mode by default. Clinical environments need bright, readable interfaces.
- No serif fonts. Sans-serif only for clinical readability.
- No heavy shadows or depth effects. Keep it flat and sterile.
- No playful elements — no emojis, no bubbly shapes, no casual language.

Related prompts

[A-01] System Overview
dim: cpu load 34.2 %
dim: memory 12.8 / 32 GB
dim: requests 1,847 /min
rev. 2026-02-16 scale: 1:1
Dashboard

Blueprint Technical

🔥86system

Generates UI with the precision aesthetic of architectural blueprints — white lines on deep blue, grid overlays, dashed construction lines, and technical annotation styling. Every pixel is measured.

QUERY RESULT — 4 ROWS — 0.003s
ID Endpoint Latency Req/s Status
001 /api/users 12ms 4,231 [OK]
002 /api/orders 34ms 1,847 [OK]
003 /api/payments 892ms 203 [ERR]
004 /api/analytics 67ms 982 [PENDING]
last updated: 2026-02-16T14:32:07Z | source: prod-monitor-03 | ttl: 30s
| rows: 4 of 4 | page: 1/1
Dashboard

Data Brutalism

🔥79system

Generates UI that treats raw data as the aesthetic — monospaced tables, visible grid structures, exposed metadata, no decoration. The beauty of information presented without apology. Bloomberg Terminal meets Craigslist.

Reactor Core
Nominal
Temp
347°C
Pressure
15.2MPa
Output
1.21GW
Warning: Threshold Exceeded

Coolant flow rate has dropped below minimum operational threshold. Current: 12.3 m³/s (min: 15.0 m³/s).

Dashboard

Dark Industrial

🔥76system

Generates UI with the feel of an industrial control room — dark steel panels, amber/orange warning accents, monospace readouts, riveted edges, and the serious utility of heavy machinery interfaces.