{HBPL}
PROMPTCAD
OPEN STANDARD · HBPL v0.1.0 · MIT LICENSE

The missing layer
between humans and AI.

{HBPL} (Hyper Block Prompt Language) is an open standard for spatial prompt structuring. Draw your layout as blocks, add prompt parameters, export clean JSON — and let any AI model build exactly what you envisioned.

View on GitHub

Free · Open Source · No vendor lock-in · Works with any AI model

WHAT IS {HBPL}

Spatial prompting
for the AI era.

Text prompts are linear. UIs, documents, and visual structures are spatial. HBPL bridges that gap — a simple, open JSON format that gives AI models precise positional context for every element.

Instead of writing a wall of text describing "a hero section with a heading, subtitle, and CTA" — you draw a rectangle, set its coordinates, and attach structured prompt parameters. The AI knows exactly where everything goes and what it should be.

🎯Precise layout control⚡Less tokens, more clarity🔓Model-agnostic🧩Nestable hierarchy📦Version-controllable✦Open standard
hero.hbpl.json
{
  "name": "Hero Section",
  "x": 0, "y": 72,
  "w": 1440, "h": 680,
  "params": [
    {
      "ref": "layoutPrompt",
      "value": "Centered hero, H1 + subtitle + 2 CTA buttons"
    },
    {
      "ref": "stylePrompt",
      "value": "Dark bg, purple glow, 72px bold white heading"
    },
    {
      "ref": "content",
      "value": "Draw your prompts. Ship faster with HBPL."
    }
  ],
  "children": []
}
WHY NOT JUST TEXT PROMPTS?

Structure beats prose. Every time.

Ambiguous text prompts produce ambiguous results. HBPL gives AI models a precise blueprint.

✗Plain text prompt
"Make a landing page with a hero section
that has a big heading, a subtitle, and
two buttons. Below that add a features
section with three cards. Each card
should have an icon, title and desc.
Style it dark with purple accents and
modern typography, the heading should
be around 72 pixels and centered..."
✓HBPL block — same result
{
  "name": "Hero",
  "x": 0, "y": 72,
  "w": 1440, "h": 680,
  "params": [
    { "ref": "layoutPrompt",
      "value": "H1 + subtitle + 2 CTAs" },
    { "ref": "stylePrompt",
      "value": "dark, purple, 72px bold" },
    { "ref": "content",
      "value": "Draw your prompts." }
  ]
}
✗ Ambiguous layout✓ Exact X/Y/W/H coordinates
✗ Hard to iterate blocks✓ Change one param, re-export
✗ Context lost✓ Each block is self-contained
✗ No hierarchy✓ Parent → children nesting
✗ Not version-controlled✓ Git-friendly JSON
✗ Model-specific hacks✓ Works with any LLM
PromptCAD⬇ EXPORT HBPL
Hero Section
Heading L1
CTA Buttons L1
Nav Bar
Features
LAYOUT PROMPT
Centered hero with H1...
STYLE PROMPT
Dark bg, purple glow...
CONTENT
Draw your prompts...
POSITION
x: 0 y: 72 w: 1440
PROMPTCAD

The visual editor
for {HBPL}.

PromptCAD is the reference implementation — a canvas-based spatial editor where you draw blocks, nest children, fill prompt fields, and export valid HBPL JSON with one click.

🖊Draw & resize blocks on infinite canvas — drag, zoom, pan
🧩Nest children inside parents — they move together automatically
📋Dynamic param schema — define your own custom fields
⬇Export HBPL JSON · Import back any saved file
📐Layers panel, position inputs, zoom slider — full control
🔁Clone blocks with deep copy — all params independent
USE CASES

One format. Many applications.

Anywhere you need to communicate spatial structure to an AI — HBPL works.

🖥
UI & Landing Pages
Design complete page structure. AI fills in every component exactly where you placed it on the canvas.
🎬
Scene Description
Describe where characters, objects and camera elements are in a frame for image or video generation AI.
📄
Document Layout
Structure resumes, reports, proposals — spatially describe every section before handing off to AI for content.
🏠
Space Planning
Sketch floor plans and room layouts. Let AI suggest furniture arrangement, flow, and interior design details.
⚙️
Prompt Engineering
Replace messy multi-part text prompts with structured, versioned, reusable block schemas for complex AI tasks.
🎨
Design Systems
Define component structure spatially. Generate consistent UI libraries and design tokens across whole projects.
HOW IT WORKS

From sketch to structured prompt
in three steps.

01
Draw
Open PromptCAD and select the Draw tool. Drag rectangles onto the canvas. Position, resize, and nest blocks exactly where you want them. Children move with their parent automatically.
02
Prompt
Select each block and fill in the prompt parameters. Layout, Style, Content — or any custom fields you define. The param schema is flexible and project-specific.
03
Export & Generate
Click Export HBPL to download your .hbpl.json file. Paste it with the HBPL system prompt into any AI model. Get precise, structured output that matches your spatial design.
THE OPEN STANDARD

{HBPL} Specification

HBPL is not a product — it's a spec. Open, versioned, extensible. Build your own editor, your own AI pipeline, your own tooling on top of it. MIT licensed.

id · name · version
Document identity and semver versioning
context
Tell AI what the project is about — read first
systemPrompt
Processing instructions for the AI model
params schema
Define custom prompt fields for all blocks
layouts
Group blocks into logical named sections
blocks: x · y · w · h
Spatial coordinates for every element
params: ref · value
Typed prompt data per block
children: []
Infinitely nestable block hierarchy
Read Full Specification on GitHub →
{HBPL}

Start building with {HBPL} today.

Free. Open source. No account required to read the spec.
Sign in to save your projects and use PromptCAD.

GitHub ↗