# ihumane · Graphics and images · v0.1 You are an agent about to make, pick or place an image: a photo, an illustration, an icon, a diagram, a share image, a favicon, or a picture from an image model. This module is written for you, not for a human reader. It turns what experienced designers and art directors know by instinct into rules you can follow and checks you can run. Read this file fully. Read the other files when the step below tells you to. --- ## Why this exists You can make or find an image in seconds, so you add one wherever there's a gap. Nothing stops you, and you produce the most average picture for each gap. That gives four failures humans keep correcting you for: 1. **It looks machine-made.** Glossy 3D blobs, purple gradients, plastic people, sparkles, warped hands, letters that aren't quite letters. People now spot this in a second and trust the page less before they read it. 2. **It doesn't hang together.** Icons from three sets at three sizes, illustrations in four styles, photos with different light and colour. Each one is fine alone; together they look like a scrapbook. 3. **It's broken in ways you can't see.** Text baked into a picture that screen readers can't read and nobody can edit. A 4 MB file in a 300px slot. A small image stretched until it's blurry. A black logo that vanishes in dark mode. 4. **It adds nothing.** A hero image because landing pages have heroes. A person smiling at a laptop on a settings page. It takes space and bandwidth and says nothing about the product. Images are also where agents most easily mislead people: a generated "screenshot" of a product that doesn't exist yet, a generated face labelled as a customer. That breaks trust in the person you work for, not just in the page. --- ## Size the job first | Size | Looks like | Do | |---|---|---| | **Small** | One image, one icon, a favicon, a share image, swapping a photo | Brief in 3 lines: the image's job, the slot it fills (where, shape, size), and where the style comes from. Ask **0–1** questions. Make or pick it. **Always** do the review (step 5) and run the check. | | **Large** | A set: all the images for a site, an icon set, an illustration style, a series of generated images, a brand's image style | The full workflow below, every step. Record the recipe in `DESIGN.md` so the next agent makes images that match. | If unsure, treat it as small. The review is never skipped: most image mistakes only show at real size, on a phone, or in dark mode. --- ## The workflow | Step | What you do | File | |------|-------------|------| | 0. Remember | Look for an **Images** section in `DESIGN.md`. If it has an icon set, a style block or a recipe, follow it exactly. On a large job with no such section, you'll add one at the end (`2-generate.md` P2). | `DESIGN.md` | | 1. Brief | Decide whether an image is needed and what job it does. Write the brief. Choose where it comes from: real first, generated last. Check it's honest and that you may use it. | `1-brief.md` | | 2. Generate | Only if you're using an image model: write a specific prompt, keep the set consistent, avoid the generic AI look, keep text out, and inspect every result. | `2-generate.md` | | 3. Make it by kind | Apply the rules for what it is: icon, illustration, photo, diagram. | `3-kinds.md` | | 4. Place it | Right format, right size, share images, favicons, alt text, dark mode. | `4-place.md` | | 5. Review | Look at every image where it lives, run the check, then go through five lenses. Fix before reporting. | `5-review.md` | --- ## The format of every rule - **Rule:** what to do, as specifically as possible. - **Why:** what happens to a real person if you don't. - **Agent trap:** the specific way agents like you get this wrong. - **Check:** how to verify it, ideally something you can run or count. - **Limit:** where the rule stops applying, when that isn't obvious. Runnable check: `checks/images.js` (get it with `ihumane_get_check({ name: "images" })`). Run it on the rendered page, not on your reading of the code. | Check | Finds | |---|---| | `checks/images.js` | Images blurry from being shown larger than they are, files far bigger than their slot, stretched images, broken images, missing or useless alt text, heavy files, icon-only buttons with no name, and icons in one row with different sizes, stroke weights or styles | This module builds on UI design. It doesn't repeat its rules; it points to them by file and ID. The clichés list in `pro/ui-design/7-avoid.md` applies to every image you make. --- ## Five rules that matter most 1. **No job, no image.** Name what the image does for the person looking: explain, show the real thing, set a mood, or identify. If you can't, leave it out. (`1-brief.md` B1) 2. **Real beats made.** A real screenshot or a real photo beats any illustration or generated picture. Generate last. (`1-brief.md` B3) 3. **Never let an image lie.** No generated "screenshots" shown as the real product, no generated people shown as customers, no logos of real companies you didn't get from them. (`1-brief.md` B4) 4. **Words go in HTML, not in pixels.** Important text never lives inside a generated image. (`2-generate.md` P4) 5. **Size for the slot and say what it shows.** About twice the displayed width, the right format, and alt text that says what it shows and why it's there, or empty alt for decoration. (`4-place.md` F2, F5) --- ## Precedence The human's brand and taste come first: an existing brand guide, image style, icon set or `DESIGN.md` beats every default here. Taste is their call (`modules/working-with-humans/2-ask.md` Q3): when a choice is a matter of taste, ask with your recommendation. The image tool's own terms and content policies also come before this module. If a rule here conflicts with any of them, follow them, and mention the conflict once in your report.