NBSvision — See What Your UI Really Looks Like

One command. Zero tokens. Your page, mapped.
Every pixel. Every gap. Every bug. Visible.

🇬🇧 English | 🇷🇺 Русский | 🇩🇪 Deutsch | 🤖 AI

---

Quick Start

git clone https://github.com/freundapps/NBSvision.git
cd NBSvision
pip install playwright && playwright install chromium

# Full NBS box diagram (double-walled)
python scripts/check-props/check-props.py --url https://github.com --map

# NBS mini — compact tree (10× smaller, same info)
python scripts/check-props/check-props.py --url https://github.com --mini

# Mini + strip frequent properties
python scripts/check-props/check-props.py --url https://github.com --mini --common

JSONtoNBS — offline renderer (no network, no Playwright)

Works with ANY JSON tree, not just DOM. Save once, render forever.

# Extract once
python scripts/check-props/check-props.py --url https://github.com --json > tree.json

# Render any way you want — zero network
python scripts/check-props/JSONtoNBS.py tree.json               # full NBS box diagram
python scripts/check-props/JSONtoNBS.py tree.json --mini         # compact tree
python scripts/check-props/JSONtoNBS.py tree.json --mini --common  # + strip frequent props

# Pipe from any source
cat tree.json | python scripts/check-props/JSONtoNBS.py --mini

Input formats auto-detected:

• NBS tree node {component, css, children[], ...}
• Flat element list [{tag, w, h, ...}, ...] — auto-converted to tree
• Chunked format {mode: "chunked", overview, details}

---

Two Formats

NBS Box Diagram (--map)

Full double-walled boxes. Wall alignment verified with Unicode-aware wlen(). Best for human reading in terminal.

╔══════════════════════════════════════════════════════════════╗
║   Page                                                       ║
║      ┌───────────────────────────────────────────────────┐   ║
║      │   header 1440×68px d:flex f:14px                  │   ║
║      │         ┌────────────────────┐                    │   ║
║      │         │   Sign in 80×36px  │                    │   ║
║      │         └────────────────────┘                    │   ║
║      └───────────────────────────────────────────────────┘   ║
╚══════════════════════════════════════════════════════════════╝

NBS Mini Tree (--mini)

Compact tree with @properties. 10× smaller. Best for LLM agents.

Page 1440×900px
├─ header 1440×68px @d=flex @f=14px
│  ├─ Sign in 80×36px @f=14px
│  └─ Sign up 80×36px @f=14px
└─ main 1440×830px @f=14px
   └─ div 960×600px @d=flex
      ├─ h1 "Build software" 800×48px @f=32px
      └─ p "Millions of developers" 600×24px

─── Common (2 props, >50% nodes) ───
  @gap=normal    98%  ███████████████████
  @f=14px        90%  ██████████████████

Real NBS mini output: GitHub.com

Page 1440×11129px
├─ header-overlay 1440×11129px @f=14px
│  ├─ header "Github" 1440×62px @d=flex @f=14px ①
│  │  ├─ nav 1100×54px @d=flex @f=14px
│  │  └─ div 307×32px @d=flex @f=14px
│  │     ├─ Sign in 80×32px @f=14px
│  │     └─ Sign up 83×32px @d=flex @f=14px
│  └─ main 1440×11067px @f=14px
│     └─ section "Let's build from here" 1440×600px @d=flex @f=14px ①
│        └─ div 960×600px @f=14px
│           ├─ h1 "Build software" 800×48px @f=48px
│           └─ p "Millions of developers" 600×24px @f=20px

─── Common (2 props, >50% nodes) ───
  @gap=normal    98%  ███████████████████
  @f=14px        90%  ██████████████████

---

Scripts

Script	Purpose	Playwright?
check-props.py	Unified CLI — all modes in one	✓
JSONtoNBS.py	Offline renderer: any JSON tree → NBS (full or mini)	—
nbs_tree.py	Importable extractor: URL → tree dict	✓
nbs_build.py	NBS box diagram renderer	—
nbs_mini.py	NBS mini compact tree + --common	✓
common_props.py	Frequency analyzer: @prop stats	—
nbs-find.py	Search NBS JSON. 99.6% token savings	—
nbs-to-compact.py	NBS → compact DSL. 70-90% token savings	—
count-tokens.py	Token usage from SQLite session DB	—
generate-page.py	JSON config → page.tsx + SCSS + API hook	—
gen-playwright-test.py	NBS JSON → Playwright idempotency test	✓
mk-tree.py	ASCII tree → filesystem	—
nbs-slice.py	Deep NBS trees → overview + detail blocks	—

---

Real-World Examples

Site	NBS Box	NBS Mini	JSON
GitHub	map.nbs 66KB	mini.nbs 6.4KB	schema.json 14KB
Google	map.nbs 56KB	mini.nbs 3.3KB (61 nodes)	schema.json 17KB
Apple	map.nbs —	mini.nbs 27KB (414 nodes)	schema.json —
TikTok	29KB	—	—

---

NBS Mini Properties

Prefix	Meaning	Example	Skipped if
@d	Display	@d=flex	block
@f	Font size	@f=13px	16px
@gap	Gap	@gap=8px	empty
W×Hpx	Size	1440×900px	—

Issue Markers

Symbol	Meaning
①	Glued to left edge
②	Tight horizontal gap
③	Vertical overlap
④	Missing container padding
⑤	Overflow beyond parent

---

Project Structure

NBSvision/
├── README.md  README.ru.md  README.de.md  README.ai.md
├── spec/nbs-spec.md
├── scripts/
│   └── check-props/
│       ├── check-props.py     # Unified CLI (all modes)
│       ├── JSONtoNBS.py       # Offline renderer (JSON → NBS full/mini)
│       ├── nbs_tree.py        # Importable extractor
│       ├── nbs_build.py       # NBS box renderer
│       ├── nbs_mini.py        # NBS mini tree + --common
│       └── common_props.py    # Frequency analyzer
├── scripts/
│   ├── nbs-find/              # JSON search (0 tokens)
│   ├── nbs-to-compact/        # NBS → compact DSL
│   ├── count-tokens/          # Token analysis
│   ├── generate-page/         # JSON → page files
│   ├── gen-playwright-test/   # NBS → Playwright test
│   ├── mk-tree/               # ASCII tree → filesystem
│   └── nbs-slice/             # Tree slicer
└── examples/
    ├── github/    google/    apple/    tiktok/
    └── page-config.json

---

License

MIT — use freely, attribution appreciated.

⭐ If this saved you time, star the repo. One click. Zero tokens.