Interactive canvas
M3E Canvas
Sketch Material 3 Expressive screens directly in the browser. Designs stay in browser storage; share links carry the mockup in the URL rather than uploading it to OPG.
Private mockup workspace
Mock it before we ship it.
A separate place to explore OPG screens, compare ideas, and hand a precise visual brief back to the build agents.
UI/UX Pro Max
Installed for Codex design work. Ask an agent to review a mockup with ui-ux-pro-max; OPG’s own brand rules remain the final visual authority.
Current OPG
The production site remains separate and unchanged. Open it beside the canvas when comparing a proposed screen with the live experience.
Simple handoff loop
No production deploy
From rough idea to reviewable screen.
-
01 · Draft
Shape the screen
Start in the canvas, choose the device and components, then refine hierarchy and states without touching the live app.
-
02 · Share
Copy the mockup link
The generated URL contains the design document in its fragment, so the draft can be reopened without a separate database.
-
03 · Review
Hand it to an agent
Send the link with the target workflow and ask for an accessibility, responsive, or implementation review before code changes begin.