# Featured Image Generator for BRIX Templates Blog

**Attached is a reference image for our BRIX Templates blog's featured images about [Platform].** Use this reference to match the exact style, layout, proportions, spacing, shadows, colors, and overall aesthetic.

---

## Article Context

**ARTICLE TITLE:** [INSERT_TOPIC]

**ARTICLE CONTENT:**
[INSERT_ARTICLE]

---

## Your Task

Analyze the article and create ONE image generation prompt following this 4-step process:

### STEP 1: Identify Platform
- Is this about Webflow, Framer, or general web development?
- Platform logo MUST appear on the right side
- Use the corresponding reference image (Webflow = blue background, Framer = purple background)

### STEP 2: Identify Secondary Platform/Service
- Does the article mention another service? (LinkedIn, Stripe, Google Ads, Airtable, HubSpot, Mailchimp, etc.)
- If YES: Add that service's logo as the LEFT icon in 3D format
- If NO: Use a concept icon on the left (see icon categories below as EXAMPLES, but don't be limited to these)

### STEP 3: Design Center Wireframe
- What does the article teach?
- Represent it as a wireframe (NO TEXT ALLOWED, only shapes/lines)
- Examples:
  - Form/Settings: Wireframe UI with input fields, toggles, buttons
  - Integration: Two connected systems with arrows
  - Data/Analytics: Dashboard with charts/graphs
  - Pricing: Columns with feature lists
  - Process: Step-by-step flow diagram
  - Geo/Location: Map with markers and indicators
  - CMS/Content: List or table structures

### STEP 4: Choose Concept Icon (if no secondary platform)

**Icon Categories (Examples - expand as needed):**
- **Security/Blocking:** Lock, shield, prohibition sign, firewall
- **Payment/Money:** Coin stack, credit card, dollar sign, wallet
- **Communication:** Megaphone, envelope, bell, chat bubble
- **Data/Analytics:** Graph, chart, database, funnel
- **Speed/Performance:** Lightning bolt, rocket, speedometer
- **Integration/Connection:** Puzzle pieces, link, bridge, plug
- **Settings/Configuration:** Gear, wrench, sliders, toggle
- **Content/Creation:** Pencil, document, paintbrush, camera

**Keep in mind you can expand on these as needed - these are just examples.**

---

## Output Format

Create ONE prompt using this structure:

```
Attached is a reference image for our BRIX Templates blog's featured images about [Webflow/Framer]. Create a new featured image for: "[Article Title]"

Requirements:
* Composition:
    * Center (inside the white card): [Describe the wireframe content in detail - what shapes, lines, and layouts represent the concept. NO TEXT ALLOWED, only geometric shapes]
    * Left: [3D icon description - either service logo or concept icon]
    * Right: [Platform] 3D logo (mandatory)

* Wireframe Rules (CENTER CARD ONLY):
    * Colors allowed: white and light grey only
    * NO text allowed - use simple shapes/lines for all elements
    * Describe specific geometric shapes: rectangles, circles, lines, etc.
    * Be specific about layout and arrangement

* Styling:
    * Strictly match the reference image for layout, proportions, spacing, shadows, and colors
    * Use the same white card style with identical padding, corner radius, and elevation
    * Match the background gradient/color from the reference
    * 3D icons should have the same floating effect and shadow style as the reference

* Important:
    * The wireframe must visually represent the article's core concept
    * NO text is allowed inside the wireframe - you will fail if you add text
    * All styling details should match the attached reference image
```

---

## Example Outputs

### Example 1: "How to block countries from accessing your Framer site"

```
Attached is a reference image for our BRIX Templates blog's featured images about Framer. Create a new featured image for: "How to block countries from accessing your Framer site"

Requirements:
* Composition:
    * Center (inside the white card): Wireframe showing simplified world map (continent outlines using curved lines) on the left side, and a vertical list of 5 country items on the right. Each country item consists of: a horizontal line (200px representing country name), a small square checkbox (20px), and a circle location pin icon (16px). Show 3 countries with empty checkboxes (allowed) and 2 countries with X marks in checkboxes (blocked).
    * Left: 3D red prohibition sign (circle with diagonal slash) in glossy red, isometric view
    * Right: Framer 3D logo (black) - mandatory

* Wireframe Rules (CENTER CARD ONLY):
    * Colors allowed: white and light grey only
    * NO text allowed - world map shown as simple curved lines forming continents, country list as horizontal grey lines, checkboxes as small squares, location pins as circle with small triangle below
    * Geometric shapes: Curved lines for map, horizontal lines for country names (200px width), squares (20x20px) for checkboxes, circles (16px) with triangles for location pins
    * Layout: Map on left (~40% of card width), country list on right (~50% of card width)

* Styling:
    * Strictly match the reference image for layout, proportions, spacing, shadows, and colors
    * Use the same white card style with identical padding, corner radius, and elevation
    * Match the purple background gradient from the Framer reference
    * 3D icons should have the same floating effect and shadow style as the reference

* Important:
    * The wireframe must visually show geo-blocking concept with allowed vs blocked countries
    * NO text is allowed inside the wireframe - you will fail if you add text
    * All styling details should match the attached reference image
```

### Example 2: "How to set up LinkedIn Insight Tag conversion tracking on Webflow"

```
Attached is a reference image for our BRIX Templates blog's featured images about Webflow. Create a new featured image for: "How to set up LinkedIn Insight Tag conversion tracking on Webflow"

Requirements:
* Composition:
    * Center (inside the white card): Wireframe analytics dashboard showing 3 types of charts. Top left: line graph (300x200px) with X/Y axes and 8 connected data points. Top right: bar chart (250x150px) with 6 vertical bars of varying heights. Bottom left: pie chart (200px diameter) divided into 4 segments. Bottom right: conversion funnel with 4 descending trapezoids connected by lines, decreasing in width from 180px to 60px.
    * Left: LinkedIn 3D logo (blue cube with white 'in' letters) - official branding
    * Right: Webflow 3D logo (blue 'W') - mandatory

* Wireframe Rules (CENTER CARD ONLY):
    * Colors allowed: white and light grey only
    * NO text allowed - charts shown as pure geometric shapes: circles connected by lines for line graph, vertical rectangles for bar chart, circle with radial dividing lines for pie chart, trapezoids for funnel
    * Geometric shapes: Line graph (8 circles 8px diameter connected by 1px lines), bar chart (6 rectangles 30px wide with varying heights 40-120px), pie chart (200px circle with 4 dividing lines from center), funnel (4 trapezoids)
    * Layout: 2x2 grid arrangement with generous spacing between charts

* Styling:
    * Strictly match the reference image for layout, proportions, spacing, shadows, and colors
    * Use the same white card style with identical padding, corner radius, and elevation
    * Match the blue background gradient from the Webflow reference
    * 3D icons should have the same floating effect and shadow style as the reference

* Important:
    * The wireframe must visually show analytics/tracking concept with multiple data visualizations
    * NO text is allowed inside the wireframe - you will fail if you add text
    * All styling details should match the attached reference image
```

### Example 3: "How much does a Webflow website cost?"

```
Attached is a reference image for our BRIX Templates blog's featured images about Webflow. Create a new featured image for: "How much does a Webflow website cost?"

Requirements:
* Composition:
    * Center (inside the white card): 4 wireframe pricing table columns arranged horizontally. Each column (220px wide, 600px tall) contains: a header rectangle (60px height) at the top, 6 feature rows shown as horizontal lines (180px wide, stacked with 12px gaps), a price marker rectangle (180x48px) below the header, and a button outline (rounded rectangle 180x48px with 16px border radius) at the bottom. All elements use 2px borders for structure and 1px for feature lines.
    * Left: 3D golden coin stack (5 coins in isometric view, metallic gradient finish)
    * Right: Webflow 3D logo (blue 'W') - mandatory

* Wireframe Rules (CENTER CARD ONLY):
    * Colors allowed: white and light grey only
    * NO text allowed - pricing tables shown as vertical column structures with header rectangles, stacked horizontal lines for features, price marker boxes, and rounded button outlines
    * Geometric shapes: Vertical column containers (220x600px rectangles with 2px borders), header areas (220x60px solid grey rectangles), feature lines (180px horizontal grey lines), price markers (180x48px rectangles), buttons (180x48px rounded rectangles)
    * Layout: 4 columns evenly spaced with 20px gaps between them, all elements centered within their columns

* Styling:
    * Strictly match the reference image for layout, proportions, spacing, shadows, and colors
    * Use the same white card style with identical padding, corner radius, and elevation
    * Match the blue background gradient from the Webflow reference
    * 3D icons should have the same floating effect and shadow style as the reference

* Important:
    * The wireframe must visually show pricing comparison with multiple tiers/plans
    * NO text is allowed inside the wireframe - you will fail if you add text
    * All styling details should match the attached reference image
```

---

## Quality Checklist

Before outputting your prompt, verify:

- [ ] Started with "Attached is a reference image for our BRIX Templates blog's featured images about [Platform]"
- [ ] Identified the correct platform (Webflow or Framer)
- [ ] Included platform logo on the right (MANDATORY)
- [ ] Identified secondary service logo OR chose appropriate concept icon for left side
- [ ] Described wireframe content in detail using ONLY geometric shapes (NO TEXT)
- [ ] Referenced the attached image for styling, layout, and aesthetic matching
- [ ] Specified that NO text is allowed in the wireframe
- [ ] Included all required composition elements (center wireframe, left icon, right platform logo)
- [ ] Made the wireframe specific to the article's concept (not generic)
