Sentinel by Kayzen
向工程师销售安全产品：每一项主张都必须可被证明。
- 年份
- 2026
- 制作周期
- 4 周
- 技术栈
- Next.js · React · TypeScript · Tailwind · Vercel
- 定位
- 设计
- 开发
- 技术 SEO
- 文案撰写
- 误报（官方声明）每个发现都附有可复现的 PoC
- 0
- 首次有效渲染由 CDN 分发的静态 HTML
- < 1 秒
- 个加载时调用的第三方域名
- 0
需要解决的问题。
背景
Sentinel 是 Kayzen Web 旗下的自主渗透测试平台。其 AI 智能体并不分析代码：它们运行应用程序，真正尝试利用漏洞，并为每个确认的漏洞附上可复现的概念验证（PoC）。这个网站是产品的商业展示窗口，也是申请试用的入口。
限制
目标受众——首席信息安全官（CISO）、技术负责人、平台团队——是对营销话术最不买账的一群人。一个承诺“全面防护”的安全网站，第一行就会失去可信度。网站必须激发兴趣而又绝不过度承诺，同时还要让前来比较三家服务商的非技术型管理者也能读懂。
对策
我们颠倒了惯常的层级：先证据，后承诺。首页首先展示一份真实报告的节选——漏洞、利用请求、建议的修复方案——然后才是卖点介绍。用语保留行业术语（PoC、误报、CVSS），因为读者懂这些词，刻意简化反而会被视为外行。
每一个设计取舍，及其理由。
默认深色，但不是为了装饰
深色主题是这个行业的惯例：安全工具生活在终端里。在这里它是功能性的——代码块和报告节选是页面上被阅读得最多的元素，深色背景能减少长时间阅读时的眩光。文字与背景的对比度保持在 7:1 以上，达到 AAA 级，而不只是 AA 级的最低要求。
把证据做成组件
一个可复用的“报告节选”组件：漏洞标题、CVSS 严重等级、请求、响应、修复方案。它在页面中出现四次，每次都是不同的案例。这是页面上唯一有动画的元素——注意力被引向购买决策真正发生的地方。
不用任何抽象插图
没有锁，没有盾牌，没有线框地球。所有视觉都是工具本身的截图。在这个市场上，通用图标是判断一款产品尚不存在的最可靠信号。
可控的信息密度
行宽限制在 68 个字符以内，使用 clamp() 实现流式字号比例。内容天生密集；应该由版式来弥补，而不是让读者去承受。
项目配色
墨色
#0B1120
页面背景
石板灰
#1E293B
卡片与代码块
信号蓝
#38BDF8
链接与强调色
警报红
#F43F5E
仅用于严重级别
字体系统
标题字体
Inter（字重 600–800）
正文字体
Inter（400–500）
一套字体，两种角色。报告节选使用系统等宽字体栈：无需下载任何额外字体。
幕后的技术实现。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js 静态渲染
每个页面都在构建时生成。产品展示网站没有任何动态数据需要提供：常驻的服务端渲染只会徒增延迟和攻击面。完整的 HTML 直接由 CDN 分发。
加载时零第三方依赖
没有 Google 字体，没有外部统计脚本，没有聊天 iframe。在安全类网站上，首次渲染时调用的每一个第三方域名都是反对自己的论据——也是供应链中一个真实的入侵点。
完整的安全响应头
严格的 Content-Security-Policy、带 preload 的 HSTS、Referrer-Policy、默认关闭的 Permissions-Policy。这是对一家安全厂商的最低期待——而技术型潜在客户的第一反应，就是打开“网络”面板去核实。
坦然采用开源引擎
执行引擎基于开源项目 Strix。网站明确说明并附上链接，而不是加以掩盖：对于这类受众，技术组件可追溯，胜过一个黑盒。
网站如何被搜索到。
比较类搜索，而非泛泛的搜索
“Pentest automatisé”（自动化渗透测试）、“DAST vs pentest manuel”（DAST 与人工渗透测试对比）、“faux positifs scanner de vulnérabilités”（漏洞扫描器误报）：这些是漏斗中段的搜索词，搜索量低，意图极强。去争夺“网络安全”这样的词毫无意义。
SoftwareApplication 结构化标记
SoftwareApplication 类型的 JSON-LD，包含类别、操作系统和报价，外加一个针对常见顾虑的 FAQPage（“智能体会不会搞坏我的生产环境？”）。AI 助手引用的正是这些回答。
精心打磨的社交元数据
这款产品在同行之间通过 Slack 和 LinkedIn 传播。因此 Open Graph 和 Twitter 卡片被当作一个获客渠道来对待，配有专门设计的图片，而不是直接用标志。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
正文达到 AAA 级对比度
深色主题的经典陷阱：深灰底上的浅灰字。所有颜色组合都经过测量；正文对比度为 12:1，次要标签为 7:1。
代码块可用键盘浏览
报告节选在移动端可以横向滚动：它们可获得焦点，并被标注为可滚动区域，否则没有鼠标就无法看到其中的内容。
交付了哪些内容。
- 首页——证据、承诺、试用
- 工作原理——一次智能体审计的完整周期
- 报告——交付物的构成
- 价格
- 文档与开源引擎
项目的推进过程。
需求界定
与产品团队访谈，确定要依次回应的顾虑。
内容
在任何设计稿之前，技术文案先经工程师审定。
设计
深色体系、证据组件、字号比例。
开发
Next.js 静态网站、安全响应头、性能预算。
上线
安全验收、响应头检查、Search Console。
