Guide · Agent skill
How to use the Halftone Line Illustrations agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Halftone Line Illustrations skill (skill name illustration-halftone-line) teaches an AI agent to draw hand-drawn-looking SVG spot illustrations in a black-and-white editorial style. It is for designers, front-end developers and marketers who need small, colour-free artwork for empty states, onboarding screens, 404 pages, blog headers and feature cards. By the end of this guide you will know what the skill does, how to install it, how to ask for artwork that uses it, and what it needs to run.
Halftone Line IllustrationsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the illustration-halftone-line ZIP from this page. Keep the file somewhere you can find it.
- 2Unzip the skill folder. Unzip the file. You should see a folder named illustration-halftone-line containing SKILL.md and the scripts folder.
- 3Place the folder. Move the folder into ~/.claude/skills/ for a personal install, or into your project's .claude/skills/ folder to limit it to one project.
- 4Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities and upload the skill under Skills instead.
- 5Install Node.js. The scripts need Node.js. Add playwright or playwright-core and a Chromium browser only if you want PNG previews.
- 6Start a new session and ask. Start a new agent session and describe the card, for example a 480 by 360 SVG for a 404 page, without any colour requests.
- 7Review the SVG. Open the SVG file, or the PNG preview if you set up rendering, and ask the agent to adjust composition or dots as needed.
What agent skills are and what this one does
An agent skill is a folder of instructions and helper scripts that an AI agent can load when a request matches the skill's description. This skill is one of a family of illustration styles, and it covers one specific look.
The output is a single SVG file per illustration, a 480 by 360 card on warm off-white paper (#f4f1ea) using one black ink (#111). Lines have a slight hand wobble and are left open rather than closed. Every grey is made of fine halftone dots clipped to shapes, and a few solid black areas such as hair, leaves or a bag add weight. The skill has no colour at all.
- Warm off-white paper and a single black ink, nothing else
- Open outlines with a small hand wobble applied to the art group
- Greys built only from jittered halftone dots
- A compiler script (halftone.mjs) that turns simple tone tags into dot fills
- A render script (render.mjs) that produces PNG previews so the agent can check its own work
- A lint script (lint.mjs) and a style.json file are included in the package
Install the skill: download, unzip and place the folder
Download the skill's ZIP file from this page. Unzip it. You will get a folder named illustration-halftone-line containing SKILL.md, the scripts folder, the references folder and the other files listed below.
For a personal install that works in every project, place the folder in your ~/.claude/skills/ directory. To limit it to one project, place it in that project's .claude/skills/ directory instead. Start a new agent session afterwards so the skill is picked up.
If you use the Claude apps instead of a project folder, open Settings, go to Capabilities and upload the skill under Skills.
- Files in the package: agents/openai.yaml, demo/PROMPT.md, references/craft.md, scripts/halftone.mjs, scripts/lint.mjs, scripts/render.mjs, SKILL.md and style.json
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings, then Capabilities, then Skills
Check what you need before running it
The skill's scripts are plain .mjs files with no dependencies, so the only hard requirement is Node.js. The compile step runs Node code, and the render step is what produces PNG previews.
Rendering PNG previews needs playwright or playwright-core plus a Chromium browser. This is optional. You can still get SVG output without it, but the agent cannot produce the PNG check images that its critique loop relies on.
The skill does not use the network, but it does run scripts. If your environment forbids running scripts, this skill will not work there.
- Required: Node.js
- Optional, for PNG previews only: playwright or playwright-core and a Chromium browser
- Runs scripts: yes
- Uses network: no
- Licence: MIT
Ask for the look with natural requests
You do not need to name the script or the files. The skill is triggered by requests that mention its style or its typical uses. Words such as halftone, stipple, dotted, risograph-like, newsprint, black-and-white, monochrome line, editorial line or zine-style all match, as do requests for empty states, onboarding, 404 pages, blog headers, feature spots and marketing cards in that look.
Name the skill with a dollar sign if you want to be explicit. The project's demo prompts use this form.
- Name the subject, the action and the card size, for example a 480 by 360 SVG card
- Say that the artwork is for an empty state, a 404 page or a blog header so the composition fits the use
- Keep the brief free of colour requests, because any colour in the brief means this is the wrong style
Use $illustration-halftone-line to draw a 480x360 SVG card called "Standing Desk": a developer types at a raised desk while stretching one calf.Example requests you can adapt
The demo prompt file in the package includes three briefs that produce cards in this style. Each one names a subject and its action, and asks for one self-contained SVG with a paper-coloured background rect, using only the two inks.
Use the same pattern for your own work: one subject, one action, the size, and the use case. Ask for a separate seed or card name for each variation so the wobble and dot pattern differ.
- Pair programming: two people share one screen, one types and the other points at the code
- Train ride: someone codes on a laptop during a commute
- Design critique: a designer and a reviewer go over printed screens on a table
- Empty state: a person sorting a short list of finished tasks
Tips for better results
Give the agent one clear subject. The style works best with calm, human product moments such as collaboration, reviews, commutes and focus time.
Ask for the render-and-critique loop explicitly if you want the agent to check its own image before handing it over. This needs the optional PNG rendering setup.
If you need a different look, such as thick brush outlines, a single continuous line or thin indigo interiors, the skill's boundaries point to other styles in the same family.
- Keep subjects simple. The output is deliberately simplified and hand-drawn, not photorealistic or detailed
- Use a new seed for each card in a set so the wobble and dots do not repeat exactly
- Avoid asking for colour, shading gradients or photo-like detail
What people use it for
- Empty states for a task app, such as a person sorting a short list of finished tasks
- Onboarding screens that show a calm, human moment like a first review
- 404 pages with a simple, monochrome figure and a line of copy
- Blog headers and feature cards in a consistent black-and-white editorial look
- Small colour-free SVG artwork for a website that needs to match a monochrome brand
Frequently asked questions
Is the illustration-halftone-line skill free to use?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the package for the full terms before using it in a commercial project.
What do I need to install this agent skill?
You need the skill folder placed in ~/.claude/skills/ or a project's .claude/skills/ folder, or uploaded in the Claude apps under Settings, Capabilities, Skills. The scripts need Node.js.
Do I need a browser to use it?
No browser is needed for the SVG output. Rendering PNG previews needs playwright or playwright-core and a Chromium browser, and that step is optional.
Does the skill send data over the network?
The package states that it does not use the network. It does run scripts, so check that your environment allows running Node.js code before you install it.
Can I use it for a project that needs colour?
No. The skill says that any colour in the brief means this is the wrong style, and that other skills in the same family fit better for colour work.
How does it compare with other illustration skills?
This style uses one black ink, halftone dots for greys and open outlines. Other styles in the family cover a single continuous line, thick brush outlines with a second flat ink, and thin indigo interiors with colour accents.
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
Use this skill if you need consistent black-and-white SVG spot illustrations for empty states, onboarding, 404 pages or blog headers, and you can run Node.js scripts in your environment. Pick a different style if your brief needs colour, detailed or photorealistic art, or if running scripts is not allowed.
Download the skill