--- name: hps-true-blueprint en_name: "Present an Engineering Blueprint like a Principal Architect" zh_name: "像首席架构师一样讲工程蓝图" description: | Open Design's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org. en_description: | Open Design's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org. zh_description: | 像首席架构师一样讲工程蓝图——一份可商业交付的产品管理 Deck，围绕真实主题、证据链与决策目标组织。 tags: - "product-management" - "pm-feature-business-case-deck" - "product" - "roadmap" - "architecture" - "decision-deck" - "commercial-slide-agent" - "hps-true-blueprint" triggers: - "pm-feature-business-case-deck" - "product-management" - "Present an Engineering Blueprint like a Principal Architect" - "像首席架构师一样讲工程蓝图" - "product" - "roadmap" - "architecture" - "html deck" - "html slides" od: mode: deck surface: web upstream: "https://github.com/lewislulu/html-ppt-skill" preview: type: html entry: example.html design_system: requires: false speaker_notes: true animations: true example_prompt_i18n: zh-CN: "用「工程蓝图」把我的架构评审做成一套像工程图纸的单文件 HTML 幻灯片。从种子 example.html 出发——完整保留锁定的 token 表、40px 绘图网格底、图框装置和导航脚本，只替换幻灯片内容，架构图用内联 SVG 简图绘制，使用真实内容，不要 lorem ipsum。" category: "product-management" scenario: "product" example_prompt: "Create \"Present an Engineering Blueprint like a Principal Architect\" as a decision-grade Product management deck in this template's own visual system. Subject: Open Design's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Audience: engineering org. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can cross-functional reviewers agree on the next irreversible step." --- # True Blueprint（工程蓝图） A locked single-theme deck skin ported from the `blueprint` theme of the upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) (36 themes × 31 layouts). The whole deck reads as one engineering drawing set: blueprint-blue paper, white drafting grid, dashed component outlines, mono lettering, amber redline annotations. **Start from `example.html`. Replace content only. Never rewrite the design system or the runtime script. The theme is LOCKED — no theme cycling, no colors or fonts outside this spec.** > Sibling note: `html-ppt-knowledge-arch-blueprint` is the *light* blueprint > variant (cream paper + rust-red ink). This plugin is the opposite-polarity > scheme — dark blue field, white ink. Do not blend the two palettes. ## Locked token sheet (`:root` — reproduce verbatim) ```css :root{ --bg:#0b3a6f; --bg-soft:#0a3260; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.1); --border:rgba(190,220,255,.3); --border-strong:rgba(190,220,255,.55); --text-1:#e8f3ff; --text-2:#b8d4f0; --text-3:#7da8cf; --accent:#ffffff; --accent-2:#aee1ff; --accent-3:#ffd27a; --good:#8ef0a6; --warn:#ffd27a; --bad:#ff8a96; --grad:linear-gradient(135deg,#ffffff,#aee1ff); --grad-soft:linear-gradient(135deg,#0a3260,#0b3a6f); --radius:2px; --radius-sm:2px; --radius-lg:4px; --shadow:none; --shadow-lg:0 16px 40px rgba(0,0,0,.3); --font-sans:'JetBrains Mono','IBM Plex Mono',Menlo,monospace; --font-serif:'JetBrains Mono',Menlo,monospace; --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace; --font-display:'JetBrains Mono',Menlo,monospace; --letter-tight:-.02em; --letter-normal:0; --ease:cubic-bezier(.4,0,.2,1); --grid-line:rgba(255,255,255,.06); --ink:rgba(190,220,255,.45); } ``` Color roles: white `--accent` for headline emphasis, ice-blue `--accent-2` for ink lines / connectors / progress, amber `--accent-3` strictly for annotations, callouts and the single highlighted element per slide. `--good/--warn/--bad` (mint/amber/coral) are redline-annotation semantics — use them in eyebrows and ticks only, never as fills. ## Typography - **One family everywhere.** Every font slot is `'JetBrains Mono', monospace`. The only allowed remote resource is the JetBrains Mono Google Fonts `@import` (weights 300/400/500/700/800 + italic 400). - `.h1`/`.h2` are UPPERCASE, weight 800/700, `clamp()`-fluid (h1: `clamp(40px,5vw,64px)`). - `.kicker` is a `// slash-comment` style label: 13px, 700, `.18em` letterspacing, uppercase, ice-blue. `.eyebrow`: 12px, `.22em`, `--text-3`. - `.lede` is weight 300, `--text-2`, max-width 64ch. ## Signature devices (what makes it a blueprint) 1. **Drafting-grid canvas** — body background is two 1px `linear-gradient` layers at `rgba(255,255,255,.06)` on a 40px cell over solid `#0b3a6f`. Never replace with a flat fill or an image. 2. **Double drawing frame** — every slide draws `.slide::before` (1px solid `--ink`, inset 28px) and `.slide::after` (1px dashed, inset 34px). 3. **Dashed translucent cards** — `.card` is `rgba(255,255,255,.04)` with a **1px dashed** `rgba(190,220,255,.45)` border, 2px radius, no shadow. 4. **Title block** — the cover carries a `.title-block` strip of bordered cells: `DWG NO. / REV. / SCALE / DATE` (REV value in amber). 5. **Construction-line section numbers** — `.section-num` giant digits, transparent fill, `1.5px -webkit-text-stroke` in `--ink`. 6. **Hatched charts** — `.bar-chart .bar` fills with a 45° `repeating-linear-gradient` cross-hatch (ice-blue; `.hot` = amber for the one highlighted bar), 1px ice-blue outline, labels uppercase. 7. **SVG schematics** — diagrams are inline SVG: dashed `rect` components (`stroke-dasharray:6 4`), the focal component in solid white 2px, ice-blue connectors with arrowhead ``s, dashed data-flow lines (`stroke-dasharray:2 5`), and amber dimension-line annotations. No diagram/chart libraries, no remote images. 8. **Bracketed step counters** — `.steps .card::before` renders `[01] [02] …` in amber mono. 9. **Dashed spec tables** — `.spec-table` cells use 1px dashed borders and read like a materials schedule. ## Page structure & runtime (keep the seed verbatim) - Each page: `
` inside `
` — a horizontal scroll-snap strip; every slide is `flex:0 0 100vw` × `100vh`, padding `72px 96px`, designed at a 1280×720 16:9 baseline and fluid via `clamp()`. One screen per slide — no internal scrolling; split content into more slides instead. - Fixed chrome: `.deck-header` (project name + locked theme chip), `.deck-footer` (attribution + `N / total` counter), 2px `.progress-bar`. - Navigation script: `←`/`→`/`Space`/`PageUp`/`PageDown`/`Home`/`End`; `#/N` hash routing via try/catch-wrapped `history.replaceState` (srcdoc-safe); dual window/document capture-phase key listeners deduped by Event identity; scroll sync; resize re-snap; body auto-focus. These solve real iframe-host bugs — do not "simplify" them away. - **No theme cycling.** Unlike the upstream html-ppt-studio system this family is ported from, there is no `T` key and no `themes` array — the skin is locked. - Animations: only the inlined subset — `.anim-rise-in`, `.anim-fade-up`, `.anim-stagger-list`. At most one hero animation plus one stagger per slide. - Speaker notes: one hidden `
…
` per slide, 1–3 sentences, never visible. ## Layout masters (all demonstrated in example.html) | # | master | use for | |---|---|---| | 1 | drawing-sheet cover + title block | opening | | 2 | sheet-index toc (3 accent cards) | agenda | | 3 | section divider (outline-stroke number) | chapter breaks | | 4 | inline-SVG architecture schematic | system/topology pages | | 5 | two-column notes + dashed spec table | rules, specs | | 6 | KPI grid (g4 cards) | metrics | | 7 | hatched bar chart | distributions, budgets | | 8 | bracketed process steps (g4) | plans, pipelines | | 9 | rev comparison (bad vs good cards) | before/after | | 10 | mono pull-quote sign-off | quote + closer | Composition default: cover → sheet index → (divider → 2–4 content pages) × N → sign-off. Target 8–15 pages. ## Authoring checklist 1. Copy `example.html`; keep all `