5dd70b5016
This repository contains the open-design daemon CLI source code, built and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use by the HelixMind /design slash command. Licenses: Apache-2.0 (root) + MIT (skills/*)
2.8 KiB
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:
- No external assets. Inline all SVG. No font imports. No image URLs.
- One frame per file. Don't bundle iPhone + Android in one HTML.
- `?screen=` query is the only contract. Don't introduce other query params; the harness has to be predictable for skills to use.
- 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). - 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.