@@ -101,6 +101,17 @@ export const ArticleSchema = z.object({
       z.object({
         alt: z.string().min(5).max(200),
         prompt: z.string().min(20).max(500),
+        // Per-image style. Drives the art-direction overlay in
+        // generateInlineImage. Default "concept" matches the legacy
+        // abstract-editorial behavior so older flows still render.
+        kind: z
+          .enum(["concept", "chart", "flow", "comparison", "checklist"])
+          .default("concept"),
+        // For chart/flow/comparison/checklist kinds: 2-6 short text
+        // labels (≤24 chars each) that should appear in the image.
+        // Empty / ignored for "concept". gpt-image-1 renders these
+        // legibly when count is small and labels are short.
+        labels: z.array(z.string().max(24)).max(6).default([]),
       }),
     )
     .min(INLINE_IMAGE_COUNT)
@@ -163,7 +174,20 @@ export function buildSystemPrompt(): string {
     "",
     "Internal links: insert each provided URL inline exactly once as a standard markdown `[anchor](url)` link where the surrounding sentence is genuinely about that URL's topic. Never create a \"Further reading\" list. Never invent URLs — use only those provided. Link candidates may include both site pages AND prior blog posts on this same site — treat both the same way (inline contextual anchor; the prior posts are clearly labeled in the candidate list).",
     "",
-    `Inline images: place exactly ${INLINE_IMAGE_COUNT} placeholder lines of the form '<!--INLINE_IMAGE_1-->', '<!--INLINE_IMAGE_2-->', '<!--INLINE_IMAGE_3-->' (each on its own line, in numeric order) inside markdown_body. Place each marker on a blank line immediately after a major H2 boundary, distributed across the body — never inside the intro, the TOC, a blockquote, a table, or inside the final '### Try {brand}' CTA block. In inline_image_prompts return exactly ${INLINE_IMAGE_COUNT} objects in the same 1→${INLINE_IMAGE_COUNT} order: each with a short alt text describing what the image shows for accessibility, and an image generation prompt for that section's topic (abstract editorial style, no text/typography/logos/people).`,
+    `Inline images: place exactly ${INLINE_IMAGE_COUNT} placeholder lines of the form '<!--INLINE_IMAGE_1-->', '<!--INLINE_IMAGE_2-->', '<!--INLINE_IMAGE_3-->' (each on its own line, in numeric order) inside markdown_body. Place each marker on a blank line immediately after a major H2 boundary, distributed across the body — never inside the intro, the TOC, a blockquote, a table, or inside the final '### Try {brand}' CTA block.`,
+    "",
+    `For each placeholder, return one object in inline_image_prompts (same 1→${INLINE_IMAGE_COUNT} order). Each object MUST set a kind that fits what the surrounding section is doing — this is the difference between a decorative blob and an informative graphic:`,
+    "",
+    "- kind=\"chart\" — when the section discusses metrics, percentages, comparisons of magnitudes, or trends. Provide 2–5 short labels (≤24 chars each) that should appear on bars/segments. Plausible numbers are fine; the chart is illustrative.",
+    "- kind=\"flow\" — when the section walks through a process or workflow with 3–5 steps. Provide the step labels in order.",
+    "- kind=\"comparison\" — when the section explicitly contrasts two approaches (good/bad, before/after, wrong/right). Provide exactly 2 labels (e.g., [\"Before\", \"After\"]).",
+    "- kind=\"checklist\" — when the section is a 'do these things' list of 3–6 items. Provide the checklist labels.",
+    "- kind=\"concept\" — fallback for atmospheric / opening sections where no data, flow, comparison, or list is being presented. No labels needed.",
+    "",
+    "Aim for a MIX across the three inline images — at least one should be chart/flow/comparison/checklist when the article has any quantitative or procedural content. 'concept' is fine for at most one of the three.",
+    "",
+    "alt: a short accessibility description of what the image shows.",
+    "prompt: a one-sentence brief describing the image's content (this becomes the image-model prompt). Don't include style direction — the renderer adds it.",
     "",
     "Output: strict JSON matching the schema. The markdown_body is the article body only.",
   ].join("\n");
@@ -397,20 +421,113 @@ const SHARED_ART_DIRECTION = [
   "Strictly NO text, NO typography, NO UI mockups, NO logos, NO charts with labels, NO people, NO faces, NO stock-photo office scenes, NO generic abstract gradient blobs.",
 ];
 
+// Visual-design language shared across all infographic-style inline
+// images. Keeps charts/flows/comparisons/checklists feeling like they
+// came from the same magazine even though Claude wrote each prompt
+// independently. Different from SHARED_ART_DIRECTION (which is for
+// "concept" mode + the hero) — that one explicitly forbids text;
+// this one explicitly permits it.
+const INFOGRAPHIC_ART_DIRECTION = [
+  "Style: clean editorial infographic — the kind you'd see in a Bloomberg, Stripe Press, or Information is Beautiful piece. NOT a 3D render, NOT a slide template, NOT clip-art.",
+  "Surface: matte off-white paper background (#F2EFE8-ish) with one charcoal accent (#1A1F26) and ONE saturated highlight color picked from {electric cyan, deep emerald, warm amber, vermilion} — pick one and stick to it for the whole figure.",
+  "Typography: legible sans-serif (Inter / SF Pro feel), tight tracking, NO ALL-CAPS body text, generous whitespace. Labels short and unambiguous. Numbers rendered cleanly.",
+  "Lines: 1.5–2px strokes, no drop shadows, no gradient fills unless explicitly part of a data series. Rounded corners on shape primitives.",
+  "Layout: 3:2 aspect, asymmetric balance, single clear visual hierarchy. Title-free — the surrounding article copy provides the headline.",
+  "Strictly NO photographic textures, NO 3D bevels, NO gradients on backgrounds, NO emoji, NO stock-icon people, NO faux-handwriting fonts, NO drop-shadows on text.",
+];
+
+function buildInlineImagePrompt(
+  spec: { prompt: string; kind: string; labels: string[] },
+  nicheHint: string | null,
+): string {
+  const labels = (spec.labels ?? []).map((l) => l.trim()).filter(Boolean);
+  const labelClause = labels.length > 0
+    ? `Render these exact short text labels — spell them precisely, do not paraphrase: ${labels.map((l) => `"${l}"`).join(", ")}.`
+    : "";
+  const niche = nicheHint ? `Subject area: ${nicheHint}.` : "";
+
+  switch (spec.kind) {
+    case "chart": {
+      // Bar / column chart with 3–5 segments. Plausible illustrative numbers.
+      return [
+        "Editorial bar-chart infographic for a long-form technical article.",
+        `Topic: ${spec.prompt}.`,
+        niche,
+        `Render a simple 3–5 segment vertical bar chart (or horizontal if it fits the labels better). Each bar has a clear short label beneath/beside it and one rendered numeric value on or above the bar (percentages OK).`,
+        labelClause,
+        "One bar should be visually emphasized in the accent color; the rest in charcoal.",
+        ...INFOGRAPHIC_ART_DIRECTION,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+    case "flow": {
+      return [
+        "Editorial process-flow diagram for a long-form technical article.",
+        `Topic: ${spec.prompt}.`,
+        niche,
+        "Render a left-to-right (or top-to-bottom if labels are long) sequence of 3–5 rounded-rectangle nodes connected by single arrows. Each node contains one short label. The final node is the outcome and is emphasized in the accent color.",
+        labelClause,
+        ...INFOGRAPHIC_ART_DIRECTION,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+    case "comparison": {
+      return [
+        "Editorial side-by-side comparison panel for a long-form technical article.",
+        `Topic: ${spec.prompt}.`,
+        niche,
+        "Render exactly two vertical columns separated by a thin vertical divider. Each column has its label as the column header and 3–4 short bullet-style items below — one icon glyph (geometric primitive, NOT emoji) next to each. The 'good' / 'after' / 'right' column gets the accent color; the other is charcoal.",
+        labelClause,
+        ...INFOGRAPHIC_ART_DIRECTION,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+    case "checklist": {
+      return [
+        "Editorial visual checklist for a long-form technical article.",
+        `Topic: ${spec.prompt}.`,
+        niche,
+        "Render a stacked vertical list of 3–6 items, each prefixed with a small filled square in the accent color. Items aligned left, generous line height. No screenshot framing.",
+        labelClause,
+        ...INFOGRAPHIC_ART_DIRECTION,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+    case "concept":
+    default: {
+      // Legacy tactile-metaphor path. Used when the section is
+      // atmospheric and there's nothing structural to visualize.
+      return [
+        `Editorial section image for a long-form technical SEO article.`,
+        `Concept to evoke (do NOT depict literally — find a tactile metaphor): ${spec.prompt}.`,
+        niche,
+        ...SHARED_ART_DIRECTION,
+        "Slightly more subdued than a hero — a chapter divider, not the cover. 3:2 aspect.",
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+  }
+}
+
 export async function generateInlineImage(
   openai: OpenAI,
   promptText: string,
   nicheHint: string | null,
+  opts: { kind?: string; labels?: string[] } = {},
 ): Promise<Buffer | null> {
-  const prompt = [
-    `Editorial section image for a long-form technical SEO article.`,
-    `Concept to evoke (do NOT depict literally — find a tactile metaphor): ${promptText}.`,
-    nicheHint ? `Subject area: ${nicheHint}.` : "",
-    ...SHARED_ART_DIRECTION,
-    "Slightly more subdued than a hero — a chapter divider, not the cover. 3:2 aspect.",
-  ]
-    .filter(Boolean)
-    .join(" ");
+  const prompt = buildInlineImagePrompt(
+    {
+      prompt: promptText,
+      kind: opts.kind ?? "concept",
+      labels: opts.labels ?? [],
+    },
+    nicheHint,
+  );
   const res = await openai.images.generate({
     model: IMAGE_MODEL,
     prompt,
@@ -803,7 +920,10 @@ export async function generateArticle(
     })(),
     ...article.inline_image_prompts.map(async (p, i) => {
       try {
-        const bytes = await generateInlineImage(openai, p.prompt, typedSite.niche);
+        const bytes = await generateInlineImage(openai, p.prompt, typedSite.niche, {
+          kind: p.kind,
+          labels: p.labels,
+        });
         if (bytes) {
           inlineImageUrls[i] = await uploadImage(
             supabase,
 
@@ -245,7 +245,10 @@ export async function generateGuestPost(
     })(),
     ...article.inline_image_prompts.map(async (p, i) => {
       try {
-        const bytes = await generateInlineImage(openai, p.prompt, target.niche);
+        const bytes = await generateInlineImage(openai, p.prompt, target.niche, {
+          kind: (p as { kind?: string }).kind,
+          labels: (p as { labels?: string[] }).labels,
+        });
         if (bytes) {
           inlineImageUrls[i] = await uploadImage(
             supabase,