Real-DOM annotations
Bind product notes to concrete HTML elements instead of pixels in a screenshot.
AI-assisted HTML annotation · Agent Skill · html-prototype-build
AI HTML Annotation: real-DOM notes for Claude Code & Cursor
Stop sending screenshots to coding agents.
Give them the real DOM, stable selectors, review context, and reproducible UI states. The html-prototype-build agent skill connects UI generation, DOM annotation, review, screenshots, and source inspection in one native-HTML workflow for Claude Code, Cursor, and Codex.
Review context for AI
Export selectors, element snapshots, and feedback so agents receive executable context.
Element → source
Inspect a live element and jump back to its source when using the local authoring tools.
Reusable UI packs
Compose stable admin-style prototypes from shared tokens, components, and patterns.
Multi-state screenshots
Declare scenarios and capture clean, reproducible PNGs for create, edit, empty, linked, and other states.
Zero npm dependencies
The runtime stays lightweight and portable while authoring capabilities remain separate from deliverables.
Install the Agent Skill
Use the skills CLI to install html-prototype-build for Claude Code, Cursor, Codex-compatible workflows, and other supported coding agents.
npx skills add https://github.com/Lisuiwen/ai-html-annotation --skill html-prototype-build