# How to Debug Layout Issues in Infographic Prompts: A Technical Guide for awesome-gpt-image-2

> Debug layout issues in infographic prompts for awesome-gpt-image-2. Verify category tags, inspect template constraints, and remove conflicting overrides for seamless infographic generation.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-13

---

**Debug layout issues in infographic prompts by verifying the `category` tag points to `"cat-infographic"` in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), inspecting the template layout constraints in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), and eliminating conflicting override strings in the case definition.**

Infographic prompts in the **awesome-gpt-image-2** repository are constructed from three distinct architectural layers—category, template, and case—that work together to produce structured visual outputs. When generated images appear misaligned, crowded, or missing panels, the root cause typically resides in one of these layers or in the interaction between them. Understanding how to debug layout issues in infographic prompts requires tracing the data flow from the JSON configuration files through the generation script to the final rendered output.

## The Three-Layer Architecture of Infographic Prompts

Every infographic prompt is composed of three stacked components that must remain in sync for proper layout rendering.

### Category Definition

The **category definition** tells the engine that a case belongs to the infographic family. In [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), the identifier `"id": "cat-infographic"` establishes the broad styling rules and available template pool for infographic generation. If a case references the wrong category ID, the system applies incorrect base constraints, leading to layout mismatches before any template logic executes.

### Template Skeleton

The **template skeleton** prescribes the overall visual grammar, including grid systems, arrow placement, and caption styling. The master template resides in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) under the section header `#tpl-infographic`. This file defines layout keys such as `grid`, `constraints`, and `structure` that serve as the default scaffolding for all infographic cases. Missing or contradictory keys here cascade into rendering errors.

### Case Prompt

The **case prompt** adds concrete content and layout tweaks specific to a single generation request. Stored in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json), these entries contain subject descriptions, explicit layout strings (e.g., `"layout": "Centered, bold cinematic font, bottom heavy"`), and constraint overrides. Case-level overrides are the most frequent source of layout conflicts when they contradict the template's grid specifications.

## Step-by-Step Debugging Workflow

When debugging layout issues, work through this verification sequence to isolate the failure point.

### Verify the Category Tag

Ensure the case's `category` field points exactly to `"cat-infographic"` so the engine selects the correct template family. Open [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) and confirm the entry contains `"category": "cat-infographic"`. A missing or mistyped category causes the generator to apply generic or incompatible styling rules.

### Inspect the Template Layout

Examine [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) in the `#tpl-infographic` section for missing or contradictory layout keys. Look specifically for `layout`, `constraints`, `grid`, and `structure` definitions. If the template lacks a `grid` specification but the case assumes one exists, the generator cannot place elements predictably.

### Review Case-Specific Overrides

Check [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) for explicit override strings in the `layout` field. Values like `"16:9"` combined with `"square"` in the same string create conflicting aspect-ratio instructions. Remove redundant size tokens to ensure a single, coherent layout directive reaches the model.

### Run the Verbose Generator

Print the final prompt string before it is sent to the model using the debug flag in `scripts/generate-style-skill.mjs`. Run the following command, replacing `334` with your target case ID:

```bash
node scripts/generate-style-skill.mjs \
  --case-id 334 \
  --debug

```

Inspect the printed JSON for three critical fields: `layout` (should match template expectations), `constraints` (must contain `"clean typography"` for legibility), and `grid` (rows/cols must be consistent with the visual structure).

### Check the Rendering Client

The front-end code in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) or the Vite dev server may apply CSS that masks layout overflow. Open browser developer tools and inspect the infographic container for `overflow: hidden` or mismatched aspect-ratio CSS in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). A `background-size: cover` declaration can swallow foreground elements intended for a neutral paper-like background.

### Test with a Minimal Prompt

Strip the case down to bare essentials—subject and a simple `layout: "grid"` entry—to isolate the problem. Create a temporary entry in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) or use the local API script `scripts/vite-local-api.mjs`. If the minimal prompt renders correctly, reintroduce modifiers one by one to identify the conflicting element.

## Common Layout Problems and Fixes

| Symptom | Likely Cause | Fix |
|---------|--------------|-----|
| Panels overlap or run off-canvas | The `layout` string contains conflicting size tokens (e.g., `"16:9"` together with `"square"`). | Remove one size token; keep a single aspect-ratio specification in the case's `layout` field. |
| Text is cut off or illegible | The `constraints` field omits `no-garbled-text` or lacks `clean-typography` directives. | Add `"constraints": "clean typography, no garbled text"` to the case entry in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json). |
| Arrows point nowhere or elements float | The template expects a `grid` definition but the case supplies only a `structure` field without grid coordinates. | Add `"grid": { "rows": 4, "cols": 3 }` (or appropriate dimensions) to the case's JSON object. |
| Background swallows foreground content | CSS `background-size: cover` is applied to the container in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css), conflicting with the infographic's expectation of a neutral frame. | Replace `background-size: cover` with `background-size: contain` for infographic containers in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css). |

## Practical Debugging Commands

Use these commands to iterate quickly when isolating layout bugs:

```bash

# Edit the case layout using jq to test grid configurations

jq '.cases[334].layout = "Centered, grid 4x3"' data/cases.json > tmp.json && mv tmp.json data/cases.json

# Restart the Vite dev server to see CSS changes reflected

npm run dev

# Then open http://localhost:5173 to inspect the rendered output

```

## Key Files for Troubleshooting

Familiarity with these files accelerates the debugging process:

- **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)** – Defines the infographic category (`"id": "cat-infographic"`) and base styling rules.
- **[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)** – Contains the master Infographic template (`#tpl-infographic`) with default layout grammars.
- **[`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json)** – Stores concrete prompt entries; check here for override strings that conflict with template defaults.
- **`scripts/generate-style-skill.mjs`** – The generation script that matches cases to templates; use the `--debug` flag to view the final prompt string.
- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) and [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css)** – Front-end rendering logic where CSS overflow and background properties may mask or distort infographic layouts.

## Summary

- Infographic prompts consist of three layers: **category** ([`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)), **template** ([`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)), and **case** ([`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json)).
- Always verify that `"category": "cat-infographic"` is set correctly to trigger the infographic template pipeline.
- Use `node scripts/generate-style-skill.mjs --case-id <ID> --debug` to inspect the final prompt before it reaches the model.
- Conflicting size tokens in the `layout` field and missing `grid` definitions are the most common causes of overlapping or misaligned panels.
- Check [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css) for `background-size` and `overflow` properties that may clip or distort the generated layout in the browser.

## Frequently Asked Questions

### Why is my infographic text cut off or illegible?

This occurs when the case's `constraints` field omits typography directives. According to the [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) schema, you must explicitly include `"constraints": "clean typography, no garbled text"` to ensure the model prioritizes legible rendering over decorative effects.

### How do I verify that the correct infographic template is being applied?

Check the `category` field in your case entry within [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json). It must exactly match `"cat-infographic"` to pull the `#tpl-infographic` template from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md). Any deviation causes the generator to use a generic or mismatched template that lacks infographic-specific grid logic.

### What causes infographic panels to overlap or run off the canvas?

Overlapping panels typically result from conflicting aspect-ratio tokens in the `layout` string—such as specifying both `"16:9"` and `"square"` simultaneously. The template parser cannot resolve contradictory size instructions, causing elements to misalign. Remove all but one size specification from the case's `layout` field.

### How can I test layout changes without modifying production cases?

Use the local API script `scripts/vite-local-api.mjs` or temporarily edit [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) with minimal test entries. Run `npm run dev` to start the Vite server, then inspect the output at `http://localhost:5173`. This approach allows rapid iteration without affecting the primary case database.