oc-world-plates

Verified@sumino/oc-world-plates
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: oc-world-plates. Run `npx -y @neta-art/neta-search-cli@latest skills use @sumino/oc-world-plates --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Use in Neta Studio Open it in Neta Studio and see what people made with it.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @sumino/oc-world-plates
Summary

Turn each of your characters into a split poster: a real-looking photo of their place above, a plaster miniature of it below.

  • One poster per character: the top half is a photograph of a place that matters to them, with nobody in it, only the traces they left.
  • The bottom half rebuilds the same place as a matte plaster miniature seen from a higher angle, beside a magazine-style title and three short notes.
  • Everything comes as one interactive page: click a face on the side to flip between characters, or use the keyboard arrows. It fits the screen without scrolling.
  • On a phone, tap the lower half to open a reading panel with all the notes.
  • Works best with characters tied to a distinct place, like a hospital corridor, tea hall or carousel, plus small objects they left behind.
SKILL.md
# OC World Plates

A single page that holds one poster per OC. Each poster is a 3:4 sheet cut exactly in half: the top is a photograph of the OC's place with nobody in it — only the traces they left; the bottom is the same place rebuilt as a matte plaster exhibition model on a thick cut base, viewed from a higher isometric angle, with the title and notes in the clean margin. A rail of faces on the left turns the plates.

**Live demo:** https://neta.art/w/sumino/sweet-nightmare-park/oc-world-plates

This is a web Work, not a single image: the upper photograph and the lower model are separate images, and the type is live HTML.

## What the user gets

- One interactive page with a selector rail of OCs (or one plate, if the world has one).
- Per OC, a 3:4 poster: upper 50% photograph, lower 50% plaster model + text.
- The upper half is pure photography — no character, no text, no logo, no title.
- The lower half is a 30–45° isometric miniature with a visible cut base, layered terrain, steps, platforms and low relief, in matte plaster and 3–4 colours sampled from the photograph.
- A serif magazine title, a small place label, an Above / Below pair, three short numbered notes, a swatch strip, and a footer.
- Desktop: rail + poster, no scrollbars. Phone: poster + horizontal avatar strip; tapping the lower half opens a reading sheet with all notes.
- Keyboard arrows turn the plates; `?oc=<id>` deep-links a plate.

## When to use

Use when the user wants a place-first, photography-plus-model character poster, especially:

- "world plates", "above and below poster", "photo on top, model below";
- "isometric plaster model", "architectural exhibition poster", "museum model";
- "上下双联海报", "实景与微缩模型", "摄影海报".

Do not use for:

- a single illustration with no page — generate an image only;
- a painterly character portrait;
- a live map or atlas — that is `world-map-experience`;
- a photomontage or Constructivist collage — that is `oc-constructivist-poster`;
- a purely typographic poster.

## Hard rules

0. **Use the sandbox CLI path.** Every `neta` command is `node /mods/neta/neta …`.
1. **The split is exactly 50/50.** The upper and lower halves each take half the poster, and the poster is exactly 3:4. No exceptions for “just a little more text”.
2. **The upper half has no character.** Only the place, the props and the traces. No people, silhouettes, text, logos, titles or captions. A figure in the photo breaks the whole idea.
3. **The upper half is photography, not illustration.** Real materials, real light, true colours, only a slight photographic grade. No fantasy painting, no CGI, no game screenshot.
4. **The lower half is a model, not the photo.** It must use a different, higher isometric viewpoint (30–45°), and must not paste or trace the photo. Reorganise scale, hierarchy and secondary detail.
5. **The model is matte plaster.** Visible cut base, layered terrain, steps, platforms, simplified blocks, shallow relief; soft contact shadows. No glossy plastic, no toy look, no game-asset look.
6. **Text lives only in the lower half.** The upper half stays pure. The text column occupies 35–40% of the lower half; the model takes the rest and sits eccentrically.
7. **The place must matter to the OC.** Choose a location from the OC's own story and show what they left there, not a generic beautiful room.
8. **Three to four colours from the photo.** Warm neutral page/base, one main colour, one or two darks. No gradient background.
9. **The page never scrolls.** Fit the poster to the viewport; on phones, use the reading sheet for the full notes.
10. **Validate, QA at desktop and phone, publish, place.** A source page without a published Work and a Board card is not shipped.

## Pipeline

### 0. Read the world and choose one place per OC

```bash
node /mods/neta/neta atom list --type character
node /mods/neta/neta atom get "world/characters/<Name>.md"
node /mods/neta/neta find images "<Name>"
```

Record for each OC:

- the zone or location that carries their story (hospital corridor, tea hall, mirror maze, ruin, slide, carousel, theatre, candy shop, gallery);
- **traces** that prove they were there — a tipped cup, bandages in pairs, a split rune, jars on a rail, a red cloak on a hook;
- 3–4 colours from that place;
- the title (a place-truth, not a character name), one Above line, one Below line, three notes.

### 1. Generate the photograph (upper half)

Read `references/art-direction.md` for the full prompt. Use `gpt-image-2`, `1536x1024` (3:2), quality high.

```bash
NETA_DEFAULT_IMAGE_MODEL=gpt-image-2 node /mods/neta/neta generate image \
  --work-title "<Name> · World Plate — photograph" \
  --work-description "Upper-half location photograph for the <Name> world plate." \
  --param size=1536x1024 --param quality=high --param output_format=png \
  --prompt "$(cat /tmp/<id>.photo.txt)"
```

The prompt must forbid people, text, logos and illustration, and must name the traces. Put "Absolutely no people..." near the start.

### 2. Generate the model (lower half)

Pass the photograph as the reference so the model shares its structure and palette:

```bash
NETA_DEFAULT_IMAGE_MODEL=gpt-image-2 node /mods/neta/neta generate image \
  --work-title "<Name> · World Plate — model" \
  --work-description "Lower-half plaster isometric model for the <Name> world plate." \
  --param size=1536x1024 --param quality=high --param output_format=png \
  --image "world/media/studio/works/<Name> · World Plate — photograph.png" \
  --prompt "$(cat /tmp/<id>.mini.txt)"
```

The model prompt must say: use the reference only for outline, structure and narrative core; do not reproduce its camera angle; do not paste the photo; 35° isometric; matte plaster; cut base; model on one side; 40% empty background on the other.

### 3. Process the assets

The generator usually makes the model wider than the empty margin, so crop each model to its outline, then place it in the page.

```bash
# find the model's bounding box on its flat background
convert model.png -fuzz 9% -format "%@" info:

# crop with padding, cap the long edge, compress
convert model.png -crop <w>x<h>+<x>+<y> +repage -resize '1100x1100>' -quality 84 assets/model/<id>.webp

# photo and avatar
convert photo.png -resize 1280x -quality 80 assets/photo/<id>.webp
convert cover.png -resize 144x144^ -gravity north -extent 144x144 -quality 82 assets/oc/<id>.webp
```

Keep the photo at 3:2 and the model at its cropped ratio (the page preserves it).

### 4. Create the page

```bash
SLUG="oc-world-plates"
WORK="works/web/$SLUG"
node /mods/neta/neta work init web "$WORK" --title "World Plates — Above & Below"
# The CLI may normalize works/web -> works/webs; use the printed workDir.
```

Copy the starter:

```bash
cp -r templates/. "$WORK"/
cp templates/content.example.js "$WORK/content.js"
```

Replace `content.js` with one entry per OC. Keep the fields:

```js
{
  id: "bandie", oc: "Bandie", no: "01",
  place: "Stitchwork Hospital", placeZh: "缝合怪医院 · 东侧走廊",
  title: "The Corridor That Keeps Its Symmetry",
  above: "The east corridor at first light.",
  below: "The same corridor, cut down to walls, windows and bandage.",
  notes: ["…", "…", "…"],
  side: "right", bg: "#F4EADD", ink: "#3E4448", accent: "#9FB5A6",
  swatches: ["#9FB5A6", "#E9E4DA", "#3E4448"]
}
```

`side` is the side the **model** occupies; the text takes the other side. Alternate sides across the set so the page does not feel like a template.

### 5. Validate and QA

```bash
node scripts/validate-plates.mjs "$WORK"
```

It checks the page files, local fonts, every plate's fields, unique ids, side values, hex colours and the three assets. Then follow `references/qa.md`:

- 1440×900 and 390×844;
- the split is exactly at 50%;
- the photo has no people or text;
- the model is a different viewpoint and does not copy the photo;
- the text never overlaps the model; no hidden overflow;
- no page scrollbars; the phone reader opens with all notes;
- switching plates updates photo, model, text, colours and URL.

### 6. Publish and place

```bash
node /mods/neta/neta work publish web "$WORK"
```

Then place the web Work card:

```bash
node /mods/neta/.agents/skills/board-ops/scripts/place.mjs \
  --title "World Plates · 上下双联海报" \
  --work "works/webs/$SLUG"
```

### 7. Package this skill (maintainer)

Only when asked. Keep the page template, two sample plates and the font files; put the full nine-plate text in `references/demo-plates.md` rather than shipping every image. Submit per `references/publishing.md`.

## Content model

```
$WORK/
  index.html
  style.css
  app.js
  content.js                 # one entry per plate
  assets/fonts/cormorant.woff2
  assets/fonts/cormorant-italic.woff2
  assets/photo/<id>.webp     # 3:2 photograph
  assets/model/<id>.webp     # 3:2 (or cropped) plaster model
  assets/oc/<id>.webp        # square avatar
```

The page is generic; `content.js` is the only per-world data file. The rail, poster, text fitter and phone reader are all driven by it.

## Package

- `templates/index.html`, `style.css`, `app.js` — the page shell, the 50/50 poster and the interaction.
- `templates/content.example.js` — two starter plates (Bandie, Ciely) with their images and palette.
- `templates/assets/fonts/` — the two local Cormorant woff2 files; the page must not fetch fonts at runtime.
- `templates/assets/{photo,model,oc}/` — two sample plates' images.
- `references/art-direction.md` — the photo and model prompts, place design, palette, moderation.
- `references/layout.md` — the 3:4 geometry, text column, model fitting, phone reader.
- `references/qa.md` — desktop/phone checks and the measurement probe.
- `references/publishing.md` — web Work, Board, community submission.
- `references/demo-plates.md` — the full nine-plate text from the live demo.
- `scripts/validate-plates.mjs` — page files, content fields and per-plate assets.
- `scripts/screenshot.mjs` — headless screenshots for QA.
- `assets/demo-cover.webp` — the gallery preview.

## Pitfalls

- A person in the upper photo kills the concept. Check at 100%.
- A model that repeats the photo's camera angle looks like a filter. Force a higher isometric view and a new arrangement.
- Pasting the photo onto a base is not a model. Delete trees, cars, minor rooms; rebuild the hierarchy.
- The model image usually leaves less white space than requested. Crop to the outline and scale it to 57–60% of the lower width.
- More than three notes will not fit on a phone; the reading sheet covers all, but the poster should still hold at least one.
- A light accent on a light background disappears. Use the accent for the rule and numbers, and the dark ink for the title.
- Shipping the font from Google at runtime makes the page depend on the network. Keep the two local woff2 files.
- A 3:2 photo in a 50% half must use `object-fit: cover`; never stretch it.
- The page must not scroll. If it does, the poster is too tall or the rail column is wider than the viewport.
- On phones, scroll only the avatar strip; `scrollIntoView` on a button also scrolls the page.

## Demo

The shipped demo is *Sweet Nightmare Park*, nine plates: Bandie's hospital corridor, Ciely's tea hall, Celestia Vela's mirror corridor, Crimson Vaelen's rune ruin, IrisDeep's Abyss Slide, Pipo's carousel, Rakushero's Faceless Theatre, Reapette's candy house and blissful's Void Gallery. The full text is in `references/demo-plates.md`; the starter ships two of them.

It is a demo, not a constraint. Replace the places, the traces, the titles and the palette.
Related skills
napkin-fry-feedingCommunityA web page where you feed a french fry to your character or eat it yourself.oc-halloween-icon-sheetCommunityTurn your character into a sheet of 16 black-silhouette Halloween stickers, ready to tap, save and share in 12 languages.oc-coloring-book-coverCommunityTurn your character into a vintage Halloween coloring-book cover with a title that speaks 12 languages.oc-shattered-glass-storyboardCommunityA broken-mirror poster: your character's face at the centre, their world in the shards around them.oc-abyss-wake-posterCommunityA vertical art print: tiny boat, sweeping mineral-pigment wake, live text in 11 languages.chinese-bookmark-setCommunityTurn your character into a set of three Chinese-style ink bookmarks, shown together in one product-style picture.