Restoration first
A file can claim visual-lossless only after the locked renderer restores the target output.
Intent-readable visual-lossless markup
VMD
AI edits a compact visual source layer. The renderer restores the locked browser output.
VMD is an AI-native visual document format that separates editable intent and slots from replay data used for complete visual restoration under fixed rendering conditions.
@doc "Pulse Analytics Overview" {
spec: vmd@0.1
fidelity: visual-lossless
intent: analytics-dashboard
}
@lock {
renderer: vmd-web@0.3.0
dictionary: dashboard-system@1.0.0
browser: chromium
viewport: 1440x1200
dpr: 1
source-hash: sha256:...
render-hash: sha256:...
}
@edit_state {
source: clean
replay: current
dirty: none
}
::intent
purpose: scan revenue, accounts, and events quickly
editable: title, metrics, tables, events, date range
::
@tokens {
accent: #c96442 [editable]
title.line-height: 1.05 [locked]
grid.gap: 24px [locked]
}
::frame[role="dashboard-overview" recipe="analytics.workspace"]
title: Overview - April 2026
::component.card[title="Revenue - 30 days"]
value: $842k
change: +14.6%
::
::
@residual_index {
affected:
- frame.dashboard-overview.title
constraints:
frame.dashboard-overview.title.max-lines: 2
ai-note: Edit source slots only.
}
@replay {
encoding: visual-replay@0.1
}
@residual {
mode: visual-lossless
ai: ignore
} Renderer lock Chromium · 1440x1200 · DPR 1
Overview - April 2026
Revenue$842k+14.6%
Accounts42+8
AI source: intent / slots / tokens / constraints
Replay: lock / CSS cascade / layout boxes / assets
Verified output: render-hash
2:14 pmAcme Co upgraded to Team
1:48 pmNorthwind connected GitHub
1:32 pmGlobex cancelled subscription
Two reading paths
AI reads intent, slots, tokens, and constraints. Renderers read lock, replay, residual, and raw fallback.
Edit-aware
After AI edits, affected replay data becomes stale until the renderer refreshes it.
Token economy
The AI-facing slot source measured 84.0% smaller than original HTML in the Open Design experiment.
Definition
VMD is a restoration contract with an AI editing surface.
HTML/CSS remains the browser target. VMD becomes the source that an LLM can understand, patch, and hand back to a renderer without carrying every low-level implementation detail in the prompt.
VMD separates editable intent and slot structure from locked visual replay data, enabling LLMs to understand and modify documents with minimal context while renderers reconstruct the original browser output under fixed rendering conditions.
Two reading paths
One file, two responsibilities.
AI Source Layer
The model sees purpose, editable slots, visible content, style controls, and edit constraints.
Render Replay Layer
The renderer sees the locked environment and every detail required to reconstruct output.
Edit State
The file records whether replay is current or stale after source changes.
Edit state
Source edits can make replay stale.
Visual-lossless is true for a locked source hash. If an AI changes a title, metric, table, token, or layout slot, the existing replay data may no longer be valid. VMD must mark the affected region dirty until the renderer refreshes replay, residual, and hashes.
@edit_state {
source: modified
replay: partially-stale
affected:
- frame.dashboard-overview.title
required:
- rerender
- remeasure
- update-render-hash
}Open Design experiment
The benchmark is compression under a restoration constraint.
The current prototype proves the source-layer compression opportunity, not final codec completion. A page is not visual-lossless until restoration verification passes.
Tooling
Reference tools keep the format testable.
Chrome polyfill
Open .vmd files in Chrome and inspect source, diagnostics, and render modes.
VS Code extension
Author VMD with snippets, syntax highlighting, validation, and live preview.
CLI and verifier
Render, validate, build galleries, and run Playwright visual fidelity checks.
vmd validate samples/visual-lossless-dashboard.vmd --strict npm run test:chrome npm run verify:visual-fidelity -- --source-dir ./design-artifacts Public draft