ExactFrame
Generated palette illustration. Exact project colors shown above.
Show the change. Skip the guesswork.
“Make it more like this” leaves too much open to interpretation. OOG built ExactFrame, a browser extension for making visual page edits and recording the selected elements, styles, notes and viewport for implementation in the source project.
OOG’s contribution: Local browser extension, visual editing interface, element/style recording, added-layer tools, undo/redo and screenshot-backed source handoff.
ExactFrame lets people adjust a webpage visually and turn those changes into clear instructions for a coding assistant. The work combines a browser extension, an editing interface and an exportable handoff. The person making the design decision works on the rendered page. ExactFrame records the visual intent locally; the developer then implements and verifies it in the owning repository. A temporary browser change does not automatically change the product source.
What we built
Browser extension · Interface design
A direct visual editing tool turns feedback into precise implementation notes. Its overlay captures the selected page element, intended value and viewport context, then exports the information needed to make the change. A selected element stays beside exact geometry, type, appearance and image controls. Added layers and notes capture changes that the original page cannot express; selectors, changed styles and viewport measurements keep the handoff grounded in the actual edited page.
Select an element, make the change and export a handoff that shows exactly what you mean.
- On-page editing overlay
- Element, value & viewport capture
- Implementation-note exports
- Geometry, typography, color and image controls
- Added boxes, editable text and image layers
- Undo/redo and implementation notes
- Reference overlay and local session tools
- Screenshot, readable report and structured handoff package
The decision travels with the design.
The target image stays with the selected element, values and viewport context, giving implementation a concrete reference.
A change that can be implemented.
The editing overlay records the selected page element, intended value and viewport context. Exported implementation notes keep those details beside the target image, reducing the interpretation required when design feedback moves into development.
Make the decision on the page.
Select an element, adjust its position or dimensions, change typography, colors, borders, opacity and shadows, or control image fit and crop. Matching-item scopes can apply a change across repeated elements. Add boxes, editable text or imported image layers, then use undo and redo while refining the result.
Keep the target and its instructions together.
The original extension can package a clean target screenshot, readable report, structured element and style records, implementation notes and imported assets. A reference overlay supports visual comparison. The handoff identifies the page and viewport; implementation and responsive verification remain explicit work in the source project.
Try a change and inspect the record.
The interactive practice editor uses the original editing engine on an isolated page. Change the headline size or color, undo and redo, add a text layer and review the recorded selectors, measurements and styles. The practice tool downloads its change record; native tab screenshots and extension ZIP capture belong to the original extension.