# Image Generation Playbook

Images are the main quality multiplier for this skill.

## Image Standard

A finished seminar HTML page should not rely on placeholder visuals.

Every major image should:

- teach one idea
- be large enough to inspect
- match the page's warm editorial style
- be generated at high resolution
- avoid dense paragraphs inside the image
- use minimal labels, with precise explanation in HTML text nearby

## When To Generate Images

Generate images for:

- hero thesis
- abstract concept made concrete
- comparison between approaches
- workflow or funnel
- map of relationships/stakeholders
- demo menus
- tab-specific examples
- before/after transformations

Do not generate images for:

- simple icons that inline SVG can handle
- text tables better expressed in HTML
- source logos or copyrighted UI replicas unless explicitly allowed and necessary

## Default Style Prompt

Use this as the base visual style, adapting topic details:

```text
Create a premium Japanese editorial explainer illustration for a seminar HTML document.
Warm cream paper background, subtle hand-drawn ink lines, soft watercolor accents, friendly but professional.
Japanese educational diagram, clear visual hierarchy, 4 to 6 visual zones, readable composition.
Use simple Japanese labels only where necessary; avoid long paragraphs inside the image.
Show concrete scenes, tools, people, arrows, cards, maps, and examples that explain the concept visually.
Color palette: rust orange, muted gold, sage green, muted blue, charcoal ink, warm beige.
No photorealistic stock style, no dark blur, no generic corporate 3D, no tiny unreadable text, no kanji-only badge labels.
Landscape aspect ratio suitable for a wide HTML lecture page.
```

## Prompt Anatomy

For each image, specify:

1. topic and teaching point
2. audience context
3. visual metaphor
4. number of zones/panels
5. required labels
6. things to avoid
7. aspect ratio and usage

Example:

```text
Teaching point: Beginners can monetize faster by teaching AI offline than by fighting expert AI creators online.
Create a wide Japanese explainer illustration with two sides:
Left: crowded online SNS arena with many AI experts, metrics, posts, and competition.
Right: local offline community with a small shop owner, company worker, and beginner asking for AI help.
Center: arrow showing "戦う場所をずらす".
Keep labels short. Use warm cream paper, hand-drawn ink, rust/gold/green/blue accents.
The image must be beautiful enough to be a main hero image in a seminar HTML page.
```

## Detail Images For Tabs

When building a tabbed demo section, generate one image per tab.

The image should reflect the selected tab, not repeat the same generic overview.

For example:

- AI基礎: prompt + context + outputs for email/meeting notes/post
- 画像生成: flyer/SNS/menu visuals being generated
- 資料作成: slide/proposal/LP draft workflow
- NotebookLM: sources -> summary/Q&A/audio/video overview
- AI Studio: prompt -> app preview -> test/share

## Managing Text Inside Generated Images

Generated image text can be imperfect. Use text inside images for flavor and orientation, not for exact claims.

Precise information belongs in HTML:

- headings
- captions
- tables
- cards
- source footer

If the generated image contains garbled critical text, regenerate. If the garbled text is minor decorative handwriting, it may be acceptable only when the HTML around it explains the point clearly.

## Quality Gate

Inspect every image.

Reject and regenerate if:

- it looks low-resolution
- it has random horizontal lines or placeholder rectangles
- it is mostly text
- it has unreadable central labels
- it is off-topic
- it uses a different style from the rest of the page
- it is too dark or stock-like
- people/tools look distracting or strange
- the image will be displayed too small to matter

## HTML Placement

Use images like this:

```html
<figure class="card hero-visual has-generated">
  <img
    class="visual-img"
    src="assets/topic-hero.png"
    alt="..."
    width="1792"
    height="1024"
  />
  <figcaption class="caption">...</figcaption>
</figure>
```

If you keep an SVG fallback, hide it when the generated image exists:

```css
.hero-visual.has-generated > .svg-visual,
.mini-demo.has-generated > svg {
  display: none;
}
```

## Image Size And Cropping

Prefer wide landscape images for main visuals.

Good default:

- main visuals: roughly 16:9 or 1.7:1
- detail/tab visuals: wide landscape
- avoid square images unless the layout gives them enough space

If a generated image is displayed in a two-column layout and becomes too small, change the layout. Do not accept tiny explanatory images.

## File Naming

Use clear asset names:

- `hero-route-shift.png`
- `level-positioning.png`
- `network-map.png`
- `demo-menu.png`
- `demo-ai-basic.png`
- `demo-image-generation.png`

Avoid vague names like:

- `image1.png`
- `diagram-final-final.png`

## Accessibility

Alt text should explain the image's function:

Bad:

`図解`

Good:

`SNSで強いAI発信者と競うより、地元の初心者にAIを教える方が始めやすいことを示す比較図`
