---

name: hps-true-blueprint en_name: "Present an Engineering Blueprint like a Principal Architect" zh_name: "像首席架构师一样讲工程蓝图" description: | OpenDesign'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: | OpenDesign'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: OpenDesign'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 (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)

: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 <marker>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: <section class="slide" data-title="..."> inside <div class="deck" id="deck"> — 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 <div class="notes">…</div> 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 <style> blocks and the <script> verbatim.
2. Replace the 11 demo slides with your planned master sequence; keep the data-title attributes meaningful.
3. Update the header project name, cover title block (DWG NO./REV./DATE) and footer attribution; the counter total is computed by the script.
4. Real content, real numbers — no lorem ipsum, no placeholder images.
5. Amber appears at most once-as-focus per slide; everything else is white/ice-blue ink.
6. Verify: arrows + Space navigate, #/4 deep-links, no slide overflows vertically, no color or font outside this spec.

Attribution

Palette, token vocabulary, and the blueprint visual language come from the upstream MIT-licensed lewislulu/html-ppt-skill (© lewis <sudolewis@gmail.com>), theme blueprint. The LICENSE file ships alongside this skill — keep it in place when redistributing.