返回 html-ppt-skill
index.html
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Testing Safety Alert</title>
7 <link rel="stylesheet" href="../../../assets/fonts.css">
8 <link rel="stylesheet" href="../../../assets/base.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body class="tpl-testing-safety-alert">
12 <div class="deck">
13
14 <!-- 1. COVER -->
15 <section class="slide is-active">
16 <div class="ts-stripe"></div>
17 <div class="ts-chrome"><span class="ts-alert-tag">ai safety · 高优先级</span><span class="ts-page">01 / 08</span></div>
18 <div class="ts-kicker">2026 年最重要的一条判断</div>
19 <h1 class="ts-h1">别再追问<br><span class="strike">AI 会不会干活</span><br>开始问:<span class="red">它出事谁负责</span></h1>
20 <p class="ts-sub">AI 出错的代价,不再是一次 bad response 这么简单 —— 它可能一次性写 300 份工单、提 80 个 PR、发 5000 封邮件。</p>
21 <div class="ts-alert-box">
22 <h3>风险已经规模化</h3>
23 <p>「做错」成本 × N;「做对」收益 × N。<br>这就是为什么 <b>测试、验收、安全、风控</b> 会变成未来 3 年最贵的能力。</p>
24 </div>
25 <div class="ts-stripe-b"></div>
26 <div class="ts-footer"><span>AI SAFETY BRIEF · LEWIS · 2026.04</span><span>01 / 08</span></div>
27 </section>
28
29 <!-- 2. SECTION -->
30 <section class="slide">
31 <div class="ts-stripe"></div>
32 <div class="ts-chrome"><span class="ts-alert-tag amber">section · risk 分级</span><span class="ts-page">02 / 08</span></div>
33 <div style="margin:auto 0">
34 <div class="ts-kicker">Chapter One</div>
35 <h1 class="ts-h1" style="font-size:130px">先分 <span class="red">等级</span></h1>
36 <p class="ts-sub" style="font-size:28px">不是所有 AI 行为都同等危险。<br>先把「可撤销」和「不可撤销」分开,再谈流程。</p>
37 </div>
38 <div class="ts-stripe-b"></div>
39 <div class="ts-footer"><span>section · level taxonomy</span><span>02 / 08</span></div>
40 </section>
41
42 <!-- 3. CONTENT risk levels -->
43 <section class="slide">
44 <div class="ts-stripe"></div>
45 <div class="ts-chrome"><span class="ts-alert-tag">风险分级 · 3 levels</span><span class="ts-page">03 / 08</span></div>
46 <h2 class="ts-h2">三档风险,三种处理</h2>
47 <div class="ts-grid-3">
48 <div class="ts-card" style="border-top:4px solid var(--ts-green)"><div class="lbl">L1 · 绿色</div><h4>可撤销</h4><p>写 draft、生成图片、起草文档。<br>错了 Ctrl+Z,零代价。<br><b style="color:var(--ts-green)">策略:放开跑</b></p></div>
49 <div class="ts-card" style="border-top:4px solid var(--ts-amber)"><div class="lbl">L2 · 琥珀</div><h4>半可撤销</h4><p>发 draft 邮件、提 PR、改 staging 数据。<br>错了要道歉 / 回滚。<br><b style="color:var(--ts-amber)">策略:人工复核</b></p></div>
50 <div class="ts-card" style="border-top:4px solid var(--ts-red)"><div class="lbl">L3 · 红色</div><h4>不可撤销</h4><p>发真实邮件、付款、删库、删 prod 数据。<br>错了就真错了。<br><b style="color:var(--ts-red)">策略:硬卡 + 双人审</b></p></div>
51 </div>
52 <div class="ts-alert-box amber">
53 <h3>绝不要让 agent 自己升级</h3>
54 <p>L1 的任务不能自己变成 L2。授权必须是显式的、可撤销的、带过期时间的。</p>
55 </div>
56 <div class="ts-stripe-b"></div>
57 <div class="ts-footer"><span>risk · 3 levels</span><span>03 / 08</span></div>
58 </section>
59
60 <!-- 4. CODE -->
61 <section class="slide">
62 <div class="ts-stripe"></div>
63 <div class="ts-chrome"><span class="ts-alert-tag">policy as code</span><span class="ts-page">04 / 08</span></div>
64 <div class="ts-kicker">别用文档管规则 · 用代码管规则</div>
65 <h2 class="ts-h2">三十行 YAML,<br><span class="ts-highlight-red">红线硬卡</span></h2>
66 <pre class="ts-codebox"><span class="cm"># safety-policy.yaml · compiled → runtime guard</span>
67 <span class="kw">level_1_allow</span>:
68 - tools: [<span class="st">write_draft</span>, <span class="st">generate_image</span>, <span class="st">read_docs</span>]
69
70 <span class="kw">level_2_require_review</span>:
71 - tools: [<span class="st">send_email_draft</span>, <span class="st">open_pr</span>, <span class="st">write_staging_db</span>]
72 reviewer: <span class="st">human</span>
73
74 <span class="kw">level_3_hard_block</span>:
75 - tools: [<span class="st">send_real_email</span>, <span class="st">transfer_money</span>, <span class="st">delete_prod</span>]
76 unless: <span class="st">two_human_sign_off AND within_24h</span>
77
78 <span class="bad">forbidden_always</span>:
79 - <span class="bad">"r&#109; &#45;rf /"</span>
80 - <span class="bad">"dr&#111;p table"</span>
81 - <span class="bad">"force push &#111;rigin main"</span></pre>
82 <div class="ts-stripe-b"></div>
83 <div class="ts-footer"><span>policy · yaml-as-guard</span><span>04 / 08</span></div>
84 </section>
85
86 <!-- 5. CHART -->
87 <section class="slide">
88 <div class="ts-stripe"></div>
89 <div class="ts-chrome"><span class="ts-alert-tag amber">incident report · q1</span><span class="ts-page">05 / 08</span></div>
90 <h2 class="ts-h2">我们 Q1 的 <span class="red">12 起 AI 事故</span></h2>
91 <p class="ts-sub">幸好全部捕获在 staging。但每一起都能上生产。</p>
92 <svg viewBox="0 0 1040 360" style="width:100%;max-width:1040px;margin-top:18px" xmlns="http://www.w3.org/2000/svg">
93 <g font-family="Inter,sans-serif" font-size="14" fill="#4a4955">
94 <line x1="70" y1="320" x2="1000" y2="320" stroke="#eaecf3" stroke-width="2"/>
95 <!-- month columns: Jan Feb Mar, L1/L2/L3 stacked -->
96 <g transform="translate(120,0)">
97 <rect x="0" y="220" width="60" height="100" fill="#067647"/>
98 <rect x="0" y="160" width="60" height="60" fill="#d97706"/>
99 <rect x="0" y="130" width="60" height="30" fill="#e0314a"/>
100 <text x="30" y="345" text-anchor="middle" font-weight="700">Jan</text>
101 <text x="30" y="120" text-anchor="middle" font-weight="800" fill="#14141a">5</text>
102 </g>
103 <g transform="translate(320,0)">
104 <rect x="0" y="240" width="60" height="80" fill="#067647"/>
105 <rect x="0" y="200" width="60" height="40" fill="#d97706"/>
106 <rect x="0" y="180" width="60" height="20" fill="#e0314a"/>
107 <text x="30" y="345" text-anchor="middle" font-weight="700">Feb</text>
108 <text x="30" y="170" text-anchor="middle" font-weight="800" fill="#14141a">3</text>
109 </g>
110 <g transform="translate(520,0)">
111 <rect x="0" y="250" width="60" height="70" fill="#067647"/>
112 <rect x="0" y="220" width="60" height="30" fill="#d97706"/>
113 <rect x="0" y="210" width="60" height="10" fill="#e0314a"/>
114 <text x="30" y="345" text-anchor="middle" font-weight="700">Mar</text>
115 <text x="30" y="200" text-anchor="middle" font-weight="800" fill="#14141a">4</text>
116 </g>
117 <!-- legend -->
118 <g transform="translate(720,60)">
119 <rect x="0" y="0" width="16" height="16" fill="#e0314a"/><text x="24" y="13" font-weight="700">L3 不可撤销 (3)</text>
120 <rect x="0" y="26" width="16" height="16" fill="#d97706"/><text x="24" y="39" font-weight="700">L2 需复核 (4)</text>
121 <rect x="0" y="52" width="16" height="16" fill="#067647"/><text x="24" y="65" font-weight="700">L1 可恢复 (5)</text>
122 <text x="0" y="100" font-size="13" fill="#8a8892">全部被 safety-policy 在 runtime 拦下,</text>
123 <text x="0" y="118" font-size="13" fill="#8a8892">未进 prod。但 3 起 L3 非常惊险。</text>
124 </g>
125 </g>
126 </svg>
127 <div class="ts-stripe-b"></div>
128 <div class="ts-footer"><span>incident · q1 summary</span><span>05 / 08</span></div>
129 </section>
130
131 <!-- 6. CHECKLIST -->
132 <section class="slide">
133 <div class="ts-stripe"></div>
134 <div class="ts-chrome"><span class="ts-alert-tag green">red-team checklist</span><span class="ts-page">06 / 08</span></div>
135 <h2 class="ts-h2">上线前 <span class="red">必过 7 道题</span></h2>
136 <div class="ts-checklist">
137 <div class="ts-check ok"><div class="box">✓</div><div class="txt">它能删除东西吗?有人类 review 吗?能 60 秒内回滚吗?</div></div>
138 <div class="ts-check ok"><div class="box">✓</div><div class="txt">它的 prompt 注入能让它越权吗?(跑过红队提示词)</div></div>
139 <div class="ts-check"><div class="box">!</div><div class="txt">它处理 PII 吗?日志里是不是也有 PII?</div></div>
140 <div class="ts-check ok"><div class="box">✓</div><div class="txt">上下游失败时,它会不会开始乱改其他资源?</div></div>
141 <div class="ts-check"><div class="box">!</div><div class="txt">并发 100 个 agent 一起跑会不会死锁?</div></div>
142 <div class="ts-check ok"><div class="box">✓</div><div class="txt">错了能不能 <b>立刻</b> 停?(kill switch 能 2 秒内生效吗)</div></div>
143 <div class="ts-check"><div class="box">!</div><div class="txt">出事时有没有人值班?值班手册有没有 agent 专属章节?</div></div>
144 </div>
145 <div class="ts-stripe-b"></div>
146 <div class="ts-footer"><span>checklist · pre-launch</span><span>06 / 08</span></div>
147 </section>
148
149 <!-- 7. CTA -->
150 <section class="slide">
151 <div class="ts-stripe"></div>
152 <div class="ts-chrome"><span class="ts-alert-tag green">今晚就能动</span><span class="ts-page">07 / 08</span></div>
153 <h2 class="ts-h2">今晚先做 <span class="ts-highlight-red">三件事</span></h2>
154 <div class="ts-grid-3">
155 <div class="ts-card"><div class="lbl">1 · 分级</div><h4>给你的 agent<br>写 L1/L2/L3</h4><p>把所有工具列出来,标上等级。不标的一律按 L3。</p></div>
156 <div class="ts-card"><div class="lbl">2 · 写 policy</div><h4>policy.yaml<br>接 runtime</h4><p>不要信 prompt 里的 "be careful",要信执行层的硬卡。</p></div>
157 <div class="ts-card"><div class="lbl">3 · kill switch</div><h4>红按钮<br>能在 2 秒内停</h4><p>CTO / on-call 都得知道怎么按。演练一次。</p></div>
158 </div>
159 <div class="ts-alert-box green">
160 <h3>真正的安全不是 prompt,是流程</h3>
161 <p>prompt 会被注入,流程不会。—— 把保护放在不可被说服的一层。</p>
162 </div>
163 <div class="ts-stripe-b"></div>
164 <div class="ts-footer"><span>cta · tonight</span><span>07 / 08</span></div>
165 </section>
166
167 <!-- 8. THANKS -->
168 <section class="slide">
169 <div class="ts-stripe"></div>
170 <div class="ts-chrome"><span class="ts-alert-tag amber">please stay safe</span><span class="ts-page">08 / 08</span></div>
171 <div style="margin:auto 0">
172 <div class="ts-kicker">end of brief</div>
173 <h1 class="ts-h1" style="font-size:140px">谢谢 <span class="red">·</span> thanks</h1>
174 <p class="ts-sub" style="font-size:24px">policy.yaml 模板、红队 prompt 清单、事故复盘模板 —— 评论区扣「安全」。</p>
175 </div>
176 <div class="ts-stripe-b"></div>
177 <div class="ts-footer"><span>end of brief</span><span>08 / 08</span></div>
178 </section>
179
180 </div>
181 <script src="../../../assets/runtime.js"></script>
182 </body>
183 </html>
184
184 lines HTML