# Style Selection For Note Article Visuals

## Reference Priority

Use the strongest available reference, in this order:

1. User-specified style reference for this request.
2. `references/style-atlas-40.md` (bundled 40-style design atlas) or `references/style-presets.md` (bundled drawing presets).
3. Supplied screenshots or local images.
4. Supplied HTML/CSS portfolio examples.
5. Supplied motion demos, GIF, mp4, or webm.

## What To Extract

Do not copy a reference literally. Extract:

- color system
- typography feel
- density and spacing
- image crop style
- illustration vs photo vs diagram balance
- CTA or label treatment if making article cards
- border, shadow, and corner style
- NG signals

For note articles, adapt LP references down to article scale. A strong LP hero style may become an eyecatch; a card section may become a mid-article diagram; a CTA style may become a recap card.

## Diagram Content Rule

When the requested output is a diagram/card image, separate these two things:

- **Content source:** the current article, HTML, brief, or section text. This decides the title, bullets, comparison labels, arrows, conclusion, and order.
- **Style source:** LP atlas, screenshot, portfolio, or reference image. This decides color, typography feel, border/shadow style, density, and card layout.

Never use the reference screenshot's topic or wording just because it is visually similar. If the user says "こういう画像", read it as "this kind of diagram composition/taste", then remake the image with the current article/HTML content.

When the user asks to choose a diagram or HTML visual taste, present relevant styles from `references/style-atlas-40.md` as choices, then apply the chosen style to the new content-specific diagram.

## Common Note Image Types

- `article-eyecatch`: one strong image for the top of the article.
- `chapter-card`: title-card image for a major section.
- `diagram-card`: visual explanation of a process, framework, or contrast.
- `scene-photo`: realistic or photo-like scene matching the reader's situation.
- `checklist-card`: list or steps with short Japanese text.
- `summary-card`: final recap with 3-5 points.

Default to `article-eyecatch`, `scene-photo`, cinematic illustration, lifestyle illustration, or another preset-matched article image for ordinary note article images. Do not create text-heavy cards by default. Use card/diagram/checklist images only when the request explicitly asks for 図解, カード, 比較表, 手順画像, or summary cards.

## Interval Rules

Default to one visual every 800-1200 Japanese characters. Override when:

- The article has many short H2 sections: use every 2 H2s.
- The article is narrative: use scene images at emotional turns, not mechanical intervals.
- The article is a tutorial: use images at steps or checkpoints.
- The article is a sales/note article: use eyecatch, problem scene, mechanism diagram, proof/offer image, final summary.

## Motion References

Motion can be referenced for mood and interaction, but note paste output is usually static.

Use motion references to infer:

- reveal timing
- soft vs snappy feel
- hover/press personality
- scroll rhythm
- how images should sequence

Only implement actual animation when the output is a standalone HTML article or LP. For note, translate motion into static visual rhythm such as repeated labels, progressive cards, or before/after sequencing.

## Prompt Quality Rules

For generated raster images:

- Specify aspect ratio per role:
  - eyecatch: 16:9 or 4:3
  - chapter card: 16:9
  - diagram/checklist/summary: 4:3 or square
  - portrait/social preview: 4:5
- Include "Image 2.0相当", "高品質", and the selected style.
- Include exact Japanese text when text is needed.
- Keep text short inside images. Prefer 3-7 words for title text and 3-5 bullets max.
- Avoid dense paragraphs inside generated images.
- If the user provides a screenshot of a note article with a large inserted image, mimic the role and feel of that inserted image: a standalone visual that supports the paragraph, usually without text.

For editable diagrams:

- Use HTML/SVG/slide assets instead of raster image generation.
- Keep text selectable and easy to revise.
