Estimated reading time: 6 minutes | Level: Beginner

What You'll Build

In under 60 seconds, you'll create a fully designed infographic — complete with layout, colors, typography, and structured data — from nothing but a sentence describing your topic. And you'll be able to edit any word in it just by double-clicking.

Here's what we'll cover:

• Understanding the "custom" infographic type
• Writing a single-sentence prompt that generates a complete graphic
• Editing text inline with double-click
• Refining the design through natural language
• Exporting the final result as WebP

How It Works: The Magic of HTML + AI

Before we start, here's what's happening under the hood:

1. You type a topic in plain English
2. VisualGEO sends it to the AI, which generates self-contained HTML + CSS — no external dependencies
3. The HTML renders inside a Shadow DOM (a sealed-off container that prevents the app's CSS from leaking in)
4. The result is a clean, styled infographic you can edit by double-clicking any text element

This approach is what makes the 30-second turnaround possible. The AI handles all the design decisions — layout, color harmony, typography, spacing, data presentation — so you don't need to tweak a single CSS property.

Step 1: Open the Creator and Select "Custom"

Navigate to VisualGEO Create and move through the wizard:

1. Category: Select "GEO Image"
2. Type: Select "Custom" (this is the infographic type)
3. Ratio: Select your preferred ratio (1:1 is a safe default)
4. Mode: Select "AI Generate"

You'll land in the editor with the AI Chat panel on the left and an empty preview on the right.

💡 Pro Tip: You can bypass the wizard entirely with URL parameters. Try: https://visual-geo.art/create?type=custom&ratio=1:1&skip=true to jump straight into the editor.

Step 2: Write Your Prompt

This is the only step that requires any thought. The key to a 30-second infographic is a specific, structured prompt.

The Formula

[Format type] showing [topic]. Include [specific data points]. Use [style/vibe].

Bad Prompt (too vague)

Make an infographic about SEO.

The AI will generate something, but it won't have specific extractable data — which means AI search engines won't have anything concrete to cite.

Good Prompt (specific and data-rich)

Create a stat card showing that 73% of users never scroll past the first page of AI search results. Bold number: 73%. Source: Industry Report 2026. Professional blue and white style.

Better Prompts by Format

Format	Example Prompt
Comparison table	"Create a comparison table comparing GEO vs SEO across 6 dimensions: target platform, goal, metric, optimization focus, time to results, and competitive moat. Use a professional style with blue headers."
Flowchart	"Design a 4-step flowchart explaining how RAG works: 1) User query, 2) Content retrieval, 3) Context injection, 4) LLM synthesis. Number each step with clear directional arrows. Clean minimal style."
Stat card	"Stat card showing that 95% of AI citations come from non-paid media. Large number: 95%. Subtitle: 'Muck Rack, 2026'. Minimal style with bold typography."
Definition block	"Definition block explaining GEO: 'Generative Engine Optimization is the practice of optimizing content to be cited by AI search engines like ChatGPT and Perplexity.' Include your brand name VisualGEO as the source. Clean modern style."
Timeline	"Timeline infographic showing the evolution of search: 1998 Google founded → 2010 SEO era → 2023 GPT launch → 2024 AI Overviews → 2025 RAG → 2026 GEO. Professional dark theme."

For this tutorial, use this prompt:

Create a comparison infographic showing GEO vs SEO. Include 5 dimensions: primary goal, target platform, success metric, time to results, and content style. Use a clean professional palette with dark headings and white background. Format as a table.

Step 3: Watch It Generate

After you click Generate, here's what happens in real-time:

┌─────────────────────┐
│  AI Thinking...      │
│                      │
│  • Analyzing topic   │
│  • Choosing layout   │
│  • Generating HTML   │
│  • Applying styles   │
│  │││││││││││││││→   │  ← Streaming progress
│                      │
│  ✅ Complete!        │
└─────────────────────┘

The AI's reasoning streams in the chat panel — you'll see it think about:

• What format best fits your topic
• How to structure the information hierarchy
• What color scheme matches your described vibe
• Where to place each element for visual balance

Within seconds, the preview panel on the right displays your finished infographic.

Step 4: Edit Text with Double-Click

One of the most powerful features of the custom HTML format is inline editing:

1. Double-click any text element in the preview
2. The text becomes editable — like a text field
3. Type your changes
4. Click outside or press Escape to confirm

Try it:

• Change the title to something more specific
• Fix any data points that need updating
• Add your brand name to the attribution line

This works because the Shadow DOM isolates each text node, making it independently editable without affecting the surrounding layout or styles.

💡 Pro Tip: Inline editing is great for quick tweaks. For bigger changes — like switching the entire layout or color scheme — use the AI chat instead. Type "Turn this into a vertical format" or "Make the background dark" and the AI regenerates while preserving your text content.

Step 5: Refine with Natural Language

You don't need to start over if you want changes. Just type a refinement in the chat:

Some things you can say:

• "Add a third column for AEO (Answer Engine Optimization)"
• "Swap the color scheme to dark mode with purple accents"
• "Make the text larger and increase spacing between rows"
• "Add a source citation at the bottom: 'VisualGEO Research, 2026'"
• "Convert this to a numbered list format instead of a table"

The AI will regenerate the design while keeping your existing content structure. This is the fastest way to iterate — no manual design tool can match this speed.

Step 6: Set Alt Text (For GEO)

Before exporting, check the auto-generated alt text. VisualGEO creates it using the same prompt context that generated the graphic, so it accurately describes what the image contains.

Verify it passes the eyes-closed test:

• Close your eyes
• Have someone read the alt text aloud
• Can you picture the infographic?

If not, edit the alt text field. Aim for a description that includes the graphic's main topic, the number of sections or data points, and 1-2 specific figures.

Step 7: Export as WebP

Click Export and choose:

Setting	Value	Why
Format	WebP	Best compression for text-heavy graphics
Quality	95%	Preserves sharp text edges
Resolution	2x	Looks crisp on Retina displays

The download starts automatically with an SEO-friendly filename derived from your alt text.

Total time elapsed: Under 60 seconds from prompt to download.

Real-World Examples

Example 1: Marketing ROI Stat Card

Prompt: "Stat card: Content marketing generates 3x more leads than paid ads. Number: 3x. Source: DemandMetric. Bold green accent color."

Result: A clean, bold stat card with a large "3x" numeral, supporting text, and source citation — ready to embed in a blog post about content marketing ROI.

Example 2: Agile vs Waterfall Comparison

Prompt: "Comparison table: Agile vs Waterfall vs Hybrid project management. Dimensions: approach, flexibility, delivery, customer involvement, risk management. Professional blue scheme."

Result: A three-column comparison table with clear headers, checkmarks, and structured rows — the exact format AI search engines love to cite for "X vs Y" queries.

Example 3: How DNS Works Flowchart

Prompt: "5-step flowchart: How DNS works. Steps: 1) User types URL, 2) Browser checks cache, 3) Query DNS resolver, 4) Resolver queries root server, 5) IP returned to browser. Numbered boxes with arrows. Clean technical style."

Result: A technical flowchart with numbered steps, directional arrows, and concise labels — perfect for educational content.

Tips for Even Faster Creation

Use URL Shortcuts

Bookmark these for one-click access:

• https://visual-geo.art/create?type=custom&ratio=1:1&skip=true — Square custom infographic
• https://visual-geo.art/create?type=custom&ratio=16:9&skip=true — Widescreen custom infographic
• https://visual-geo.art/create?type=image&ratio=4:5&skip=true — Portrait hero image

Save Good Prompts

When you find a prompt that works well, save it. A small library of 10-15 prompts covering your most common infographic formats means you can generate on-demand in under 15 seconds.

Batch Create for Consistency

Create multiple infographics in one session — the AI maintains stylistic consistency across graphics when you use similar prompts in the same sitting. This is useful for creating a set of graphics for a single blog post or campaign.

What's Next?

You've mastered the 30-second infographic workflow. Here's where to go next:

1. Create a set of comparison graphics for 3-5 "X vs Y" topics in your industry
2. Embed them in your top blog posts — replace stock photos with data-rich infographics
3. Track which ones get cited — ask ChatGPT a relevant question and see if your graphics surface
4. Try the video tutorial — learn how to create faceless videos with AI narration

Ready to create another? Start a new infographic at VisualGEO.