open-design/assets/frames

Shared device frames

Reusable, pixel-accurate device chrome that any skill can compose into a multi-device or multi-screen layout. Each frame is a self-contained HTML snippet that renders a device shell and embeds its inner screen via an ` \`\`\`

In an OD-managed project, the recommended pattern is:

``` my-project/ ├── index.html ← gallery view: composes 3+ frames in a row ├── screens/ │ ├── home.html ← inner content rendered inside iphone-15-pro.html │ ├── search.html │ └── detail.html └── (no copy of frames — point at the shared assets folder) ```

Design tokens

Each frame reads its inner screen's tokens via `postMessage` if you want the bezel to tint with the active palette. The default state is "phone in hand" — neutral metallic — which works against any background.

Authoring rules

When extending this library:

1. No external assets. Inline all SVG. No font imports. No image URLs.
2. One frame per file. Don't bundle iPhone + Android in one HTML.
3. `?screen=` query is the only contract. Don't introduce other query params; the harness has to be predictable for skills to use.
4. The frame is decorative chrome only. All content lives in the inner screen file. The frame must work with ?screen=about:blank (showing just the device shell).
5. Match real device dimensions. iPhone 15 Pro is 390×844 logical pixels. iPad Pro 11" is 834×1194. Don't ship a "looks like" frame — the seed has to match.