Guide · Agent skill
How to use the Flat Illustration with Black agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The illustration-flat-with-black skill teaches an AI agent to draw flat vector spot illustrations of tall, lanky people doing design and coding tasks, with solid black as a main colour. It suits product empty states, onboarding screens, error pages and marketing cards. This guide explains what the skill does, how to install it, how to ask for artwork so the agent uses it, and what it needs to run.
Flat Illustration with BlackMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the illustration-flat-with-black skill ZIP from the page where you found this guide.
- 2Unzip the skill. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Check the requirements. Install Node.js to run the scripts. Add Playwright and Chromium only if you want the render script.
- 5Ask for an illustration. Describe the scene, the purpose and the size, for example a 480x360 SVG card for an empty state.
What this skill makes the agent do
Once installed, the skill gives the agent a fixed visual style. Artwork is built from flat, outline-free coloured shapes: denim blue, leaf green, sun yellow and tomato red on cream skin. Large solid black areas cover hair, trousers, shoes and devices, and thin black lines handle detail. Figures are one or two tall people in a design or coding moment, such as running from a pile of messages or hovering over a deploy button.
The skill also sets the rules the agent follows: a palette, line weights, character proportions, head and hand shapes, props and composition. Its bundled helper scripts can build the SVG parts and check the result against the style.
- Output is a 480 by 360 SVG card with a white background
- Only two stars and two plus-sparkles are used as decoration
- Black is used as a fill colour, not only as an outline
Install the illustration-flat-with-black skill
Download the skill ZIP from the page where you found this guide. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill available only in that project. The skill folder should be named illustration-flat-with-black.
In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
~/.claude/skills/illustration-flat-with-black/Trigger the skill with natural requests
You do not need a special command. Ask for the kind of picture you want and name the style. The skill is meant for requests such as flat illustration with black, flat people or character illustration, friendly product or SaaS illustration, and art for empty states, onboarding, 404 and error pages, blog headers, feature spots, marketing cards or app screens.
Say what the person is doing and what the image is for. Mention the style by name if you want to be sure it is used. Requests for outlined cartoons or navy-and-lavender confetti styles belong to sibling skills and will not use this one.
- Use $illustration-flat-with-black to draw a 480x360 SVG card of a designer catching a falling colour swatch, for an empty state.
- Draw a flat illustration with black of a developer leaning over a desk for our 404 page.
- Make a flat people illustration for our onboarding screen showing two teammates at a sticky-note board.
Examples of what you can ask for
The skill's demo prompts show three cards that could ship as examples: a developer running from a swarm of envelopes and chat bubbles, a developer with a finger over a big red DEPLOY button beside a FRI calendar, a clock and a cat, and two teammates turned toward each other with mugs at a sticky-note board.
Each card is a single self-contained SVG with a viewBox of 0 0 480 360, presentation attributes only and no background rectangle. Ask for the same constraints if you want to paste the result straight into a page.
What the skill needs to run
The skill itself is a set of instructions and reference files. The bundled .mjs scripts run on Node.js. Playwright (playwright-core) and a Chromium browser are needed only for the render script. The skill does not need network access to work.
The source lists its licence as MIT.
- Node.js, to run the bundled .mjs scripts
- Playwright (playwright-core) and a Chromium browser, only for the render script
- Network access: not used by the skill
Safety notes on scripts and network
This skill runs scripts, so read the files before you install it. The bundled files include scripts/lint.mjs, scripts/parts.mjs and scripts/render.mjs, along with SKILL.md, style.json, references/craft.md, agents/openai.yaml and demo/PROMPT.md.
The listed requirements say the skill does not use the network. Scripts run locally, and the render script is the only one that needs a browser.
- Review scripts/ before running them
- Only scripts/render.mjs needs Playwright and Chromium
- The skill is listed as not using the network
Tips for better results
Give the agent a clear scene and purpose, for example the product context and where the card will appear. The skill's rules cover palette, proportions and composition, so you do not need to specify those each time.
Black shoes are the default. The style guidance warns that red shoes next to a red hero prop can pull the eye away from the main action, so avoid asking for tomato shoes beside a tomato button.
- State the scene, the characters' action and the card size
- Let the skill choose the palette unless you have a brand reason to change it
- Ask for a check against the style if you want the lint step used
What people use it for
- Empty-state art for a product where a designer is catching falling work items
- Friendly 404 or error page art showing a developer at a desk
- Onboarding screens with two teammates discussing a sticky-note board
- Blog headers and feature cards for a SaaS marketing site
Frequently asked questions
How do I install the illustration-flat-with-black skill?
Download the skill ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What does the illustration-flat-with-black skill need to run?
The bundled .mjs scripts need Node.js. Playwright (playwright-core) and a Chromium browser are needed only for the render script. The source lists that the skill does not use the network.
Is the illustration-flat-with-black skill free to use?
The source lists the licence as MIT. Check the licence file in the skill's repository for the full terms.
Does the skill run code on my machine?
Yes. The skill includes scripts such as scripts/lint.mjs, scripts/parts.mjs and scripts/render.mjs. Review them before installing, and note that only the render script needs a browser.
Which other styles are similar to this one?
The skill's boundary notes name three sibling skills: illustration-flat for outline-free art with a navy-and-lavender palette and floating confetti, illustration-outlined-cartoon for inked outlines and big heads, and illustration-line-interior for thin indigo outlines on white fills. This skill is the one where black is a fill colour.
Why does the agent's illustration look off-style?
The skill is built for one specific look. Asking for outlined cartoons, navy-and-lavender confetti styles, photo-realistic or non-flat artwork can make results drift. Name the style in your request and describe the scene in plain terms.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits designers and developers who want a consistent set of flat, black-accented people illustrations for product screens, empty states, error pages and marketing cards. It is a poor choice if you want outlined cartoons, navy-and-lavender confetti styles or photo-realistic art, which sibling skills or other tools cover better.
Download the skill