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
Ready-to-paste message
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-blueprintOr 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.mdTechnical 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-blueprintis 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/.h2are UPPERCASE, weight 800/700,clamp()-fluid (h1:clamp(40px,5vw,64px))..kickeris a// slash-commentstyle label: 13px, 700,.18emletterspacing, uppercase, ice-blue..eyebrow: 12px,.22em,--text-3..ledeis weight 300,--text-2, max-width 64ch.
Signature devices (what makes it a blueprint)
- Drafting-grid canvas — body background is two 1px
linear-gradientlayers atrgba(255,255,255,.06)on a 40px cell over solid#0b3a6f. Never replace with a flat fill or an image. - Double drawing frame — every slide draws
.slide::before(1px solid--ink, inset 28px) and.slide::after(1px dashed, inset 34px). - Dashed translucent cards —
.cardisrgba(255,255,255,.04)with a 1px dashedrgba(190,220,255,.45)border, 2px radius, no shadow. - Title block — the cover carries a
.title-blockstrip of bordered cells:DWG NO. / REV. / SCALE / DATE(REV value in amber). - Construction-line section numbers —
.section-numgiant digits, transparent fill,1.5px -webkit-text-strokein--ink. - Hatched charts —
.bar-chart .barfills with a 45°repeating-linear-gradientcross-hatch (ice-blue;.hot= amber for the one highlighted bar), 1px ice-blue outline, labels uppercase. - SVG schematics — diagrams are inline SVG: dashed
rectcomponents (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. - Bracketed step counters —
.steps .card::beforerenders[01] [02] …in amber mono. - Dashed spec tables —
.spec-tablecells 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 isflex:0 0 100vw×100vh, padding72px 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
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
architecture-decision-records
Has your agent record important project structure decisions. It helps to understand the reasoning behind choices and maintain a clear history of changes.
affaan-m/ECC
code-tour
Lets your agent create step-by-step code walkthroughs with exact file and line anchors. It's useful for project introductions, code explanations, or change reviews. Helps understand how a system works.
affaan-m/ECC
codebase-onboarding
Helps your agent analyze unfamiliar code and create an onboarding guide. It includes an architecture map, entry points, and conventions. Ideal for starting on a new project.
affaan-m/ECC