# Hps True Blueprint

> True Blueprint deck theme — blueprint-blue #0b3a6f field under a 40px white drafting grid, dashed-border translucent cards, white/ice-blue ink with amber annotations, all JetBrains Mono, 2px corners, zero shadows. Drawing-sheet chrome (title block, sheet index, construction-line numbers, hatched bars, SVG schematics). Use for system-architecture decks, infra migration reviews, engineering design…

- **Type:** Skill
- **Install:** `agentstack add skill-nexu-io-open-design-hps-true-blueprint`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nexu-io](https://agentstack.voostack.com/s/nexu-io)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [nexu-io](https://github.com/nexu-io)
- **Source:** https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/hps-true-blueprint
- **Website:** https://open-design.ai

## Install

```sh
agentstack add skill-nexu-io-open-design-hps-true-blueprint
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `` blocks and the `` 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`](https://github.com/lewislulu/html-ppt-skill)
(© lewis <sudolewis@gmail.com>), theme `blueprint`. The LICENSE file
ships alongside this skill — keep it in place when redistributing.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nexu-io](https://github.com/nexu-io)
- **Source:** [nexu-io/open-design](https://github.com/nexu-io/open-design)
- **License:** Apache-2.0
- **Homepage:** https://open-design.ai

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nexu-io-open-design-hps-true-blueprint
- Seller: https://agentstack.voostack.com/s/nexu-io
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.