--- name: feature-callout-infographic description: Turn a product photo into a clean studio shot with 3 to 6 feature callouts: dots, leader lines and short labels in your brand colour, with the text added exactly and locally. Ideal for listings, launch posts and spec graphics. metadata: type: image version: 1.0.0 category: Product diagrams tagline: Use this Skill to show a product's best features with exact, brand-coloured callouts. made-for: E-commerce sellers, Product marketers, Brands, Agencies generates-with: Still image, 4:5 or 1:1 requires: Node.js 20.9 or newer (sharp's floor); sharp (run npm install sharp in the Skill folder) for scripts/add-callouts.mjs; your own FAL_KEY or any compatible image editor for the clean studio photo outside-costs: The image-edit model charges per image (about $0.20 at the default settings, billed to your own fal account). The callout step runs locally and is free. updated: 2026-10-16 title: Feature callout infographic availability: live summary: Put your product on a clean studio backdrop and point at its best features with exact, brand-coloured callouts. command: /feature-callout-infographic my headphones photo, callouts: 40 h battery, Active noise cancelling, Memory-foam cushions, USB-C fast charge output: A 4:5 and a 1:1 infographic image required-input: A product photo and 3 to 6 feature labels creator: meleon --- # Feature callout infographic Use this Skill when someone has a product photo and the 3 to 6 features worth pointing at, and wants the classic "product in the middle, features around it" graphic. The photo is cleaned onto a studio backdrop by a model. The words are never drawn by the model: they are added locally, so every letter is exactly what the person wrote. ## What you need - One clear photo of the product, as a public https URL or a data:image/ URI. If you upload it to a host, delete it afterwards. - The features: 3 to 6 short labels (2 to 4 words each) and what each one points to on the product. Use only claims the person gave you. Never invent numbers, certifications or specs. - Optional: brand accent colour (hex), 4:5 or 1:1, background. ## What you make - Portrait 4:5 (1600 x 2000) by default, or square 1:1 (1600 x 1600). The hero is rendered at 1600 x 2000 and neither output is upscaled. - The same studio photo works for both formats: only the crop and the label positions change. ## How to run it 1. Read `references/callout-guide.md` (placement, product types, how many callouts) and `references/output-spec.md`. 2. Run `node scripts/build-input.mjs --image --product ""`. Choose `--pose` so the features you will point at face the camera and sit where their labels will go (the guide has a pose per product type; the preview used the pose in `assets/generation-input.json`). `--share` (default 75) sets how much of the width the product fills; keep it at 70 to 78 so it is large but leaves room above and below for labels. It prints JSON `{ model, input }`. 3. Send it: POST the printed `input` to fal model `openai/gpt-image-2/edit` with the user's own FAL_KEY (this Skill never stores keys), or paste the `prompt` and the photo into any GPT-Image-class or Nano-Banana-class image editor (for example fal `fal-ai/nano-banana-pro/edit`). Save the result as `hero.jpg`. 4. Look at `hero.jpg` beside the original. The product must be the same one: same shape, colour, buttons and ports, with no new parts, text or flare, and every feature you want to label must be visible and sharp. If not, retry. 5. Check `node --version` is 20.9 or newer, then run `npm install sharp` once in the Skill folder. Then run `node scripts/add-callouts.mjs --input hero.jpg --spec callouts.json --grid --output grid.png` to see the photo with a 10 percent grid, and read each feature's position off it as fractions [x, y] of the photo. 6. Copy `assets/callouts.example.json` to `callouts.json`. For each feature set `text`, `target` (on the near edge of the feature), `align` ("left" or "right") and `label` positions per format. Follow the placement rules in `references/callout-guide.md`: labels on the same side as their target, leaders short and never crossing each other. 7. Run `node scripts/add-callouts.mjs --input hero.jpg --spec callouts.json --format portrait --output out.png` (repeat with `--format square`). The script stops if two leaders cross and warns about long leaders, overlapping labels and labels near the edge. Look at the output and trace each line: it must end on its feature, and every word must match the list letter for letter. 8. Max 3 hero attempts. Change one thing per attempt (say what: pose, share, background), view each output beside the input, then return the best and say what still differs. Placement fixes in the JSON are free and do not count. 9. Return the finished image(s), the spec JSON and the hero prompt. ## Files - `references/callout-guide.md`: placement, label writing, product types, callout counts. - `references/output-spec.md`: sizes, format, and the pass/fail checklist. - `assets/prompt-template.md`: the hero prompt to fill in. - `assets/generation-input.json`: model, settings and cost that produced the preview. - `assets/callouts.example.json`: the spec behind the preview (4 callouts). - `assets/preview.webp`, `assets/example-input.webp`: the finished sample and the photo it came from. - `scripts/build-input.mjs`: prints the model request. It calls no API. - `scripts/add-callouts.mjs`: draws the callouts locally, checks the layout, and can draw a measuring grid. It calls no API.