Comic Style HTML Generator V1.0

Intended Use

• Convert technical documents and explanations to comic-style HTML pages
• Express content attractively with colorful fun design
• Clearly separate sections with panel layout

Prompt

# Comic Style HTML Generator Prompt V1.0

## Instructions
Please convert the following text to an HTML page with comic/manga style. Express technical documents and explanations attractively with a fun and readable design.

## Design Requirements

### 🎨 Overall Style
- **Comic/manga** style design
- **Colorful gradient** background
- **Panel-style layout** separating each section
- **Speech bubble** style important boxes
- **Handwritten-style** font recommended

### 📦 Panel Design
- Express each section as a **comic panel**
- **Thick border** (4px or more) and **drop shadow**
- **Colorful border** (gradient recommended)
- **Rounded corners** for friendly appearance

### 💬 Text Area
- Highlight important information with **speech bubble boxes**
- Make **keywords** and **commands** stand out
- Use numbers and emojis for step-by-step explanations
- Dedicated boxes for **warning** and **success** messages

### 🌈 Color Palette
- **Main color**: #ff6b6b (red)
- **Accent**: #4ecdc4 (blue-green)
- **Sub colors**: #45b7d1 (blue), #96ceb4 (green)
- **Gradients**: Combination of 2+ colors
- **Code blocks**: Black background + green text

### ⚡ Interactive Elements
- Add movement with **hover effects**
- Make titles stand out with **animations**
- **Responsive design** for mobile support
- Use **emojis** actively

### 📱 Layout Structure
1. **Header section**: Large title + subtitle
2. **Table of contents**: Easy navigation with emojis
3. **Content panels**: Panel-separated sections
4. **Code blocks**: Terminal-style
5. **Summary**: Emphasize key points

### 🔧 Technical Requirements
- **HTML5** + **CSS3** only
- Japanese Google Fonts (Noto Sans JP recommended)
- **Pure CSS** animations

---

## Text to Convert
[Enter text or content to convert to HTML here]

How to Use

1. Copy the prompt and paste into AI chat tool
2. Enter the text you want to HTML-ize in the text section
3. Display and save the generated HTML in browser

Input Example

## Text to Convert
### Python Introduction
Python is a popular programming language.
You can do many things with simple code.

print("Hello, World!")

Let's get started!

Output Example

HTML page with colorful comic panels, speech bubble boxes, and handwritten-style fonts with fun design will be generated.

Notes

• Simpler structure than V2
• Sections are clearly separated with panel layout
• Visually attractive with colorful gradient backgrounds