복원 우선
visual-lossless라고 부르려면 잠긴 렌더러가 목표 화면을 복원해야 합니다.
Intent-readable visual-lossless markup
VMD
AI는 작은 비주얼 소스 계층을 수정하고, 렌더러는 잠긴 브라우저 화면을 복원합니다.
VMD는 수정 가능한 의도와 슬롯을, 완전 시각 복원에 필요한 replay 데이터와 분리해 담는 AI-native 비주얼 문서 포맷입니다.
@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: revenue, account, event를 빠르게 스캔
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
두 읽기 경로
AI는 의도, 슬롯, 토큰, 제약을 읽고 렌더러는 lock, replay, residual, raw를 읽습니다.
편집 상태 추적
AI가 수정하면 영향받은 replay는 renderer가 갱신하기 전까지 stale 상태가 될 수 있습니다.
토큰 경제성
Open Design 실험에서 AI-facing slot source는 원본 HTML보다 84.0% 작았습니다.
정의
VMD는 AI 편집 표면을 가진 복원 계약입니다.
HTML/CSS는 브라우저 타깃으로 남습니다. VMD는 LLM이 이해하고 패치할 수 있는 원본이며, 렌더러는 낮은 수준의 구현 세부를 replay 계층으로 복원합니다.
VMD는 수정 가능한 의도/슬롯 구조와 고정된 시각 replay 데이터를 분리해, LLM이 최소 문맥으로 문서의 의도와 수정 지점을 이해하고 렌더러가 고정 렌더링 조건에서 원본 브라우저 화면을 복원하게 만드는 포맷입니다.
두 읽기 경로
하나의 파일, 두 개의 책임.
AI Source Layer
모델은 목적, 수정 가능한 슬롯, 보이는 콘텐츠, 스타일 제어값, 편집 제약을 봅니다.
Render Replay Layer
렌더러는 고정된 환경과 출력 복원에 필요한 세부 정보를 봅니다.
Edit State
source 수정 후 replay가 current인지 stale인지 파일 안에 기록합니다.
편집 상태
Source 수정은 replay를 stale로 만들 수 있습니다.
visual-lossless는 잠긴 source hash에 대해 참입니다. AI가 제목, 지표, 표, 토큰, 레이아웃 슬롯을 바꾸면 기존 replay는 더 이상 유효하지 않을 수 있습니다. VMD는 렌더러가 replay, residual, hash를 갱신할 때까지 영향 영역을 dirty로 표시해야 합니다.
@edit_state {
source: modified
replay: partially-stale
affected:
- frame.dashboard-overview.title
required:
- rerender
- remeasure
- update-render-hash
}Open Design 실험
벤치마크는 복원 제약 아래에서의 압축입니다.
현재 prototype은 source-layer 압축 가능성을 입증하지만, 최종 codec 완성을 의미하지는 않습니다. 복원 검증을 통과하기 전에는 visual-lossless가 아닙니다.
도구
레퍼런스 도구는 포맷을 검증 가능한 상태로 유지합니다.
Chrome polyfill
.vmd 파일을 Chrome에서 열고 source, diagnostics, render mode를 확인합니다.
VS Code extension
snippet, syntax highlight, validation, live preview로 VMD를 작성합니다.
CLI and verifier
render, validate, gallery build, Playwright visual fidelity check를 실행합니다.
vmd validate samples/visual-lossless-dashboard.vmd --strict npm run test:chrome npm run verify:visual-fidelity -- --source-dir ./design-artifacts Public draft