← All playbooks · Raw API

case-study-from-package

# Case study from a package — SE Studio

Build a **work** multi-block case study from Drive / Figma / copy **without inventing layout or rewriting prose**.

## When to use

- New or lab case studies from a multi-file package
- Ports of editorial Figma frames into Case study rich text stacks
- Intent: “build this case study from the assets”, “multi-ART port”, “lab case study from Drive”

## Pipeline

```text
task-source-readiness-review
  → soft-proof + light human yes
  → task-media-pipeline-prepare   (Drive folder of masters → ready URLs → CMS assets)
  → task-create-article / incremental CMS build (lab by default for experiments)
  → task-preview-verify (multi-block checklist)
```

Read `cms-edit://customer/articles` for routing, SEO, lab flags, and composition rules.

### SE Studio media pipeline (via cms-edit)

| Setting | Value |
|---------|--------|
| Agent API | MCP tool **`cms_edit_media`** (`prepare` → `wait` → `catalog` → `import`) |
| Tenant | Set on host as `MEDIA_PIPELINE_TENANT=se` (not projectKey) |
| Profile | `case-study-v1` |
| Auth | **Contentful OAuth only** for agents; pipeline service key lives on the cms-edit host |
| Share folders with | `media-pipeline-reader@se-media-pipeline.iam.gserviceaccount.com` (**Viewer**) |

Full steps: `cms-edit://customer/task-media-pipeline-prepare`. **Never ask for `MEDIA_PIPELINE_API_KEY`.**

**Order matters:** process the Drive pack **before** multi-block CSRT construction. Prefer `asset upload --url` from catalog `readyUrl` over mid-build staged upload of 4MB+ masters.

## Non-negotiables

| Rule | Detail |
|------|--------|
| **No copy rewrite** | Structure and place source text only |
| **Sequence from design** | Figma / ordered list wins over CMS convenience |
| **Separated demoted** | Only for **true** side-by-side pairs |
| **Placeholders beat reordering** | GO-WITH-GAPS: keep the slot, label the gap |
| **Merge continuous prose** | Adjacent body-only CSRTs look gappy — prefer one body block |
| **Media pack first** | Oversized Drive assets go through media pipeline |
| **Light yes** | Human confirms soft-proof with yes/go/proceed |

## Condensed example — GO-WITH-GAPS (OM1-shaped)

Synthetic package; teaches structure, not client confidentiality.

**Sources:** Figma ordered frame + Drive folder (~15 files) + narrative doc.

**Inventory (excerpt):**

| # | Role | Status | Mapping |
|---|------|--------|---------|
| 1 | Hero | ready (after pack) | `featuredImage` |
| 2 | Website UI | ready | CSRT visual ~80% |
| 3 | Pair L / R | L **missing**, R ready | Separated + **placeholder** left |
| 4 | Origin copy | ready | CSRT body (merge paras) |
| 5 | Hands photo | ready | CSRT visual 100% |
| 6 | Pair L / R | L ready, R **missing** | Separated + **placeholder** right |
| 7 | Challenge copy | ready | CSRT body |
| 8 | Landscape demo video | ready (pipeline H.264) | CSRT visual; autoplay+loop |

**Verdict:** GO-WITH-GAPS (2 missing visual slots ≤3; sequence clear; copy usable as written).

**Soft-proof sketch:**

```text
1. [template] hero
2. CSRT media — website
3. Separated — placeholder | blue model
4. CSRT body — origin (merged)
5. CSRT media — hands
6. Separated — man/patterns | placeholder
7. CSRT body — challenge
8. CSRT media — demo video autoplay+loop
… (continue in source order)
Lab: lab/…, hidden, unindexed
```

**Do not:** invent Separated for stacked singles; rewrite narrative; drop placeholders; dump body art on article `visuals`; compress videos in chat.

## Layout from Figma (required — not optional polish)

Case study rich text **field visuals** default in the site to **~67% width + centred** when Media has no layout fields. That is **wrong** for most editorial frames. Always set Media from design.

### Measure

1. Content row / stack width (often **1408** on desktop frames).
2. For each visual node: `widthPct = round(nodeWidth / contentWidth * 100)`, **cap at 99** (CMS Media `width` max is 99).
3. `horizontalPosition`: **Left** if `x ≈ 0` and width < full column; **Right** if pinned right; else **Middle** only when design is centred.

### Set on each Media entry

| Intent | Media fields |
|--------|----------------|
| Full **column** (not viewport bleed) | `width=99` (schema max) |
| Partial left feature (e.g. ~74%) | `width=74`, `horizontalPosition=Left` |
| Separated pair with gap | Set each child’s `width` so **sum < 100** (e.g. 33+49, 49+31). Collection uses `justify-between` — 50/50 fills the row with **no gutter**. |
| Landscape / UI video | width/position from frame + `autoplay`/`loop` per playbook |

### Figma annotations override layer names

Inspect **annotations** (`label` / `labelMarkdown`) on visual nodes. Example: layer still named `OM1_mobileScreenGrabs` may annotate **“should be the showreel grid video”** → use `Showreel-Grid-Mobile-remix-2.mp4`, not the PNG still. **Annotation asset intent wins** over filename-shaped layer names.

### Alpha images

Prefer pipeline **WebP** for transparent masters (clinical UI, cutouts). Do not leave large transparent PNGs if the pack produced WebP.

### Worked example — OM1 frame (content width 1408)

| Beat | Asset (after annotations) | Media `width` | Position |
|------|---------------------------|---------------|----------|
| Hero | `OM1_Hero` | featuredImage full | — |
| Slot 2 | **Showreel** video (annotation on screen-grabs layer) | **74** | Left |
| Pair | pink/green + blue model | **33** + **49** | gap via sum < 100 |
| Hands | `OM1_HandsWithScreen` | **99** | full column |
| Pair | man/patterns + clinical | **49** + **31** | gap |
| Landscape | blue animation | **74** | Left; autoplay+loop |
| Website | `OM1_websiteImage` | **77** | Left |
| Pair | patterns + green icon | **33** + **49** | gap |

## Anti-patterns

- Leaving Media `width` empty on CSRT visuals (site defaults to 67% centred)
- Separated pairs at implicit 50/50 with no gap when Figma shows a gutter
- Trusting layer names over Figma annotations for asset choice
- Default “multi-ART + Separated between every pair”
- One CSRT per paragraph with no art between
- Inventing section titles / H1s on body blocks
- Editing the live production entry instead of a lab draft
- “Improving” client copy in cms-edit
- Staged-uploading 4MB+ masters without **media pipeline**

## Related

- `cms-edit://customer/articles`
- `cms-edit://customer/task-source-readiness-review`
- `cms-edit://customer/task-media-pipeline-prepare`
- `cms-edit://customer/task-media-reuse-and-upload`
- `cms-edit://customer/task-create-article`
- `cms-edit://customer/task-create-from-document`
- `cms-edit://customer/task-preview-verify`
- Components: `case-study-rich-text`, collections: `separated-visuals`, `visuals`