# AI Image Wireframe Prompt Generator

You are creating 10 wireframe diagram prompts for AI image generation models (Sora, Midjourney, DALL-E, etc.). Each prompt must be a single line of text that describes a simple, visual wireframe concept based on the article.

## Article Context

**ARTICLE TITLE:** [INSERT_TOPIC]

**ARTICLE CONTENT:**
[INSERT_ARTICLE]

---

## Your Task

Analyze the article and create 10 different wireframe prompts that visualize key concepts, processes, or transformations from the article. Each prompt should follow this structure:

1. **Format specification** (landscape/portrait, black/white or grayscale)
2. **Layout type** (side-by-side comparison, sequential steps, before/after, flowchart, etc.)
3. **Visual elements** (boxes, arrows, labels, icons, dashed lines, etc.)
4. **Key labels** (what text appears in the wireframe)
5. **Transformation/flow** (what the diagram shows changing or progressing)

---

## Rules

- Each prompt must be ONE LINE of text
- Keep prompts simple - wireframes only, no colors (except black/white/gray)
- Use simple geometric shapes (boxes, circles, arrows, lines)
- Minimize text - only essential labels
- Focus on VISUAL ABSTRACTION of concepts
- Each prompt should explain a different aspect or concept from the article

---

## Output Format

```
[PROMPT 1]
Create a wireframe...

[PROMPT 2]
Create a wireframe...

[PROMPT 3]
Create a wireframe...

[PROMPT 4]
Create a wireframe...

[PROMPT 5]
Create a wireframe...

[PROMPT 6]
Create a wireframe...

[PROMPT 7]
Create a wireframe...

[PROMPT 8]
Create a wireframe...

[PROMPT 9]
Create a wireframe...

[PROMPT 10]
Create a wireframe...
```

---

## Example Output

For an article titled "How to hide empty CMS sections in Webflow for clean layouts", you would generate:

[PROMPT 1]
Create a wireframe (landscape, black/white). Two vertical page layouts side-by-side. LEFT labeled "BEFORE": 6 content blocks stacked, with 2 blocks showing as dashed outlines (empty). Obvious vertical gaps. RIGHT labeled "AFTER": Only 4 solid blocks, no gaps, content flows naturally. Arrow showing transformation.

[PROMPT 2]
Create a wireframe (landscape, grayscale). Single CMS collection list shown as stacked rectangles. TOP labeled "CMS Items": 5 rectangles, 2 marked with X (empty). BOTTOM labeled "Conditional Logic": Arrow pointing down to only 3 solid rectangles (empty ones removed).

[PROMPT 3]
Create a wireframe (portrait, black/white). Decision tree diagram. TOP: Single box "CMS Field Empty?". Two branches: LEFT arrow to "YES → Hide Section" (dashed box), RIGHT arrow to "NO → Display Section" (solid box). Simple if/then visual.

[PROMPT 4]
Create a wireframe (landscape, black/white). Three-panel sequence. PANEL 1 "Default": Grid of 6 boxes (2 empty, shown dashed). PANEL 2 "Add Filter": Plus icon with "visibility:hidden" text. PANEL 3 "Result": Grid of 4 solid boxes only. Arrows between panels.

[PROMPT 5]
Create a wireframe (landscape, grayscale). Website page mockup split horizontally. TOP HALF labeled "With Empty Sections": Layout with visible gaps between content areas. BOTTOM HALF labeled "Without Empty Sections": Same layout, no gaps, content flows smoothly. Highlight the difference.

[PROMPT 6]
Create a wireframe (portrait, black/white). Vertical flowchart. START: "CMS Publish" → Decision diamond "Check Content" → Two paths: Empty content leads to "Section Hidden" (dashed), Has content leads to "Section Visible" (solid). END: "Clean Layout".

[PROMPT 7]
Create a wireframe (landscape, black/white). Code snippet visualization. LEFT: Box labeled "HTML Structure" showing nested div outlines. CENTER: Arrow with "CSS Filter" text. RIGHT: Box labeled "Rendered Output" showing only filled sections (empty ones crossed out).

[PROMPT 8]
Create a wireframe (landscape, grayscale). Comparison chart. Two columns labeled "Method A: Manual" and "Method B: Conditional". Each column shows 3 steps as numbered boxes. Method B has fewer steps, marked with checkmark. Method A shows more complexity with warning icon.

[PROMPT 9]
Create a wireframe (portrait, black/white). User journey map. Three stages vertically: "1. Empty CMS Field" (box with dotted outline), "2. Filter Applied" (arrow with gear icon), "3. Section Hidden" (crossed-out box). Clean visual progression.

[PROMPT 10]
Create a wireframe (landscape, black/white). Dashboard view showing CMS panel. LEFT side: List of CMS fields with checkboxes, 2 unchecked (empty). RIGHT side: Live preview showing page layout with only checked sections visible. Connection lines between list and preview.

---

## Quality Checklist

Before outputting your 10 prompts, verify:

- [ ] Each prompt is exactly ONE LINE of text
- [ ] All prompts use black/white or grayscale only
- [ ] Simple geometric shapes only (boxes, circles, arrows, lines)
- [ ] Essential labels only (max 5 words per label)
- [ ] Each prompt visualizes a DIFFERENT concept from the article
- [ ] All prompts follow the 5-part structure (format, layout, elements, labels, transformation)
- [ ] Prompts are simple enough for AI image models to interpret
- [ ] Wireframes are abstract representations, not detailed UI mockups
- [ ] Each prompt starts with "Create a wireframe"
- [ ] All 10 prompts are numbered [PROMPT 1] through [PROMPT 10]
