generate_test_imageLABSCO SUMMARY
The dimension overlay is what stops a placeholder folder becoming a puzzle.
Every generated image carries its own size printed on it, with contrast picked against the background, so you can tell at a glance which file is which without opening an inspector. Combined with directory auto-creation, filling out an assets tree becomes one request rather than a script — capped at 4096 pixels on each side.
What it is
A small Node server that draws test images. You give it dimensions, a hex colour and a destination path; it renders a PNG with the dimensions written on it, picks a text colour that contrasts with the background, and creates any missing directories on the way. It is a build-time convenience rather than a design tool.
What you get
generate_test_imagewrites a PNG to a path you namewidthandheightin pixels, from 1 to 4096coloras a hex code, in either#FF0000or#f00form- An optional
labeldrawn in the top-left corner - The image dimensions are overlaid automatically, so a folder of placeholders is self-describing
- Missing directories in the target path are created for you
Requirements
No account and no key. Clone, npm install, npm run build, then point your client at node with the path to build/index.js. Package image-gen, version 0.1.0. It depends on the Node canvas library, which needs native build tooling on some systems. It writes files wherever the path you give it points, so keep that path scoped to your project.
Setup effort
Build from source — git clone https://github.com/sam2332/Mcp-Server-Placeholder-Image-Generator.git
USE CASES
Filling an asset folder while building a layout
Ask for the sizes you need and let it write them all to the right paths.
Checking how a component handles an aspect ratio
Generate the exact dimensions and drop the file in, rather than hunting for a stock image.
Labelling test images so they are identifiable
Add a custom label in the corner alongside the automatic dimension overlay.
1 tool
Listed in project docs. Your client may show a different list.
BEFORE YOU INSTALL
What to know first
Tools you get
1 tool named in the project's documentation.
Requires
node on PATH
Where it runs
Both documented clients run the server on your machine.
INSTALLATION
Connect your client
Server setup
git clone https://github.com/sam2332/Mcp-Server-Placeholder-Image-Generator.git
cd Mcp-Server-Placeholder-Image-Generator
npm install
npm run buildMCP Clients
VS Code
{
"servers": {
"Image Placeholder Gen": {
"type": "stdio",
"command": "node",
"args": [
"<YOUR_PATH_TO_IMAGE_GEN>/build/index.js"
]
}
}
}<YOUR_PATH_TO_IMAGE_GEN> is the full path of your clone, written out in full. VS Code starts node without a shell, so a ~ in the path is not expanded.
Claude Desktop
{
"mcpServers": {
"image-gen": {
"command": "node",
"args": [
"<YOUR_PATH_TO_IMAGE_GEN>/build/index.js"
]
}
}
}<YOUR_PATH_TO_IMAGE_GEN> is the full path of your clone. The build step writes build/index.js there.