| 1 | # Claude Code Auto Mode — Design Spec |
| 2 | |
| 3 | > This document is the human-readable design narrative — rationale, audience, style, color choices, content outline. It is read once by downstream roles for context. |
| 4 | > |
| 5 | > The machine-readable execution contract lives in `spec_lock.md` (short form of color / typography / icon / image decisions). Executor re-reads `spec_lock.md` before every SVG page to resist context-compression drift. Keep the two files in sync; if they diverge, `spec_lock.md` wins. |
| 6 | |
| 7 | ## I. Project Information |
| 8 | |
| 9 | | Item | Value | |
| 10 | | ---- | ----- | |
| 11 | | **Project Name** | Claude Code Auto Mode | |
| 12 | | **Canvas Format** | PPT 16:9 (1280×720) | |
| 13 | | **Page Count** | 10 | |
| 14 | | **Design Style** | General Versatile — tech-forward, dark theme | |
| 15 | | **Target Audience** | Technical teams / AI safety engineers / developers | |
| 16 | | **Use Case** | Technical sharing, engineering blog presentation | |
| 17 | | **Created Date** | 2026-04-22 | |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## II. Canvas Specification |
| 22 | |
| 23 | | Property | Value | |
| 24 | | -------- | ----- | |
| 25 | | **Format** | PPT 16:9 | |
| 26 | | **Dimensions** | 1280×720 | |
| 27 | | **viewBox** | `0 0 1280 720` | |
| 28 | | **Margins** | Left/right 60px, top/bottom 50px | |
| 29 | | **Content Area** | 1160×620 | |
| 30 | |
| 31 | --- |
| 32 | |
| 33 | ## III. Visual Theme |
| 34 | |
| 35 | ### Theme Style |
| 36 | |
| 37 | - **Style**: General Versatile — tech-forward |
| 38 | - **Theme**: Dark theme |
| 39 | - **Tone**: Technical, innovative, security-focused, premium |
| 40 | |
| 41 | ### Color Scheme |
| 42 | |
| 43 | | Role | HEX | Purpose | |
| 44 | | ---- | --- | ------- | |
| 45 | | **Background** | `#0D1117` | Page background — deep space black | |
| 46 | | **Secondary bg** | `#161B22` | Card background, section containers | |
| 47 | | **Card bg** | `#1C2333` | Inner card / elevated surface | |
| 48 | | **Primary** | `#D4A574` | Title decorations, key section accents — warm amber (Anthropic brand resonance) | |
| 49 | | **Accent** | `#60A5FA` | Data highlights, links, tech elements — sky blue | |
| 50 | | **Secondary accent** | `#34D399` | Safety/success indicators — emerald green | |
| 51 | | **Body text** | `#E6EDF3` | Main body text — high-contrast light | |
| 52 | | **Secondary text** | `#8B949E` | Captions, annotations | |
| 53 | | **Tertiary text** | `#6E7681` | Supplementary info, footers | |
| 54 | | **Border/divider** | `#30363D` | Card borders, divider lines | |
| 55 | | **Success** | `#34D399` | Positive indicators | |
| 56 | | **Warning** | `#F97316` | Issue markers, danger highlights | |
| 57 | |
| 58 | ### Gradient Scheme |
| 59 | |
| 60 | ```xml |
| 61 | <!-- Title accent gradient --> |
| 62 | <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 63 | <stop offset="0%" stop-color="#D4A574"/> |
| 64 | <stop offset="100%" stop-color="#60A5FA"/> |
| 65 | </linearGradient> |
| 66 | |
| 67 | <!-- Background decorative glow --> |
| 68 | <radialGradient id="bgGlow" cx="75%" cy="25%" r="45%"> |
| 69 | <stop offset="0%" stop-color="#D4A574" stop-opacity="0.08"/> |
| 70 | <stop offset="100%" stop-color="#D4A574" stop-opacity="0"/> |
| 71 | </radialGradient> |
| 72 | |
| 73 | <!-- Blue accent glow --> |
| 74 | <radialGradient id="blueGlow" cx="25%" cy="75%" r="40%"> |
| 75 | <stop offset="0%" stop-color="#60A5FA" stop-opacity="0.06"/> |
| 76 | <stop offset="100%" stop-color="#60A5FA" stop-opacity="0"/> |
| 77 | </radialGradient> |
| 78 | ``` |
| 79 | |
| 80 | --- |
| 81 | |
| 82 | ## IV. Typography System |
| 83 | |
| 84 | ### Font Plan |
| 85 | |
| 86 | **Recommended preset**: P5 (English-primary) |
| 87 | |
| 88 | | Role | English | Fallback | |
| 89 | | ---- | ------- | -------- | |
| 90 | | **Title** | Arial | Helvetica, sans-serif | |
| 91 | | **Body** | Calibri | Arial, sans-serif | |
| 92 | | **Code** | Consolas | Monaco, monospace | |
| 93 | | **Emphasis** | Arial Black | Arial, sans-serif | |
| 94 | |
| 95 | **Font stack**: `"Arial", "Calibri", "Helvetica", sans-serif` |
| 96 | |
| 97 | ### Font Size Hierarchy |
| 98 | |
| 99 | **Baseline**: Body font size = 18px (dense content) |
| 100 | |
| 101 | | Purpose | Ratio | Size | Weight | |
| 102 | | ------- | ----- | ---- | ------ | |
| 103 | | Cover title | 3x | 54px | Bold | |
| 104 | | Chapter title | 2.2x | 40px | Bold | |
| 105 | | Content title | 1.7x | 30px | Bold | |
| 106 | | Subtitle | 1.3x | 24px | SemiBold | |
| 107 | | **Body content** | **1x** | **18px** | Regular | |
| 108 | | Annotation | 0.78x | 14px | Regular | |
| 109 | | Page number/date | 0.61x | 11px | Regular | |
| 110 | |
| 111 | --- |
| 112 | |
| 113 | ## V. Layout Principles |
| 114 | |
| 115 | ### Page Structure |
| 116 | |
| 117 | - **Header area**: 50px — page title + decorative accent line |
| 118 | - **Content area**: 600px — main content zone |
| 119 | - **Footer area**: 70px — source attribution / page number |
| 120 | |
| 121 | ### Layout Pattern Library |
| 122 | |
| 123 | | Pattern | Used In | |
| 124 | | ------- | ------- | |
| 125 | | **Single column centered** | P01 Cover, P10 Closing | |
| 126 | | **Asymmetric split (4:6)** | P04, P06, P07, P09 (image + text) | |
| 127 | | **Three-column cards** | P05 Threat model | |
| 128 | | **Vertical list with icons** | P08 Results | |
| 129 | | **Top-bottom split** | P02 Background, P03 Overview | |
| 130 | |
| 131 | ### Spacing Specification |
| 132 | |
| 133 | **Universal**: |
| 134 | |
| 135 | | Element | Value | |
| 136 | | ------- | ----- | |
| 137 | | Safe margin | 60px | |
| 138 | | Content block gap | 30px | |
| 139 | | Icon-text gap | 12px | |
| 140 | |
| 141 | **Card-based layouts**: |
| 142 | |
| 143 | | Element | Value | |
| 144 | | ------- | ----- | |
| 145 | | Card gap | 24px | |
| 146 | | Card padding | 24px | |
| 147 | | Card border radius | 12px | |
| 148 | |
| 149 | --- |
| 150 | |
| 151 | ## VI. Icon Usage Specification |
| 152 | |
| 153 | ### Source |
| 154 | |
| 155 | - **Library**: `chunk` (sharp rectilinear geometry) |
| 156 | - **Usage method**: Placeholder `{{icon:chunk/icon-name}}` |
| 157 | |
| 158 | ### Icon Inventory |
| 159 | |
| 160 | | Purpose | Icon Path | Page | |
| 161 | | ------- | --------- | ---- | |
| 162 | | Shield / security | `{{icon:chunk/shield-check}}` | P03, P05 | |
| 163 | | Terminal / code | `{{icon:chunk/terminal}}` | P01, P02 | |
| 164 | | Eye / observation | `{{icon:chunk/eye}}` | P07 | |
| 165 | | Filter / classification | `{{icon:chunk/filter}}` | P06 | |
| 166 | | Bug / threats | `{{icon:chunk/bug}}` | P05 | |
| 167 | | Lock / permissions | `{{icon:chunk/lock-closed}}` | P02, P06 | |
| 168 | | Layers / tiers | `{{icon:chunk/layers}}` | P06 | |
| 169 | | Chart / metrics | `{{icon:chunk/chart-bar}}` | P08 | |
| 170 | | Checkmark / approved | `{{icon:chunk/circle-checkmark}}` | P08, P10 | |
| 171 | | Robot / AI agent | `{{icon:chunk/robot}}` | P03, P05 | |
| 172 | | Bolt / fast | `{{icon:chunk/bolt}}` | P09 | |
| 173 | | Target / goal | `{{icon:chunk/target}}` | P04, P10 | |
| 174 | | Key / credentials | `{{icon:chunk/key}}` | P05 | |
| 175 | | Arrow trend up | `{{icon:chunk/arrow-trend-up}}` | P08 | |
| 176 | | Code | `{{icon:chunk/code}}` | P07 | |
| 177 | | Eye slash / hidden | `{{icon:chunk/eye-slash}}` | P09 | |
| 178 | | Server | `{{icon:chunk/server}}` | P04 | |
| 179 | | Warning / alert | `{{icon:chunk/gauge-high}}` | P08 | |
| 180 | |
| 181 | --- |
| 182 | |
| 183 | ## VII. Visualization Reference List |
| 184 | |
| 185 | | Visualization Type | Reference Template | Used In | |
| 186 | | ------------------ | ------------------ | ------- | |
| 187 | | comparison_table | `templates/charts/comparison_table.svg` | P08 — Classifier performance results | |
| 188 | | concentric_circles | `templates/charts/concentric_circles.svg` | P06 — Three-tier permission system | |
| 189 | |
| 190 | --- |
| 191 | |
| 192 | ## VIII. Image Resource List |
| 193 | |
| 194 | | Filename | Dimensions | Ratio | Intent | Purpose | Type | Status | |
| 195 | | -------- | ---------- | ----- | ------ | ------- | ---- | ------ | |
| 196 | | image.png | 1920×1920 | 1.00 | Side-by-side | Fig.1: Permission modes tradeoff space | Diagram | Existing | |
| 197 | | image_1.png | 1920×2002 | 0.96 | Side-by-side | Fig.2: System architecture | Diagram | Existing | |
| 198 | | image_2.png | 1920×1679 | 1.14 | Side-by-side | Fig.3: What the classifier sees | Diagram | Existing | |
| 199 | | image_3.png | 1920×1935 | 0.99 | Side-by-side | Fig.4: Two-stage pipeline | Diagram | Existing | |
| 200 | |
| 201 | --- |
| 202 | |
| 203 | ## IX. Content Outline |
| 204 | |
| 205 | ### Part 1: Introduction |
| 206 | |
| 207 | #### Slide 01 — Cover |
| 208 | |
| 209 | - **Layout**: Single column centered, dark hero with subtle radial glow |
| 210 | - **page_rhythm**: anchor |
| 211 | - **Title**: Claude Code Auto Mode |
| 212 | - **Subtitle**: A Safer Way to Skip Permissions |
| 213 | - **Info**: Anthropic Engineering · Mar 2026 |
| 214 | |
| 215 | #### Slide 02 — The Problem: Approval Fatigue |
| 216 | |
| 217 | - **Layout**: Top-bottom split — headline stat on top, explanation below |
| 218 | - **page_rhythm**: breathing |
| 219 | - **Title**: 93% of Permission Prompts Are Approved |
| 220 | - **Content**: |
| 221 | - Users approve 93% of prompts → approval fatigue sets in |
| 222 | - Two existing solutions: sandbox (safe but high-maintenance) or `--dangerously-skip-permissions` (zero maintenance, zero protection) |
| 223 | - Real incidents: deleting remote branches, uploading auth tokens, production DB migrations |
| 224 | |
| 225 | ### Part 2: How Auto Mode Works |
| 226 | |
| 227 | #### Slide 03 — What Is Auto Mode? |
| 228 | |
| 229 | - **Layout**: Top-bottom — headline definition + three key pillars in horizontal blocks |
| 230 | - **page_rhythm**: breathing |
| 231 | - **Title**: Auto Mode: Classifier-Delegated Approvals |
| 232 | - **Content**: |
| 233 | - Delegates permission decisions to model-based classifiers |
| 234 | - Middle ground between manual review and no guardrails |
| 235 | - Goal: catch dangerous actions misaligned with user intent, let the rest run freely |
| 236 | |
| 237 | #### Slide 04 — System Architecture |
| 238 | |
| 239 | - **Layout**: Asymmetric split (4:6) — image_1.png left, annotated highlights right |
| 240 | - **page_rhythm**: dense |
| 241 | - **Title**: Two Layers of Defense |
| 242 | - **Image**: image_1.png (Fig.2: System architecture) |
| 243 | - **Content**: |
| 244 | - **Input layer**: Prompt-injection probe scans tool outputs before they enter context |
| 245 | - **Output layer**: Transcript classifier (Sonnet 4.6) evaluates each action before execution |
| 246 | - Two-stage filter: fast single-token → chain-of-thought reasoning only if flagged |
| 247 | - Subagents run the same pipeline recursively |
| 248 | |
| 249 | ### Part 3: Threat Model & Permissions |
| 250 | |
| 251 | #### Slide 05 — Four Threat Categories |
| 252 | |
| 253 | - **Layout**: Four cards in 2×2 grid with icons |
| 254 | - **page_rhythm**: dense |
| 255 | - **Title**: Why an Agent Might Take Dangerous Action |
| 256 | - **Content**: |
| 257 | - {{icon:chunk/robot}} **Overeager behavior** — takes initiative beyond what user would approve |
| 258 | - {{icon:chunk/bug}} **Honest mistakes** — misunderstands blast radius |
| 259 | - {{icon:chunk/code}} **Prompt injection** — hijacked by planted instructions |
| 260 | - {{icon:chunk/key}} **Misalignment** — pursues its own goal (not observed in practice) |
| 261 | - Real examples: scope escalation, credential exploration, safety-check bypass |
| 262 | |
| 263 | #### Slide 06 — Three-Tier Permission System |
| 264 | |
| 265 | - **Layout**: Asymmetric split (5:5) — image.png left, tier breakdown right |
| 266 | - **page_rhythm**: dense |
| 267 | - **Title**: How Permission Decisions Work |
| 268 | - **Image**: image.png (Fig.1: Permission modes) |
| 269 | - **Visualization**: concentric_circles (conceptual reference) |
| 270 | - **Content**: |
| 271 | - **Tier 1**: Built-in safe-tool allowlist + user settings |
| 272 | - **Tier 2**: In-project file operations (no classifier call) |
| 273 | - **Tier 3**: Transcript classifier — shell commands, web fetches, external tools |
| 274 | |
| 275 | ### Part 4: Classifier Deep Dive |
| 276 | |
| 277 | #### Slide 07 — What the Classifier Sees |
| 278 | |
| 279 | - **Layout**: Asymmetric split (4:6) — image_2.png left, key design decisions right |
| 280 | - **page_rhythm**: dense |
| 281 | - **Title**: Reasoning-Blind by Design |
| 282 | - **Image**: image_2.png (Fig.3: What the classifier sees) |
| 283 | - **Content**: |
| 284 | - Strips assistant text → agent can't "talk" classifier into bad calls |
| 285 | - Strips tool results → primary prompt-injection defense |
| 286 | - Sees only user messages + bare tool call commands |
| 287 | - Being reasoning-blind is complementary to CoT monitoring |
| 288 | |
| 289 | #### Slide 08 — Evaluation Results |
| 290 | |
| 291 | - **Layout**: Vertical list — key metrics with visual emphasis |
| 292 | - **page_rhythm**: dense |
| 293 | - **Title**: Performance: The Honest Numbers |
| 294 | - **Visualization**: comparison_table |
| 295 | - **Content**: |
| 296 | - Three datasets: real traffic (n=10K), real overeager (n=52), synthetic exfil (n=1K) |
| 297 | - Full pipeline: **0.4% FPR** on real traffic, **17% FNR** on overeager actions, **5.7% FNR** on exfiltration |
| 298 | - Stage 1 alone: 8.5% FPR, 6.6% FNR overeager, 1.8% FNR exfil |
| 299 | - 17% FNR — classifier correctly identifies danger but misreads consent signals |
| 300 | |
| 301 | ### Part 5: Design & Future |
| 302 | |
| 303 | #### Slide 09 — Key Design Decisions |
| 304 | |
| 305 | - **Layout**: Asymmetric split (4:6) — image_3.png left, design highlights right |
| 306 | - **page_rhythm**: dense |
| 307 | - **Title**: Design Decisions That Matter |
| 308 | - **Image**: image_3.png (Fig.4: Two-stage pipeline) |
| 309 | - **Content**: |
| 310 | - {{icon:chunk/bolt}} **Two-stage classification**: Stage 1 fast filter (8.5% FPR) → Stage 2 reasoning (0.4% FPR); cache-hit efficiency |
| 311 | - {{icon:chunk/shield-check}} **Prompt-injection probe**: Two layers compound — must evade both input probe AND transcript classifier |
| 312 | - {{icon:chunk/target}} **Deny-and-continue**: Blocked actions → agent retries safer approach; 3 consecutive or 20 total denials → escalate to human |
| 313 | |
| 314 | #### Slide 10 — Closing |
| 315 | |
| 316 | - **Layout**: Single column centered, minimal with key takeaway |
| 317 | - **page_rhythm**: anchor |
| 318 | - **Title**: Substantially Safer Than No Guardrails |
| 319 | - **Content**: |
| 320 | - Auto mode catches enough dangerous actions to make autonomous operation substantially safer |
| 321 | - Not a replacement for careful human review on high-stakes infrastructure |
| 322 | - Expanding overeagerness testset, iterating on safety and cost |
| 323 | - Source: anthropic.com/engineering/claude-code-auto-mode |
| 324 | |
| 325 | --- |
| 326 | |
| 327 | ## X. Speaker Notes Requirements |
| 328 | |
| 329 | - **File naming**: Match SVG names (e.g., `01_cover.svg` → `notes/01_cover.md`) |
| 330 | - **Total duration**: ~15 minutes |
| 331 | - **Notes style**: Technical, conversational |
| 332 | - **Purpose**: Inform & educate |
| 333 | |
| 334 | --- |
| 335 | |
| 336 | ## XI. Technical Constraints Reminder |
| 337 | |
| 338 | ### SVG Generation Must Follow: |
| 339 | |
| 340 | 1. viewBox: `0 0 1280 720` |
| 341 | 2. Background uses `<rect>` elements |
| 342 | 3. Text wrapping uses `<tspan>` (`<foreignObject>` FORBIDDEN) |
| 343 | 4. Transparency defaults to `fill-opacity` / `stroke-opacity`; `rgba()` remains converter-compatible |
| 344 | 5. FORBIDDEN: `clipPath`, `mask`, `<style>`, `class`, `foreignObject` |
| 345 | 6. FORBIDDEN: `textPath`, `animate*`, `script` |
| 346 | 7. `marker-start` / `marker-end` conditionally allowed per shared-standards.md §1.1 |
| 347 | |
| 348 | ### PPT Compatibility Rules: |
| 349 | |
| 350 | - Prefer opacity on each child element; `<g opacity="...">` remains converter-compatible with an approximate-fidelity warning |
| 351 | - Image transparency uses overlay mask layer |
| 352 | - Inline styles only; external CSS and `@font-face` FORBIDDEN |
| 353 |