# Image Policy

This variant keeps the user's high image-quality standard.

## What To Keep

Keep:

- large generated images
- friendly educational diagrams
- hand-drawn or illustrated warmth when useful
- clear visual metaphors
- tab-specific images when tab content changes
- image QA and regeneration when quality is low

The user explicitly said the hand-drawn educational image feel can remain because similarity concerns are mainly about the page UI, not the idea of using friendly explainer illustrations.

## What To Change

Change:

- how images are framed
- surrounding UI
- color palette around the images
- caption treatment
- image size/placement rhythm
- section transitions around images
- color mood when the previous image palette feels too similar

For example:

- use an image as a full-width board insert
- place image beside a crisp command panel
- use split image + checklist sections
- use image strips or chapter openers
- use a dashboard frame around a diagram

## Default Image Prompt Base

Use this base, adapted to topic:

```text
Create a high-quality Japanese educational explainer illustration for a seminar HTML document.
Friendly, clear, premium, and easy to understand for beginners.
Use concrete scenes, tools, people, arrows, panels, maps, and examples that teach the idea visually.
Keep Japanese labels short and readable; do not rely on long text inside the image.
Make the composition suitable for a large web lecture page.
Avoid photorealistic stock style, generic corporate 3D, unreadable dense text, and placeholder-looking line charts.
```

Then add the chosen UI direction context:

```text
This image will be embedded in a [Studio Playbook / Workshop Board / Product Manual] style HTML page, so keep the image compatible with that surrounding UI.
```

For the approved Warm Studio pattern, add:

```text
Make the image more colorful and fresh than the older muted cream/rust version.
Use teal, coral, sunny yellow, sky blue, mint green, and soft lavender accents on a warm off-white base.
Keep the same teaching meaning, but make the color mood clearly different and more energetic.
```

Bundled visual reference:

`assets/colorful-route-shift-sample.png`

Use this as a mood reference for "same teaching meaning, more colorful distinct image". Do not reuse it blindly if the topic changes.

## Do Not Force Every Image Into The Same Texture

To avoid repeated visual identity, vary:

- panel count
- perspective
- framing
- label placement
- color accent balance
- whether people, tools, maps, or outputs are central

## Text Reliability

Generated image text can be imperfect. Critical facts belong in HTML.

Regenerate if:

- central labels are unreadable
- the image has fake UI text that could confuse the audience
- the output looks like random horizontal lines
- the visual does not clearly teach the intended idea

## Detail Images For Tabs

Generate one image per tab when tab content changes.

Do not reuse a single overview image for every state.

Each detail image should answer:

- what is being demonstrated?
- what does the learner see?
- why is it useful?

## Similarity Check For Images

Images may remain illustrated, but avoid identical repetition:

- not every major image should be a cream paper poster
- not every diagram should use the same banner/title treatment
- not every figure should use the same warm palette
- not every image should have the same 4-corner layout
- first-route images should not all share the exact same cream/rust/brown color mood

Use the surrounding UI to differentiate, and vary image composition when possible.
