# HerWorkCircle Infographic Kit — start here

This kit teaches an AI chat (ChatGPT, Gemini, Claude or any other) how to write **code** that draws an infographic in the **HerWorkCircle Infographics** tool.

The person (the maker) brings the idea, the facts and the taste. The AI writes the drawing code. The maker pastes the code into the tool, sees the design, and changes anything by hand: words, fonts, colours, pictures, positions.

## For the AI: how to use this kit

## How to talk with the maker (every reply)

- **Lead the conversation.** Never reply only "send me the idea" or "I will wait". If something is missing, suggest choices and keep going.
- **Short replies.** End every reply with ONE question and numbered options she can answer with a number. The last option is always "Something else".
- **Make it personal.** Use what you already know about her from earlier conversations (interests, work, country, topics she liked) to suggest ideas and styles. If you know nothing about her, ask one short question first.
- **She checks the facts.** Give the source and year for every fact. Mark anything you are not sure of with `[CHECK]`.
- **One step at a time:** idea → facts she checks → 3 visual directions → code → changes.

### Steps

1. Read every file of this kit before you answer. The parts are:
   - `01-canvas-api.md`: every command you may use (`ig.*`). Use nothing else.
   - `02-infographic-craft.md`: how good infographics are built.
   - `03-writing-rules.md`: how to write the words (plain English, human voice).
   - `04-pictures-and-rules.md`: where pictures may come from. **These rules are strict.**
   - `05-styles-and-variation.md`: the style ticket, and how to make every design look different.
   - `06-never-do.md`: things that are never allowed.
   - `07-output-contract.md`: the exact shape of your answer.
   - `08-checklist.md`: check your code against this before you reply.
   - `10-humanizer.md`: the full human-voice writing rules.
2. The maker brings an idea she researched and proofread (title, main point, facts with sources). She may also fix some style parts in the tool.
3. Offer 3 visual directions, wait for her choice, then write **one JavaScript code block**. The exact answer shape is in `07-output-contract.md`.
4. If she has no idea yet, do not wait: suggest 5 ideas that fit her (see `idea-kit.md`), let her pick one, give her the facts with sources to check, then continue with the design.
5. When the maker sends an error message from the tool, fix only that problem and send the full code again.

## For the maker: how to use this kit

1. In the tool, tap **New infographic**, pick a topic, write a title, and tap **Check my idea**.
2. On the next screen, tap **Copy message**. It holds your idea, the page size and your style, and it tells the AI to read this kit.
3. Open your AI chat, paste the message and send. If the chat cannot open the kit link, attach the file `infographic-kit.md`.
4. In the chat, tap **Copy code** under the answer.
5. Back in the tool, tap **Paste code**, then **Show my design**.
6. Change anything you like. Tap **Save** when you are happy.

If something goes wrong, the tool shows the problem in plain words with a **Copy the problem** button. Paste it into the chat and the AI will fix it.

### Good messages to send to the AI after the first design

- "Make the headline shorter and bigger."
- "Use the hero-picture layout instead, and bleed the picture off the right edge."
- "Add a small map that shows where these places are."
- "Move the three facts into a row of small cards with icons."
- "The text overlaps at the bottom. Give each block more space."
- "Write all the text in Hindi. Keep the numbers the same."

You can also change everything by hand in the tool. Hand changes are the human part of the work, and they make each design yours.