# Audit: images and page entrances — 08-08-2026

Goal: agree a minimum standard for every image and entrance we ship, and stop shipping flat coded drawings. Read-only audit of the Studio ([`9 - System/ui-ux/`](/Users/unctad/Claude/9%20-%20System/ui-ux/index.html)).

## 1. Inventory — what the Studio already owns

| Path | What it is | Type |
|---|---|---|
| [`diagramas/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/diagramas/index.html) | Concept-diagram vocabulary: two open banks (material × structure), 8 founding examples with verdicts, engine/cost table, "no text in image" law | rule + example |
| [`~/.claude/skills/concept-diagrams/SKILL.md`](/Users/unctad/.claude/skills/concept-diagrams/SKILL.md) | Method to build an abstract 2D/3D concept diagram (bridge, network, constellation…), Gemini default engine | recipe |
| [`motion/motion-design.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/motion/motion-design.html) | Cookbook: video-not-code doctrine, four entrance moments (load/scroll/ambient/hover), page recipes (video-under-page, scrub, glass, person-on-top), the speaker, the finish pipeline | recipe |
| [`motion/criteria.md`](/Users/unctad/Claude/9%20-%20System/ui-ux/motion/criteria.md) | 21 dated verdicts — mostly about the speaker (face/voice/finish), none about literal object illustrations | rule |
| `motion/reference-*.html` (5 files) | Decoded external techniques: Higgsfield tutorial, NovaAI scrub prompt, Marcus person-on-top prompt, motionsites.ai analysis, AI-Studio full process | example |
| [`inspiration/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/inspiration/index.html) + `references.md` + `trends.html` + `viktoroddy/` (10 digests) | Where-to-look galleries (mobbin, godly, motionsites…) and 10 decoded award-winning builds | example |
| [`people/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/people/index.html), `factory.html`, `make-your-own.html`, `speaker-*.html` | Speaker vocabulary (sizes, still/moving), the factory cost pipeline, the 3-road wizard front | recipe |
| [`image-models-for-skills-2026-08.md`](/Users/unctad/Claude/9%20-%20System/ui-ux/image-models-for-skills-2026-08.md) | Priced comparison of image engines (Gemini, GPT Image 2, Recraft, Higgsfield…) for Lane A (illustration) vs Lane B (UI mockups) | reference |
| [`index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/index.html) | Front door gallery, thumbnail per capability, deliberately compact hero ("cards own the first screen") | navigation |
| [`film.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/film.html), [`voice/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/voice/index.html) | Film/storyboard recipe; narration/voice routing | recipe |

Skills read for this audit (frontmatter + first 40 lines):

| Skill | Covers |
|---|---|
| [`concept-diagrams`](/Users/unctad/.claude/skills/concept-diagrams/SKILL.md) | Abstract 2D/3D concept illustration only — explicitly NOT engineer box-and-arrow, NOT charts, NOT people |
| [`sitio-cinematico`](/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md) | Whole-site build from one visual reference: scene → animation → hero → rest of site |
| [`photo-avatar-video`](/Users/unctad/.claude/skills/photo-avatar-video/SKILL.md) | One photo → talking video, 5 sizes, defers vocabulary to `people/index.html` |
| [`site-speaker`](/Users/unctad/.claude/skills/site-speaker/SKILL.md) | Full speaking-person recipe on a live page |
| [`replit-capture`](/Users/unctad/.claude/skills/replit-capture/SKILL.md) | Captures REAL style from a Replit app — not image generation |
| [`higgsfield-generate`](/Users/unctad/.claude/skills/higgsfield-generate/SKILL.md) | Generic image/video/3D/audio jobs via Higgsfield CLI |
| `higgsfield-game-generation` / `-marketplace-cards` / `-product-photoshoot` / `-soul-id` / `-video-explainer` / `-websites` | Specialized Higgsfield flows: games, marketplace listing cards, brand product photos, face-identity training, non-photoreal narrated explainers, full sites |
| [`make-your-speaker`](/Users/unctad/.claude/skills/make-your-speaker/SKILL.md) | Wizard, 3 roads to a speaker (existing / new invented / yourself) |

## 2. The gap — what cannot be built today

1. **No recipe for a literal, recognizable scene.** `concept-diagrams` is explicitly abstract (bridges, networks, orbits) and explicitly excludes mechanism figures and people. Nothing in the Studio covers "a person at a desk, a group with phones, a results board" — a concrete, figurative scene. When a session needs exactly that, it has no door to walk through and defaults to hand-coding boxes.
2. **No rule against coding representational objects.** Nowhere in the Studio does it say "never draw a desk, a monitor or a phone as an SVG/CSS shape — generate it." This is the literal 1980s-clip-art failure, and it is unnamed.
3. **The Studio's own bank contradicts Frank's sharpest verdict.** `diagramas/index.html` welcomes "crafted" non-photoreal materials (clay, paper) as equal to photoreal ones. But a project verdict — [`SCRC/VoxPopuli/voxpopuli-design-spec.md`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/voxpopuli-design-spec.md) line 448 — says the opposite for a literal scene: *"jamais un dessin peint ou stylisé… I don't want realistic drawings. I want pictures."* That correction never reached the Studio; the two documents disagree and neither cites the other.
4. **No static-hero recipe between "nothing" and "video."** `motion-design.html` covers entrance timing only for pages that already committed to a video master (cost, GPU, factory). Nothing covers the cheap, fast static hero image a brochure or a slide deck needs when there is no video budget — such pages fall through and ship a gradient or a coded shape instead.
5. **No self-check question for realism or readability.** The Studio's own pre-flight (`README.md` §"The self-check") asks about hierarchy, grayscale, composition and tokens — never "does this image look real, and can a stranger name every object in it."

## 3. Evidence of non-use — shipped heroes and entrances, judged

| Path | Judgment |
|---|---|
| [`VoxPopuli/presentation/loop3d/variant-a.html`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/presentation/loop3d/variant-a.html) (and `-b`, `-c`, `-d-chamonix`) | **Worst.** Hand-coded SVG/CSS 3D: a desk is a red-and-navy box, phones are white rectangles, results are colored bars on a stand. Flat, geometric, exactly the 1980s-clip-art complaint — built 08-08-2026, three days after the project's own photoreal verdict |
| [`VoxPopuli/voxpopuli-site-redesign.html`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/voxpopuli-site-redesign.html) | Hero has no image or video at all — gradient background, text and buttons only |
| [`VoxPopuli/voxpopuli-site-current.html`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/voxpopuli-site-current.html) | Same — gradient hero, no image, the version presented as "current" |
| [`VoxPopuli/presentation/loop.jpg`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/presentation/loop.jpg) | A warm painted/illustrated scene, legible and attractive — but itself the style Frank later corrected away from ("I want pictures, not drawings") |
| [`VoxPopuli/presentation/loop-options.html`](/Users/unctad/Claude/6%20-%20Private/SCRC/VoxPopuli/presentation/loop-options.html) + `drawings/loop-j*.png`–`loop-l*.png` | The corrected, photographic candidates — proof the rule works once followed; superseded the painted and coded versions |
| [`9 - System/ui-ux/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/index.html) | Front door itself carries no entrance image or video — a deliberate compact hero; the Studio does not apply its own motion doctrine to itself |
| [`9 - System/ui-ux/diagramas/index.html`](/Users/unctad/Claude/9%20-%20System/ui-ux/diagramas/index.html) gallery | 8 generated (not coded) studies, legible, several genuinely attractive — the working proof the recipe succeeds when actually used |
| [`3 - Projects/informality/informality.html`](/Users/unctad/Claude/3%20-%20Projects/informality/informality.html) | Real embedded photo hero — realistic and attractive |
| [`3 - Projects/sez-central-asia-brochure/`](/Users/unctad/Claude/3%20-%20Projects/sez-central-asia-brochure/README.md) | Real screenshots/photo assets, swappable hero via `set-hero.sh` — realistic |

## What is missing, in one list

1. A named recipe for a literal, recognizable scene (people, objects, a process) as a generated static image — sits between `concept-diagrams` (abstract only) and `motion-design.html` (video only).
2. A standing Studio law: never hand-code a representational object (desk, phone, monitor) in SVG/CSS — generate it.
3. Reconciling `diagramas/index.html`'s "crafted materials welcome" with Frank's later "pictures, not drawings" verdict — one must yield, in writing, in the Studio.
4. A cheap static-hero recipe for pages with no video budget (brochures, decks) — today they get nothing or a gradient.
5. A realism/readability line in the Studio's self-check: can a stranger name every object on sight.
6. The VoxPopuli photoreal verdict promoted from a project-local spec file into the Studio, so it protects every project, not one.
7. A worked, banked example of a literal scene (like the loop-j/k/l photographs) added to the diagram bank as its own category, alongside the abstract ones.
8. A one-line test at delivery: "coded shapes or a generated image?" — asked before any hero or entrance ships.