Layer stack · nbg-design · Diagram Design
How the nbg-design skill is built, in five layers
How the nbg-design skill is built, in five layers
Layer stack showing the skill from its SKILL.md contract at the bottom, through the design system, the build pipeline and the in-deck editor, to the delivered HTML deck and PDF at the top.
L5
Deliverables
One self-contained HTML deck, its PDF, its rebuild script
images embedded · one PDF page per slide · tools refreshable later
L4
In-deck editor
Right-click menu, toolbars, structure, assistant
print-layout.js + deck-menu.js, inlined into the deck
L3
Build pipeline
Embed · add editor · verify · screenshot · export
6 zero-dependency Node scripts + 4 shared libraries
L2
Design system
Palette, Aptos, 1920×1080 artboard, 9 templates
3 logo lockups · 5 photos · ready-made data URIs
L1
Contract
SKILL.md: inputs, defaults, guardrails, quality gate
one Markdown file is the whole behaviour
BUILDS ON
LEGEND
Focal layer — what makes a delivered deck editable by anyone
Layer — rests on the one below it