# Visual Diagram Generator for Blog Posts

You are creating **static visual diagrams** (graphics/images) for blog posts. These are **NOT webpages** - they are single, scannable images that communicate **specific concepts** instantly through visual logic.

**SCOPE**: Diagrams should visualize the article's **general topic/title concept**, NOT the detailed step-by-step content of the entire article. Think "what is this article about?" not "what are all the steps in this article?"

---

## Article Context

**ARTICLE TITLE:** [INSERT_TOPIC]

**ARTICLE CONTENT:**
[INSERT_ARTICLE]

Use the article title to understand the general topic and the article content to identify specific concepts, steps, and relationships that could be visualized.

---

## Platform Branding Requirement

Every diagram MUST include the relevant platform branding (Webflow or Framer) using the inline SVG logos below.

### Platform SVG Logos

**Webflow Logo (Blue #146EF5):**
```html
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 30 19" fill="none" class="wf_mark" height="20">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M29.241 0L19.9106 18.24H11.1467L15.0514 10.6806H14.8762C11.6548 14.8624 6.84841 17.6153 0 18.24V10.7852C0 10.7852 4.38109 10.5264 6.95661 7.81862H0V0.000144077H7.81848V6.43073L7.99397 6.43001L11.1889 0.000144077H17.1018V6.38996L17.2773 6.38967L20.5921 0H29.241Z" fill="#146EF5"></path>
</svg>
```

**Framer Logo (Black #000000):**
```html
<svg viewBox="0 0 14 21" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="14" height="21" fill="none">
  <g clip-path="url(#framer-clip)" fill="#000000">
    <path d="M7 7H0v7l7 7v-7h7L7 7ZM0 0h14v7H7L0 0Z"></path>
  </g>
  <defs>
    <clipPath id="framer-clip">
      <path fill="#000000" d="M0 0h14v21H0z"></path>
    </clipPath>
  </defs>
</svg>
```

**CRITICAL:** Use SVG logos EXACTLY as provided. DO NOT modify path data, viewBox, fill colors, or XML namespaces. Only adjust `width` and `height` for sizing.

---

## Concept-to-Pattern Mapping

Before designing, ask: **"What is the ONE specific concept/relationship the user needs to understand?"**

**1. ADDITIVE RELATIONSHIP (A + B + C = D)**
- Linear formula with + and = operators
- Example: Base price + features = total cost

**2. SEQUENTIAL PROCESS (Step 1 → 2 → 3 → 4)**
- Numbered steps with arrows
- Example: Setup → Configure → Install → Publish

**3. CONDITIONAL LOGIC (IF this THEN that)**
- Branching diagram with decision point
- Example: CMS Field → [Empty path] vs [Has data path]

**4. HUB & DEPENDENCIES (Central element + connected parts)**
- Radial/hub & spoke layout
- Example: API (center) + various integrations

**5. COMPARISON (Option A vs Option B vs Option C)**
- Side-by-side columns
- Example: Basic vs Pro vs Enterprise plans

**6. BEFORE/AFTER TRANSFORMATION**
- Two-state comparison showing SPECIFIC change
- Must show specific differences, not just icons

---

## Layout Rules

1. **CSS Grid for Main Structure** - NO absolute positioning
2. **Labels ALWAYS Below** - In document flow
3. **Operators Between Boxes** - In own grid cells
4. **Simple Connectors** - CSS borders/divs, NO SVG (except platform logos)
5. **Fixed Dimensions** - NO overflow
6. **Conservative Spacing** - 30-50px gaps

---

## Content Minimalism

Each box: **icon + value + label ONLY** (max 3 elements)

**FORBIDDEN:**
- Descriptions/paragraphs
- Marketing copy
- Feature lists with text (unless essential)
- Generic states

---

## Typography & Sizing

**Font Sizes:**
- Large values: 28-38px
- Small values: 20-28px
- Labels: 11-14px (uppercase, medium weight)
- Operators: 24-32px
- Title: 24-28px

**Size Constraints:**
- Max box width: 180px
- Max box height: 200px
- Padding: 20-28px
- Gap: 30-50px
- Icons: 32-48px
- Platform logos: 24-32px width

---

## Technical Requirements

**Technology Stack:**
- HTML5 only
- Inline CSS only
- CSS Grid + Flexbox
- CSS variables, calc(), clamp()
- Platform SVG logos (inline)

**Color Palette:**
```css
--background: #F5F9FF;
--primary: #0099FF;
--secondary: #57BCFF;
--light-accent: #F0F4FA;
--text-gray: #A5B2CA;
--white: #FFFFFF;
--border: #E0E8F5;
--success: #00C853;
--error: #FF5252;
--webflow: #146EF5;
--framer: #000000;
```

**Icons:**
- Bootstrap Icons CDN
- Size: 32-48px (primary), 24-32px (secondary)
- Choose icons representing ACTUAL concepts

**Visual Effects:**
- Shadows: `0 4px 20px rgba(108, 196, 255, 0.15)`
- Border Radius: 16-20px
- Hover: Optional `translateY(-4px)` with 0.3s

---

## Layout Patterns

### 1. Linear Additive Formula
```
Grid: auto 40px auto 40px auto 40px auto
Base + Option1 + Option2 + Option3 = Total
```

### 2. Sequential Process Steps
```
Grid: repeat(4, 1fr) with numbered circles
Step 1 → Step 2 → Step 3 → Step 4
```
Include platform logo in relevant step.

### 3. Conditional Branching
```
Grid: 3-row layout with branches
Decision Point → splits into → Outcome A and Outcome B
```

### 4. Hub & Dependencies
```
3×3 grid with center hub and satellites
```

### 5. Side-by-Side Comparison
```
Grid: repeat(3, 1fr)
Option A | Option B | Option C
```

### 6. Before/After Transformation
```
Grid: 1fr auto 1fr
Before state → Arrow → After state (with specific changes)
```

---

## Design Process

### Step 1: Identify Topic & Platform
- What is the article's GENERAL TOPIC?
- Which platform (Webflow or Framer)?
- Diagram the topic, NOT detailed article content

### Step 2: Understand the Concept
- What relationship am I showing?
- What should users learn in 3 seconds?
- What's the core logic/process?

### Step 3: Choose Pattern
Match concept to pattern (additive, sequential, conditional, comparison, hub, transformation)

### Step 4: Make It Specific
- Use icons representing ACTUAL elements
- Use labels describing ACTUAL states/actions
- Show ACTUAL logic/relationships
- Include platform logo in relevant step/box

### Step 5: Remove Generic Elements
- No generic before/after without specifics
- No hub & spoke unless truly hub-based
- No decorative patterns
- Must include platform branding

---

## Anti-Patterns

**DON'T:**
- Diagram entire article content (diagram the general topic instead)
- Create diagrams without platform branding
- Use generic layouts that could apply to any platform
- Edit or modify platform SVG logos
- Use generic before/after without specific differences
- Use absolute positioning for content
- Add descriptions/marketing copy
- Use fonts larger than 38px for values
- Let content overflow containers

**DO:**
- Focus on article's GENERAL TOPIC
- ALWAYS include Webflow or Framer branding
- Copy/paste platform SVG logos EXACTLY as provided
- Understand core concept FIRST
- Choose pattern matching the relationship
- Use specific icons and labels
- Show actual logic/process
- Use CSS Grid with explicit columns
- Keep content minimal
- Ensure everything fits in viewport

---

## Quality Checklist

**Scope & Platform:**
- [ ] Diagramming GENERAL TOPIC (not entire article)
- [ ] Included Webflow or Framer logo (provided SVG)
- [ ] Copied SVG EXACTLY (no path data modifications)
- [ ] Diagram is platform-specific
- [ ] Platform logo properly sized (24-32px width)
- [ ] Only adjusted width/height, NOT viewBox or path data

**Conceptual Clarity:**
- [ ] Understand core concept/relationship
- [ ] Chose pattern that BEST represents concept
- [ ] Icons represent ACTUAL elements
- [ ] Labels describe ACTUAL states/actions
- [ ] Diagram teaches something SPECIFIC
- [ ] NOT a generic decorative pattern
- [ ] User understands concept in 3 seconds

**Technical Quality:**
- [ ] CSS Grid with explicit columns
- [ ] Labels below containers in flow
- [ ] Operators in own grid cells
- [ ] Icon + value + label only per box
- [ ] NO descriptions/marketing copy
- [ ] Values 28-38px max, labels 11-14px
- [ ] NO absolute positioning
- [ ] Everything fits (NO overflow)
- [ ] Looks like graphic not webpage
- [ ] 16:9 or 1:1 aspect ratio
- [ ] Color palette followed
- [ ] Bootstrap Icons + Inter Tight loaded
- [ ] Platform SVG logo included inline

---

## Output Requirements

**YOU MUST CREATE 5 DIAGRAM VARIATIONS**

Create 5 different diagram variations exploring different concepts or aspects from the article. Use Claude's agent system to create all 5 diagrams **IN PARALLEL** for maximum efficiency.

**Process:**
1. Analyze the article and identify 5 different concepts/relationships that could be visualized
2. Launch 5 agents IN PARALLEL (using a single message with 5 Task tool calls)
3. Each agent creates one complete HTML file with all context
4. Save each as: `diagram1.html`, `diagram2.html`, `diagram3.html`, `diagram4.html`, `diagram5.html`
5. After all 5 are created, open them in the user's browser using: `open diagram1.html diagram2.html diagram3.html diagram4.html diagram5.html` (or modify the terminal command depending on the location of the files)

**Each diagram HTML file must:**
1. Be a complete, standalone HTML file
2. Represent the GENERAL TOPIC clearly
3. Include platform branding (Webflow/Framer inline SVG)
4. Be specific to the use case (actual icons, actual labels)
5. Be minimal (icon + value + label only)
6. Be properly sized (no overflow, conservative fonts)
7. Be grid-based (no absolute positioning)
8. Be educational (user learns something specific)

**Important:** All 5 agents must receive the full article context (title + content) to ensure they understand what to visualize.

---

## Success Criteria

A successful diagram:
- **Topic-focused**: Visualizes article's GENERAL TOPIC
- **Platform-branded**: Includes Webflow or Framer logo
- **Platform-specific**: Clearly associated with relevant platform
- **Conceptually clear**: Visualizes SPECIFIC logic/relationship
- **Educational**: User learns something concrete
- **Specific**: Icons and labels represent ACTUAL elements
- **Not generic**: Avoids generic patterns
- **Pattern matches concept**: Layout serves the idea
- **Renders perfectly**: No overflow, proper sizing
- **Scannable**: Understandable in 3 seconds
- **Minimal**: Icon + value + label only
- **Grid-based**: Clean CSS Grid layout
- **Aspect ratio**: 16:9 or 1:1
