5dd70b5016
Some checks failed
ci / Validate workspace (push) Successful in 12m32s
landing-page-ci / Validate landing page (push) Successful in 9m41s
landing-page-deploy / Deploy landing page (push) Failing after 5m23s
github-metrics / Generate repository metrics SVG (push) Failing after 2m3s
refresh-contributors-wall / Refresh contributors wall cache bust (push) Failing after 11s
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/*)
78 lines
2.8 KiB
Markdown
78 lines
2.8 KiB
Markdown
# 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
|
||
\`<iframe src="?screen=...">\` query parameter.
|
||
|
||
## Why these exist
|
||
|
||
The mobile-app skill has a one-screen iPhone frame baked into its seed
|
||
template. That covers ~80% of mobile prototypes. These shared frames cover
|
||
the remaining 20%:
|
||
|
||
- **Multi-screen flows** — three iPhones side by side showing onboarding 1
|
||
/ 2 / 3.
|
||
- **Multi-device sets** — desktop + tablet + phone of the same product.
|
||
- **Future skills** — \`watch-app\`, \`tablet-app\`, \`tv-app\` can reuse
|
||
these without re-inventing the chrome.
|
||
|
||
## Files
|
||
|
||
\`\`\`
|
||
assets/frames/
|
||
├── README.md ← you're reading this
|
||
├── iphone-15-pro.html ← 390×844 + Dynamic Island
|
||
├── android-pixel.html ← 412×900 + punch-hole camera
|
||
├── ipad-pro.html ← 1024×1366 + USB-C edge
|
||
├── macbook.html ← 1440×900 inside laptop chrome
|
||
└── browser-chrome.html ← Safari/Chrome window with traffic lights
|
||
\`\`\`
|
||
|
||
## Usage
|
||
|
||
Each frame accepts a \`?screen=<path>\` query parameter and renders that
|
||
path inside its inner viewport:
|
||
|
||
\`\`\`html
|
||
<iframe
|
||
src="../../assets/frames/iphone-15-pro.html?screen=screens/home.html"
|
||
width="390"
|
||
height="844"
|
||
loading="lazy"
|
||
></iframe>
|
||
\`\`\`
|
||
|
||
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.
|