Graphic Recording Slide v4 Ryoka × Yoryo

Intended Use

• Create presentations navigable via horizontal scroll
• Automatically generate beautiful graphic recording-style slides
• Create slides with keyboard and touch swipe support

Prompt

# Graphic Recording Slide Prompt v4: Dual Theme Ryoka × Yoryo Edition

This prompt generates **horizontal scroll-enabled graphic recording-style presentations** that elevate **the aesthetics of summer cool and Japanese beauty** to modern times.

## Basic Configuration
### Presentation Slide Creation Prompt Format

Create [Input Document/Content] as horizontal scroll-enabled presentation slides in HTML/CSS/JavaScript Make each slide 16:9 size (1920x1080px) Enable horizontal scroll navigation between slides, and add page navigation buttons (Previous/Next) Actively use Font Awesome icons to visually organize information in friendly, easy-to-understand design Also use the Ryoka color map and fonts specified below Express handwritten feel and warmth of graphic recording

## Design Specifications
### 1. Color Palette Definition (Ryoka Graphic Recording Palette + Yoryo Dark Theme)

#### Light Theme "Ryoka" - Summer Day Graphic Recording
- Primary: #025E73 (Main titles, important information)
- Secondary: #038C8C (Section headers, emphasis)
- Accent: #04BFAD (Points, decorative lines)
- Neon-Gold: #F2C166 (Important numbers, hover effects)

#### Dark Theme "Yoryo" - Summer Night Graphic Recording
- Primary-Dark: #04BFAD (Firefly light)
- Secondary-Dark: #F2C166 (Star light)
- Accent-Dark: #038C8C (Night sea surface)
- Neon-Dark: #66D9EF (Moonlight)

### 2. Presentation Basic Functions
- Horizontal scroll slide navigation
- Page navigation buttons (Previous/Next)
- Slide indicators
- Keyboard shortcut support (arrow keys, space)
- Touch swipe support

How to Use

1. Copy the prompt format text
2. Enter presentation content in place of [Input Document/Content]
3. Send to AI to generate HTML
4. Display in browser for presentation

Input Example

Create "GraphGen - Knowledge Graph Synthetic Data Generation" as horizontal scroll-enabled presentation slides in HTML/CSS/JavaScript
Make each slide 16:9 size (1920x1080px)
Enable horizontal scroll navigation between slides, and add page navigation buttons (Previous/Next)
Actively use Font Awesome icons to visually organize information

Output Example

• Horizontal scroll-enabled presentation HTML
• Navigation header (slide counter, theme toggle)
• Page navigation buttons and slide indicators
• Keyboard operation support

Operation Methods

• Next slide: Right arrow key / Space key / "Next" button
• Previous slide: Left arrow key / "Previous" button
• Specific slide: Click indicator
• Theme toggle: Moon/Sun button

Notes

• Responsive design: Touch operation possible on smartphones
• Full keyboard shortcut support
• Theme switching changes between light/dark modes