Framnova Field Notes · Product-team edited
Better evidence.Better AI work.
Practical, source-grounded notes about visual context: what screenshots reveal, what DOM and CSS add, and how to connect approved capture sets to compatible AI coding clients.
Every field note separates observed product behavior from recommendation. We test the workflow against the current extension and service, link to primary references such as the Model Context Protocol specification and Chrome extension privacy guidance, and state the trust boundary when a step can upload webpage content. Product-team editors review examples for accuracy, privacy, and reproducibility before publication.
Use these notes to decide what evidence an AI task actually needs. A visual question may require only ordered screenshots; implementation work may benefit from a bounded element, sanitized structure, and computed style context. Direct MCP is intentionally separate: it uploads only a set you explicitly sync, while the local MCP path reads only the workspace you approve. Neither path recovers private source code from a public URL.
Updated July 26, 2026Start with a real workflow
04 FIELD GUIDESHow to send multiple screenshots to ChatGPT—in the right order
Capture a sequence, name the evidence, attach the originals, and verify the set before sending.
Connect screenshot MCP to Codex and Claude Code
Understand the local stdio and Direct MCP paths, then verify the connection without exposing your token.
Computed CSS vs authored CSS: what the browser can actually tell you
Learn why rendered values help reproduce an appearance but cannot recover a private source repository.
A real UI debugging workflow with screenshot, DOM and CSS
Turn a vague visual complaint into a bounded evidence pack an engineer—or AI coding agent—can act on.