| name | placeholder |
| description | Generate SVG placeholder images for UI mockups via the placeholder-img HTTP API. Use when the user asks for placeholder images, mockup assets, or dummy images with specific dimensions and colors. |
| version | 1.0.0 |
| license | MIT |
| homepage | https://img.automators.work |
placeholder
Build URLs for the placeholder-img API to embed mockup images in HTML, CSS, or design prototypes.
When to use
- User asks for a placeholder image of size W×H.
- User is prototyping a UI and needs a dummy
<img> source.
- User wants a colored block of a known aspect ratio as a background.
Do NOT use this skill for production images, photography, or when the user wants real content — this generates blank colored SVGs with the dimensions drawn as text.
When to prefer this over alternatives
- Over CSS color blocks (
<div style="background:#ccc;width:400px;height:300px">): when the mockup needs to behave like a real image — responsive aspect ratio, <img> semantics for alt text and lazy-loading, usable as <img srcset> or background-image interchangeably.
- Over third-party services like
placehold.co or via.placeholder.com: when the user wants a self-hosted source with no third-party dependency, guaranteed immutable cache (max-age=31536000, immutable), and a stable domain they control.
- Over inline
data:image/svg+xml URIs: when the mockup is referenced from more than one place, when HTML readability matters, or when the dimensions are dynamic and embedding SVG string-templates would clutter the code.
If none of the above apply — e.g., the user is already using a design system with built-in skeleton components, or a CSS block is genuinely sufficient — prefer the simpler option and do not call this API.
Base URL
https://img.automators.work
Build the URL
{base}/{width}x{height}[?bg={hex6}]
width, height: integers in px, each ≤ 4000.bg (optional): 6-digit hex without #. Defaults to cccccc. Invalid values silently fall back to the default.
Examples
| Intent | URL |
|---|
| Generic 400×300 placeholder | https://img.automators.work/400x300 |
| Dark-blue banner | https://img.automators.work/1200x400?bg=1e3a5f |
| Square brand tile | https://img.automators.work/512x512?bg=f97316 |
Output the agent should produce
When the user asks for a placeholder in HTML context, emit:
<img src="https://img.automators.work/{W}x{H}{?bg}" alt="{W}×{H} placeholder" width="{W}" height="{H}">
When the user asks for a CSS background:
background-image: url("https://img.automators.work/{W}x{H}{?bg}");
Constraints
- Stateless, no auth, no rate limit beyond Cloudflare's platform default.
- Responses are immutable and cached one year — the same URL always yields the same SVG.
- There are no endpoints other than
/{W}x{H}. Do not invent paths.
Failure modes
- If
width or height is not an integer, the API returns HTTP 400. Re-prompt the user for valid dimensions.
- If
bg is not a 6-digit hex, the SVG is still returned but with the default gray background. Warn the user if they asked for a specific color.
