个人项目 · 安全运营平台原型 · 2026
CyberGuard
一个以可运行原型形式存在的安全运营平台——我白天为政府客户做的、永远无法展示的 SOC 工作的可公开孪生。
可运行原型 · 模拟数据要解决的问题
我最强的界面作品——为政府客户设计的 SOC 仪表盘与智能体 AI 平台——恰恰是作品集永远无法展示的那部分。
我做了什么
于是我造了它的公开孪生：一个虚构品牌下的安全运营平台，有实时 3D 威胁地球仪、事件处理队列，以及被可视化的六智能体 AI 流水线——独立设计并实现。
结果如何
一个跑在模拟数据上的真实产品：三个高密度实时界面，展示保密工作所锤炼出的手艺，而其中没有任何机密内容。
亲手试试真的
这是真实的原型，直接运行在本页里——不是视频。转动地球仪、点开一个事件、问问 AI 助手。建议在桌面端体验。
它为什么存在
在 Ensign InfoSecurity，我设计 SOC 仪表盘，并主导一个曾在 GovWare 展出的智能体 AI 平台的界面——但那些工作服务于政府客户，无法公开。一份只能说「相信我，真正的作品是保密的」的作品集，是在索要信任。CyberGuard 就是回答：同一类产品——分析师工具、安全遥测、AI 智能体——在我自己的时间里，从零重建，挂在虚构品牌下、跑在模拟数据上，让手艺本身变得可以被检验。
这里的一切都是示意性的：告警、事件与主机均为虚构，品牌（Rayonics Security）是发明的，唯一的实时数据来自公开的 CISA 安全通告源。
项目概述
三个界面，三种节奏。威胁地图是环境级的——挂在墙上扫一眼的屏幕，以 three.js 地球仪为中心，严重度是它唯一的色彩语言。事件队列是工作台——高密度行、硬筛选，以及带 MITRE 技术映射的证据抽屉。而智能体页把看不见的东西变得可见：六个专职 AI 智能体被画成房间，有交接、有事件日志，流水线尽头是一份自动生成的合规报告。
我的角色
独立完成：产品概念、视觉定调、交互设计，以及 React/TypeScript 实现——包括 three.js 地球仪、像素风智能体形象，和模拟 SOC 背后的数据模型。利用晚间时间两周建成，Claude Code 作为结对伙伴。
三个界面
截自运行中的原型。点击任意截图可查看大图。
背后的设计决策
SOC 界面的好坏，是在分析师一周里最糟糕的那五分钟被评判的。下面每个决策，都是为那五分钟做的。
高密度，但层级森严
分析师是扫视，不是阅读。威胁级别、速率与拦截率固定在一条常驻横带里；地球仪是环境背景；唯一会动的是事件流。横带以下的任何东西，都不许索要它没挣到的注意力。
严重度是语言，不是装饰
一套色阶——从严重到轻微——被地球仪弧线、事件流圆点、筛选标签与事件行以完全相同的方式使用。颜色一旦出现就意味着严重度；平台上没有其他东西被允许使用这些色相。
一条可以看着它工作的 AI 流水线
多智能体系统先在信任上失败，然后才在输出上失败。把六个智能体画成房间——有可见的交接、事件日志和最终报告——让不透明的流水线变成分析师一眼就能审计的东西。这是我日常工作的教训，在公开场合重述一遍。
只在赌注允许的地方俏皮
像素风智能体刻意做得温暖——是 AI 同事，不是黑箱。而真正做决定的事件队列，不允许自己有一丝俏皮。知道俏皮被允许住在哪里，正是这一页想展示的设计判断力。
构建中的 AI
这个原型同时记录了我现在与 AI 协作的方式：Claude Code 作为实现上的结对伙伴；我为同事写的内部提示词指南，让团队能用同样的方法搭页面；以及产品内置的、带服务商回退链的 AI 助手。它所可视化的智能体流水线，正是我在工作中主导的同一模式——把 LangGraph/CrewAI 编排变成分析师信任的界面。
状态与坦诚
CyberGuard 是原型，并且直说了：模拟数据、虚构品牌、没有真实遥测。但它所展示的是真实的——信息层级、状态设计、three.js 实现，以及这一切由一个人设计并交付的事实。
下一个案例: Panik! by SGAG