What this prompt does
This prompt scaffolds a full security operations dashboard by encoding the visual and UX conventions that SOC analysts actually expect — not a generic dark theme, but the specific command-center aesthetic where color carries operational meaning. Red is critical, amber is warning, green is healthy, cyan is informational. That color contract is baked into the template, so the AI can't drift into decorative choices that would confuse a trained analyst under pressure.
The structured output sections map directly to real SOC workflow: alert triage happens in the feed, situational awareness comes from the overview cards, deep investigation lives in the detail panel, and the severity matrix gives teams a shared risk vocabulary. By naming these surfaces explicitly, the prompt forces the AI to produce a coherent system rather than isolated components that don't talk to each other.
The anti-pattern rules are where this prompt earns its keep. Explicitly banning light colors, rounded friendly cards, and slow animations isn't aesthetic preference — it's domain knowledge. A pulsing animation on a critical alert is a response cue. A smooth 500ms card transition is a liability when someone is triaging an active breach.
When to use it
- Building an MVP security dashboard for a startup SIEM, XDR, or EDR product and needing a credible reference UI before hiring a design team.
- Prototyping a SOC analyst workstation interface to validate information hierarchy with real users before engineering commits to a component library.
- Designing a managed security service provider (MSSP) client portal that needs to convey authority and operational seriousness to customers.
- Creating a threat intelligence platform UI where data density and readability at a glance are non-negotiable requirements.
- Generating a component-level starting point for the alert feed specifically, using the
[framework]variable to target React, Vue, or plain HTML/CSS output.
Example output
For platform_purpose: "enterprise endpoint detection and response", user_roles: "tier-1 and tier-2 SOC analysts", data_feeds: "CrowdStrike Falcon telemetry, Splunk alerts, Jira tickets", framework: "React + Tailwind", the AI returns a React component roughly like:
// AlertFeed.jsx — severity-sorted, auto-scrolling
const SEVERITY_STYLES = {
critical: 'bg-red-900 border-red-500 text-red-200 animate-pulse',
high: 'bg-amber-900 border-amber-500 text-amber-200',
medium: 'bg-yellow-900 border-yellow-600 text-yellow-200',
low: 'bg-slate-800 border-slate-600 text-slate-300',
info: 'bg-cyan-950 border-cyan-700 text-cyan-300',
};
const SEVERITY_WEIGHT = { critical: 4, high: 3, medium: 2, low: 1, info: 0 };
const sortedAlerts = alerts.sort(
(a, b) => SEVERITY_WEIGHT[b.severity] - SEVERITY_WEIGHT[a.severity]
|| new Date(b.timestamp) - new Date(a.timestamp)
);
Alongside that: four summary cards (Open Incidents, MTTR, Active Threats, Blocked Attacks) with monospace timestamp footers, and an expandable incident detail panel with IOC list and remediation checklist.
Pro tips
- Lock the framework variable to your stack early. The generated code quality diverges sharply between
"React + Tailwind"and just"React"— Tailwind gives the AI a concrete color vocabulary (bg-red-900,text-cyan-400) that maps cleanly to the color contract in the prompt. - Use CVSS 3.1 base scores as your severity matrix input. The prompt doesn't mandate a scoring standard, so specifying it in
[data_feeds](e.g., "Tenable.io findings with CVSS 3.1 scores") produces a matrix with meaningful axis labels rather than generic Low/Medium/High buckets. - Pair the detail panel output with your actual incident response runbook structure. If your team uses a specific IR framework (NIST, PICERL), mention it in
platform_purpose— the remediation steps section in the detail panel will mirror those phases. - The
[user_roles]variable controls information density. Tier-1 analysts need triage speed; threat hunters need raw IOC data. Specifying both roles pushes the AI to design for two modes rather than collapsing them into one cluttered view. - Test the real-time feel before committing to the implementation. The prompt specifies auto-scroll and pulsing alerts, but the AI produces static markup by default. Ask for a follow-up with
setInterval-based mock data injection to validate the interaction pattern before wiring live WebSocket feeds.
