Imogen
Created by Kent C. Dodds
Draft concise image descriptions that can be copied into an alt attribute.
Our developer take
Writing focused image alt text
Use it when adding screenshots or illustrations to documentation. Supply the surrounding context and review whether the description communicates the image's purpose on that page. Handle decorative images according to your accessibility guidelines.
A practical first workflow
How to use Imogen
Write concise alt text for one image in its actual page context.
An AI IDE List walkthrough based on the linked template. These are suggested tasks and review criteria, not results from a hands-on test.
First, add this Bot
Open the official Imogen template, choose Import Bot, and finish adding it in the Grok Bot app. Open its conversation, then follow the workflow below. If you have not set up the app, follow our installation and connection guide.
What to prepare
- The image file or an accessible image input.
- The surrounding sentence, caption, and the image's purpose on the page.
- Any essential UI wording or data that must be conveyed accurately.
Attach the image
Send one image with enough resolution to inspect meaningful details. Start with a product screenshot or documentation illustration.
Explain the page context
Paste the nearby copy and state what the reader should learn from the image. This helps avoid repeating an existing caption.
Request a single candidate
Ask Imogen for one concise, copyable alt text focused on the relevant information. Supply exact wording for any hard-to-read essential labels.
Review in the page
Compare the candidate with the image and surrounding text, revise inaccuracies, then add it to the image's alt field in your CMS or component.
First-run example
Replace every [BRACKETED_VALUE] with your details, attach the required files, then send this in the Bot's conversation.
Write one concise alt text for the attached [IMAGE_FILENAME]. It appears in a tutorial about [TASK], next to this text: [SURROUNDING_COPY]. The important information is [WHAT_THE_IMAGE_EXPLAINS]. Essential visible wording: [EXACT_LABELS_IF_NEEDED]. Return a single copyable alt text that conveys the relevant information without duplicating the caption. Do not infer details that are not visible.
What you should get
Use this checklist to review the first result and request anything missing.
- One concise alt-text candidate ready to copy.
- A description focused on the image's purpose in the supplied context.
- Wording you can verify against the actual image before using it.
For the next run
Process the next image with its own context. Reuse your preferred tone while reviewing each description individually.
If the first run gets stuck
If the text is generic or misses the point, provide a clearer image and explain what the reader needs to understand. For unreadable labels, supply the exact wording.
What the template includes
Official sourceSummarized from the public listing. The labels below describe capabilities; exact installed skill and connector names are not always published.
Integrations & inputs
- Image input; no named connector listed
Skills & playbooks
No separate skills documented in the public listing.
Routines
No recurring schedule documented in the public listing.
What to consider
The template focuses on a short description. It does not establish that the whole page is accessible.