← Studio library

Images and page entrances, the audit

Reference notes. Source retained; historical claims may need rechecking.

Studio reference illustration

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/).

1. Inventory — what the Studio already owns

Path What it is Type
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 Method to build an abstract 2D/3D concept diagram (bridge, network, constellation…), Gemini default engine recipe
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 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 + references.md + trends.html + viktoroddy/ (10 digests) Where-to-look galleries (mobbin, godly, motionsites…) and 10 decoded award-winning builds example
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 Priced comparison of image engines (Gemini, GPT Image 2, Recraft, Higgsfield…) for Lane A (illustration) vs Lane B (UI mockups) reference
index.html Front door gallery, thumbnail per capability, deliberately compact hero ("cards own the first screen") navigation
film.html, voice/index.html Film/storyboard recipe; narration/voice routing recipe

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

Skill Covers
concept-diagrams Abstract 2D/3D concept illustration only — explicitly NOT engineer box-and-arrow, NOT charts, NOT people
sitio-cinematico Whole-site build from one visual reference: scene → animation → hero → rest of site
photo-avatar-video One photo → talking video, 5 sizes, defers vocabulary to people/index.html
site-speaker Full speaking-person recipe on a live page
replit-capture Captures REAL style from a Replit app — not image generation
higgsfield-generate 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 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 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 (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 Hero has no image or video at all — gradient background, text and buttons only
VoxPopuli/voxpopuli-site-current.html Same — gradient hero, no image, the version presented as "current"
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 + 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 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 gallery 8 generated (not coded) studies, legible, several genuinely attractive — the working proof the recipe succeeds when actually used
3 - Projects/informality/informality.html Real embedded photo hero — realistic and attractive
3 - Projects/sez-central-asia-brochure/ 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.

Source previewDownload original source