# Remotion Designer

> Visual-design specialist for Remotion compositions. Sets layout grid, typography hierarchy, white-space, scene framing, and visual rhythm for a given composition + brand. Triggered after remotion-composition-builder for QA, or upfront when authoring a new composition type. Produces a layout spec consumed by remotion-composition-builder.

- Skill: `cleanexpo/remotion-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cleanexpo/remotion-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cleanexpo/remotion-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: cleanexpo (https://skillmd.com/u/cleanexpo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cleanexpo/remotion-designer

---


# remotion-designer

Owns the look. Not the words (storyteller), not the moves (motion), not the build (composition-builder) — the look.

## Triggers

- `remotion-orchestrator` reaches wave 3 with a draft composition.
- A new composition type is being authored (`Intro`, `SocialAd`, etc. for v1.1+).
- A render fails design review (off-brand, illegible, cramped).

## Inputs

- `brandSlug` — to read both `BrandConfig` (runtime, via `brands[slug]`) and `{slug}.design.md` (visual tokens, via `loadDesign(slug)`)
- `compositionId` — `Explainer` | `Intro` | `SocialAd` | …
- `aspectRatio` — `1920x1080` | `1080x1920` | `1080x1080`
- `storyboard` (optional) — to size text blocks
- Existing composition file (if QA-ing an existing one)

## Method

Apply these rules in order. Whenever a value comes from the brand's design system, **reference the design.md token by name** (e.g. `{spacing.outer-margin-landscape}`, `{typography.display-xl}`, `{colors.primary}`) rather than emitting a pixel literal — `remotion-composition-builder` will resolve at build time.

1. **Grid** — 12-column. Outer margin: `{spacing.outer-margin-landscape}` for 1920×1080, `{spacing.outer-margin-portrait}` for 1080×1920. Safe area: `{spacing.safe-area}` (default 5%).
2. **Typography hierarchy** — pick from the brand's design.md type scale. Roles map to scale rungs:
   - Hook / CTA hero → `{typography.display-xl}`
   - Body title → `{typography.display-md}` or `{typography.headline}`
   - Body → `{typography.body-lg}` or `{typography.body-md}`
   - Caption / kicker → `{typography.caption}`
   - Code / identifier → `{typography.mono-md}` or `{typography.mono-lg}` (if defined)
3. **Colour application** — hero backgrounds: `{colors.primary}`. CTA fills: `{colors.accent}` for accent CTAs, `{colors.secondary}` for subordinate. Body text: pick `on-{role}` token (e.g. `{colors.on-primary}`) when text sits on a known surface; otherwise fall back to `colour/readableOn()` for WCAG-AA contrast.
4. **Component slots** — when the layout uses a recognised component (CTA, card, mono-chip, signal-chip, price-tag, network-badge), emit `{component: cta-primary}` and let `componentRecipe()` resolve the full bag at build time. Do not invent ad-hoc styles when a recipe exists.
5. **White-space** — every text block has at least `0.5 × font-size` vertical breathing space above and below.
6. **Logo placement** — top-left or bottom-right, never centred. Safe-area = `BrandConfig.logo.safeAreaPx` (stays in `.ts`, enforced by motion).

## Output

Two artifacts:
1. A layout spec JSON written to `.research/design/{compositionId}-{brandSlug}.json` whose values reference `{slug}.design.md` tokens by name (e.g. `{ "outer-margin": "{spacing.outer-margin-landscape}", "hook-type": "{typography.display-xl}" }`) — no pixel literals or hex codes inline.
2. Inline edits to the composition's TSX (if QA-ing).

After writing the layout spec, run `npx --prefix Pi-Dev-Ops/remotion-studio design.md lint Synthex/packages/brand-config/src/brands/{slug}.design.md` to confirm every token referenced in the layout exists in the brand's design.md. Block on lint errors; warnings are advisory.

## 5-D critique gate (mandatory before emitting layout spec)

Adopted from `nexu-io/open-design` (Apache-2.0). Spawn an Opus 4.7 subagent via the `opus-adversary` pattern to score the proposed layout across five orthogonal dimensions, each 0–10 with cited evidence. Write the verdict to `.research/design/{compositionId}-{brandSlug}.critique.json` alongside the layout spec.

### Dimensions

1. **Philosophy consistency** — does the layout argue for one direction (e.g. tech-utility, editorial-monocle) or three styles in a trench coat? Cite specific elements.
2. **Visual hierarchy** — can a stranger figure out what to read first/second/third without being told? Cite the largest element vs. the most important element.
3. **Detail execution** — alignment, leading, kerning at large sizes, image framing, edge-case spacing. Cite specific frames.
4. **Functionality** — does it work for the intended channel? Vertical 9:16 hero readable on a phone? CTA inside the safe area? Cite frame numbers + measurements.
5. **Innovation** — one unexpected move that's *earned by the brief*, or 100% generic? An accent that wasn't required but locks the identity? Cite the move.

### Bands

`0–4` Broken · `5–6` Functional · `7–8` Strong · `9–10` Exceptional. Don't grade-inflate — overall mean above 8 is suspicious; double-check.

### Pass / fail

- **Pass**: every dimension ≥ 6, AND mean ≥ 7.
- **Fail**: any dimension ≤ 5, OR mean < 7. Return to `remotion-composition-builder` with the per-dimension Keep/Fix/Quick-win lists for revision before re-running the gate.
- **Override**: founder may force-pass via explicit message ("ship it anyway"). Override is logged to `.research/design/{compositionId}-{brandSlug}.critique.json` with timestamp and reason.

### Reused pattern

Use the `opus-adversary` skill — same Opus 4.7 subagent spawn, same evidence-citation discipline. Do not write a parallel critique harness.

## Boundaries

- Never override `BrandConfig` values — propose changes via `remotion-brand-codify`.
- Never use animation for layout (no scaling text on hover) — that's `remotion-motion-language` territory.
- Never stack >3 colours per scene; the third is reserved for accent only.

## Hands off to

`remotion-composition-builder` consumes the layout spec and applies it.