← back to the gallery

MengTo Skills: monochrome technical wireframe, annotated object with connector callouts

Tier
inspiration
Roles
explainer, capability
Feel
dark, minimal, cold, saas
Motion
reveal, count
Source
open
Site
https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/technical-wireframe-info-layout
Licence
MIT (MengTo/Skills); demo HTML measured live, may be ported
Captured
2026-09-21
Captures
both: http://127.0.0.1:4174/technical-wireframe-info-layout/index.html

Measured tokens

Canvas
#000000
Ink
#d4d4d8
Accent
#71717a

3 sections measured.

A monochrome engineering panel on pure black, framed by a hairline border inset from the viewport with corner marks. Top bar: a versioned product label (SEMANTIC.NET_V3.1 / SYSTEM ONTOLOGY), three tab-like section names with a lit dot on the active one, a stress meter at right. The main viewport is a wireframe: three stacked isometric planes drawn in thin grey lines, nodes labelled in tracked mono uppercase (PROCESS_ENGINE, INDEX_CORE, SRC_01), dotted connectors between them, one bright node. A right column holds an annotated paragraph, two metrics with hatched progress bars, and a timestamped diagnostic list with the current row boxed. Footer strip: view-mode toggle icons, uptime and latency in mono, one outlined action button.

Useful for: an explainer or capability role for a technical product where the object itself is the section — diagram in the centre, annotations in a fixed column — instead of a headline and three cards. Everything is hairlines, mono labels and a single grey accent; no fills, no colour beyond one highlighted node. From the recorded frames, not measured.

Sources

- MengTo/Skills, `agent-skills/web-design/technical-wireframe-info-layout` (MIT); the demo is a Neuform export the skill ships, flattened from its embedded page and measured live at 1440 and 390. Of the eight Neuform-synced demos tried in this batch it is the only one whose page matched its skill's name.