vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
open-design/assets/frames
History
Tom Huang 6f6bf31dd2
Refactor project name from "Open Claude Design" to "Open Design" (#1) 
* Refactor project name from "Open Claude Design" to "Open Design"

- Updated project name in package.json, package-lock.json, and README files.
- Changed CLI commands and references from "ocd" to "od".
- Adjusted file structure references in documentation and code to reflect new naming conventions.
- Enhanced .gitignore to include new runtime data files.
- Updated metadata in LICENSE file to match new project name.

* Add contributing guidelines in English and Chinese

- Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors.
- Outlined contribution types, local setup instructions, and merging criteria for skills and design systems.
- Enhanced README files to reference the new contributing guidelines.
2026-04-28 16:03:35 +08:00
..
android-pixel.html Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
browser-chrome.html Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
ipad-pro.html Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
iphone-15-pro.html Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
macbook.html Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
README.md Refactor project name from "Open Claude Design" to "Open Design" (#1) 2026-04-28 16:03:35 +08:00

README.md

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.