Mystic Library

English

日本語

English

日本語

Appearance

Editable Graphic Recording v2 ​

Intended Use ​

  • Editable graphic recording with Japanese modern design
  • Visual expression utilizing Font Awesome
  • Intuitive interactive graphic recording

Prompt ​

text
# Editable Graphic Recording Prompt v2

This prompt is a comprehensive requirement definition for automatically generating a **Japanese-editable infographic HTML** with a **Japanese modern** design. By **actively utilizing Font Awesome**, it creates a visually easy-to-understand and intuitively operable graphic recording tool.

## 🎨 Design Specifications

### 1. Color Scheme (Japanese Modern Palette)
| Name | HEX | Primary Use | Font Awesome Icon Examples |
|------|-----|-------------|---------------------------|
| Primary | #8B4513 | Titles, important backgrounds | `<i class="fas fa-mountain"></i>` |
| Secondary | #CD853F | Accents, links | `<i class="fas fa-leaf"></i>` |
| Accent | #DEB887 | Highlights, decorations | `<i class="fas fa-cherry-blossom"></i>` |
| Neon-Gold | #FFD700 | Hover, glow effects | `<i class="fas fa-star"></i>` |
| BG-Dark | #FFFFFF | Basic background | `<i class="fas fa-circle"></i>` |
| BG-Light | #FFF8F0 | Section background | `<i class="fas fa-square"></i>` |

*Background uses washi paper tone white (BG-Dark), body text uses deep brown (#2F1B14), and auxiliary text uses warm brown (#5D4037). Define these 6 colors as CSS variables and use gradients (Primary→Secondary) extensively to create Japanese unified feel.*

### 2. Typography & Font Awesome Utilization Strategy
- **Japanese fonts**: `Kaisei Decol` (Japanese headings, important text) / `M PLUS Rounded 1c` (body text, UI elements) / `Bebas Neue` (alphanumeric, emphasized numbers)
- **Title (h1)**: clamp(4rem,10vw,8rem) / 400 / **Kaisei Decol** / Japanese modern gradient / ***Use Japanese icons like `<i class="fas fa-torii-gate"></i>` in combination***
- **Subtitle (h2)**: clamp(2.5rem,6vw,4rem) / 400 / **Kaisei Decol** / ***Express section dividers with `<i class="fas fa-bamboo"></i>` `<i class="fas fa-fan"></i>` etc.***
- **Heading (h3)**: clamp(1.8rem,4vw,2.5rem) / 400 / **Kaisei Decol** / ***Category identification with `<i class="fas fa-origami-crane"></i>` `<i class="fas fa-bonsai"></i>`***
- **Body text, UI elements**: 16px / 400 / **M PLUS Rounded 1c** / Emphasize readability and approachability
- **Font Awesome Integration Strategy**:
  - 📊 Data display: `<i class="fas fa-chart-bar"></i>` `<i class="fas fa-chart-pie"></i>` `<i class="fas fa-chart-line"></i>`
  - 🎯 Important points: `<i class="fas fa-bullseye"></i>` `<i class="fas fa-exclamation-triangle"></i>` `<i class="fas fa-lightbulb"></i>`
  - 📝 Edit functions: `<i class="fas fa-edit"></i>` `<i class="fas fa-save"></i>` `<i class="fas fa-undo"></i>`
  - 🔄 Process: `<i class="fas fa-arrow-right"></i>` `<i class="fas fa-sync-alt"></i>` `<i class="fas fa-check-circle"></i>`
  - 👥 People, organizations: `<i class="fas fa-user"></i>` `<i class="fas fa-users"></i>` `<i class="fas fa-building"></i>`

### 3. Layout & Font Awesome Placement Strategy
1. **Header**:
   - Left: `<i class="fas fa-scroll"></i>` + title
   - Right: `<i class="fas fa-calendar-alt"></i>` + date / `<i class="fas fa-link"></i>` + source
2. **2-column layout**: Left 50% / Right 50%
3. **Card elements**:
   - Washi paper texture background + rounded corners 12px + subtle shadow
   - Place large relevant Font Awesome icons at top of cards
   - `<i class="fas fa-info-circle"></i>` `<i class="fas fa-question-circle"></i>` `<i class="fas fa-cog"></i>` etc.
4. **Section dividers**: Use three `<i class="fas fa-minus"></i>` in a row as Japanese decorative lines
5. **Navigation**: Intuitive operation with `<i class="fas fa-chevron-up"></i>` `<i class="fas fa-chevron-down"></i>`

### 4. Japanese Modern Decorative Elements
- **Background pattern**: Lightweight SVG implementation of hemp leaf pattern (asanoha)
- **Accents**: Subtly place `<i class="fas fa-yin-yang"></i>` `<i class="fas fa-dragon"></i>`
- **Glassmorphism**: Express washi paper transparency when emphasizing important data
- **Subtle animation**: Subtle movement like cherry blossom petals dancing

---

## ⚙️ Technical Specifications

### 1. Basic Structure
- **HTML/CSS/JavaScript single file** (external dependencies: Google Fonts [Kaisei Decol + M PLUS Rounded 1c] + Font Awesome CDN)
- **Required font settings**:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
  • CSS class definitions:
css
.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  • Screen ratio: 16:9 or 4:3
  • Responsive support: <meta name="viewport" content="width=device-width, initial-scale=1">

2. Edit Mode Button (Required Implementation) ​

html
<button id="toggleEdit" style="position:fixed;top:15px;right:15px;z-index:9999;background:var(--primary-color);color:white;border:none;padding:10px 15px;border-radius:8px;cursor:pointer;" class="m-plus-rounded-1c-regular">
    <i class="fas fa-edit"></i> Edit Mode
</button>

<script>
const btn = document.getElementById('toggleEdit');
let editing = false;
btn.onclick = () => {
    editing = !editing;
    document.body.contentEditable = editing;
    document.designMode = editing ? 'on' : 'off';
    btn.innerHTML = editing ?
        '<i class="fas fa-save"></i> End(Save: File → Save Page As)' :
        '<i class="fas fa-edit"></i> Edit Mode';
    btn.style.background = editing ? 'var(--neon-gold)' : 'var(--primary-color)';
    btn.style.color = editing ? 'var(--text-primary)' : 'white';
};
</script>

3. Font Awesome Icon Usage Code Examples ​

html
<!-- Section header example -->
<h2 class="kaisei-decol-regular"><i class="fas fa-mountain" style="color:var(--primary-color);margin-right:10px;"></i>Design Specifications</h2>

<!-- Data display card example -->
<div class="data-card">
    <div class="card-header">
        <i class="fas fa-chart-pie fa-2x" style="color:var(--accent-color);"></i>
        <h3 class="kaisei-decol-regular">Statistical Data</h3>
    </div>
    <div class="card-content m-plus-rounded-1c-regular">
        <p><i class="fas fa-arrow-up" style="color:green;"></i> 120% improvement year-over-year</p>
    </div>
</div>

<!-- Process flow example -->
<div class="process-flow">
    <div class="step m-plus-rounded-1c-regular">
        <i class="fas fa-play-circle fa-2x"></i>
        <span>Start</span>
    </div>
    <i class="fas fa-arrow-right fa-2x" style="color:var(--secondary-color);"></i>
    <div class="step m-plus-rounded-1c-regular">
        <i class="fas fa-cogs fa-2x"></i>
        <span>Process</span>
    </div>
    <i class="fas fa-arrow-right fa-2x" style="color:var(--secondary-color);"></i>
    <div class="step m-plus-rounded-1c-regular">
        <i class="fas fa-check-circle fa-2x"></i>
        <span>Complete</span>
    </div>
</div>

4. Background Decoration (Recommended Implementation) ​

  • Washi paper texture: Texture expression with CSS filter: blur(0.5px)
  • Hemp leaf pattern: SVG implementation, pointer-events:none;
  • Cherry blossom petal animation: Subtle falling effect with CSS @keyframes

5. Accessibility & Usability ​

  • Font Awesome icons: Must include aria-label or title attributes
  • Color contrast: WCAG 2.1 AA compliance
  • Keyboard navigation: Set logical tab order
  • Screen reader support: Semantic HTML + appropriate ARIA attributes

🎯 Important Implementation Points ​

Notes on Font Awesome Utilization ​

  1. Performance: Use only necessary icons and load Font Awesome CDN efficiently
  2. Consistency: Unify icons with the same meaning and maintain visual hierarchy
  3. Japanese taste: Avoid icons that are too Western, harmonize with Japanese elements as much as possible
  4. Responsive: Use appropriate icon sizes with fa-lg fa-2x fa-3x
  5. Animation: Use fa-spin fa-pulse sparingly

Essence of Japanese Modern Design ​

  • Aesthetics of whitespace: Create breathing space with appropriate whitespace
  • Natural colors: Warm palette based on earth, wood, and washi paper colors
  • Typography: Express the beauty of vertical writing even in horizontal layouts
  • Simplicity: Minimal decoration, emphasizing functional beauty

The HTML generated according to this prompt will be an editable high-quality graphic recording tool that fuses traditional Japanese aesthetics with modern UI/UX.

Text to Convert to Graphic Recording ​


## How to Use

1. Input the prompt to AI
2. Add the text content you want to transform
3. Editable HTML will be generated

## Input Example

[Meeting content to transform into graphic recording]


## Output Example

```html
<!-- Editable graphic recording HTML -->
<button id="toggleEdit">
  <i class="fas fa-edit"></i> Edit Mode
</button>
<script>
  // Edit mode toggle functionality
</script>

Notes ​

  • Maintain consistency of Japanese modern design
  • Place Font Awesome icons effectively
  • Ensure edit functionality is implemented