Skip to content
Skillpedia
Documentation101k · #559

hps-true-blueprint

Helps your agent explain the architecture of a design system. It details components and their interactions. Useful for engineering and product management teams.

What it does

This skill creates presentations with an engineering blueprint look and feel. It uses a specific theme with a dark blue background, white lines, and amber annotations, mimicking a technical drawing.

When to use it

  • ✓To create presentations with a unique, technical visual style.
  • ✓When presenting system diagrams or architectures.
  • ✓For documents that require a formal, engineering-like appearance.

Example of what to ask your AI

“Create a presentation with the engineering blueprint theme to explain our new system's architecture.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-true-blueprint/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-true-blueprint/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The skill applies a predefined design that imitates an engineering blueprint, using specific colors, fonts, and graphic elements like dashed lines and grids. You only need to add your content.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill hps-true-blueprint

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/hps-true-blueprint/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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

…

FAQ

Can I change the colors or fonts?

No, the design is fixed to maintain the engineering blueprint look. You cannot change the colors or fonts.

How do I add my content?

You replace the example content with your text and diagrams, keeping the theme's structure and design.

What kind of charts does it support?

It supports bar charts with hatching and SVG diagrams with dashed lines and highlighted components.

Details

Original description by the author

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.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#559
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills