# Current Exemplar: Urachika Offline AI Monetize

This reference captures the successful deck pattern the user wants repeated.

## Exemplar Artifact

Local exemplar, if available:

`(制作者のローカル環境で生成した実例。配布キットには同梱していません)`

Live deployment from the original session:

`https://offlineaimonetize.vercel.app/`

Do not hard-code this topic into new work. Use it as a style and quality reference.

## Why The User Liked It

The final result worked because it combined:

- a clear seminar thesis
- a long-form HTML document instead of slide fragments
- large generated explainer images
- warm Japanese editorial styling
- practical tables, prompts, and worksheets
- fact-checking and safer claim wording
- interactive tabs that supported the lecture
- Vercel deployment for easy community sharing

## User Corrections That Must Become Defaults

### Replace `TL;DR`

The user found `TL;DR` unclear. Use:

`要点まとめ`

or another plain Japanese heading.

### Avoid One-Kanji Badges

The user disliked badges like:

- `難`
- `近`
- `空`
- `壁`

Use icon/illustration badges instead. Inline SVG icons are acceptable; lucide icons are preferred when a frontend icon library already exists.

### Make Images Large

The user repeatedly noticed images becoming too small. If an image explains a section, give it full-width or dominant space.

In the exemplar, section 03 "誰に教えるか" became better after the generated image was shown large instead of squeezed into a small column.

### Repeat Controls Near The Affected Content

In section 04, the top tabs controlled content below a large image, making the interaction awkward. The fix was to duplicate the tab controls below the large image, directly above the detail panel. Both tab bars stayed synchronized.

This should become a reusable rule:

If controls and target content are separated by a large visual, duplicate the controls near the target.

### Image Placeholders Are Not Acceptable Final Output

The user rejected low-quality image areas that looked like generic horizontal lines. Every image slot must receive a real generated image or a meaningful designed visual.

### Images Matter More Than Usual

For this user's seminar HTML documents, images are not optional. They are part of the teaching. Plan, generate, inspect, and regenerate if needed.

## Successful Structure In The Exemplar

The Urachika deck used:

1. hero with thesis and metadata chips
2. `要点まとめ`
3. large hero illustration
4. sticky table of contents
5. why the default route is hard
6. comparison table
7. "middle level is enough" positioning section
8. large relationship/network illustration
9. practical "who to teach" section
10. "what to teach" tabbed demo section
11. course structure/timeline
12. interactive 0-to-1 offer worksheet
13. fact-check/safe wording table
14. homework
15. dark conclusion
16. official-source footer

This is a strong default for future seminar pages.

## Visual Tone

The winning tone:

- warm cream paper
- subtle grid background
- editorial Japanese explainer
- gentle hand-drawn illustrations
- rust/orange, gold, green, blue accents
- cards with modest 8-10px radii
- bold Japanese headings
- practical, human, not corporate-slick

Avoid making it look like:

- a generic landing page
- a Notion export
- a technical docs page
- a dark SaaS dashboard
- a stock-image blog article

## Useful Implementation Pattern

The exemplar used:

- `index.html`
- CSS variables for theme colors
- sticky progress bar
- sticky horizontal TOC
- `.shell` and `.wide-shell`
- `.card`, `.note`, `.compare`, `.dark-box`
- generated image assets in `assets/`
- SVG fallback hidden when generated bitmap exists
- JavaScript for progress, tabs, copy buttons, and worksheet output

Reuse the pattern conceptually, but adapt content and visuals to the new seminar topic.
