Guide · Agent skill
How to use the One-Line Illustration Style agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The illustration-one-line skill is a set of instructions and bundled scripts that lets an AI agent draw original spot illustrations in a One-line style: a joyful figure in action, drawn as one continuous black line over offset coral, periwinkle and white patches on warm beige paper. It is aimed at designers and marketers who need playful art for empty states, 404 pages, onboarding screens, blog headers and launch cards. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what it needs to run.
One-Line Illustration StyleMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the illustration-one-line ZIP from this page and unzip it.
- 2Place the folder. Move the folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Install Node.js. Make sure Node.js is available so the bundled scripts can run.
- 5Ask with a natural request. Describe the card: subject, pose, props and use case, such as an empty state or 404 page.
- 6Check and render. Run lint.mjs on the SVG and, if Chromium is available, render.mjs for a preview.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder with a SKILL.md file of instructions that an AI agent loads when a request matches it. This skill tells the agent how to hand-write an SVG picture in one specific visual style rather than guessing at one.
The style uses one uniform black line of 2.3 px at 480 wide that loops and doubles back to draw the whole figure. Flat coral, periwinkle and white patches sit behind the line, deliberately knocked 2 to 6 px out of register, like a misprinted riso print. There is no ground plane, only a squiggle, a curl or a few speed strokes. The style guide covers the palette, poses, composition and a render-critique loop.
- Output: a single SVG card drawn at 480 by 360.
- Subjects: joyful figures doing design and coding work in mid-action poses.
- Best for: empty states, 404 pages, onboarding, blog headers, feature spots, launch announcements and marketing cards.
Install the illustration-one-line skill
Download the ZIP for agent-skills/illustration/illustration-one-line from this page and unzip it. For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/illustration-one-line/
- Project install: .claude/skills/illustration-one-line/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Check what you need before you run it
The bundled scripts (lint.mjs, oneline.mjs and render.mjs) need Node.js. Rendering preview images also needs playwright or playwright-core and a Chromium browser, which is optional. The files do not mention any API keys or accounts.
The skill runs scripts but does not use the network, according to its files. If your environment does not allow local Node scripts or a headless browser, the style guide can still shape the output, but you will not get the build, check or render tools.
- Required: Node.js
- Optional: playwright or playwright-core, plus Chromium, for rendering previews
- Not mentioned in the files: API keys or accounts
Trigger the skill with natural requests
Ask for the style by name or describe it. The skill's description lists the words that should trigger it, including one-line, single-line, continuous-line, misregistered, riso-style and playful doodle illustrations. You can also name the use case, such as an empty state or a 404 page.
The demo prompt in the skill folder shows the pattern: name the skill, then describe a card with a subject, a pose and a few props.
- Example: Use $illustration-one-line to draw a "Deep Work" card: a developer cross-legged on a floating cushion, laptop on the knees, headphones on, a squiggle of thought loops rising from the head.
- Example: Draw a one-line riso-style illustration of a developer celebrating a deploy, for a launch announcement card.
- Example: Make a playful doodle of a designer sprinting with a stack of wireframes, for a blog header.
Review the output before you ship it
The skill produces generated SVG code, so a person should check it. The style guide includes a render-critique loop, and the bundled render.mjs script can produce preview images when a headless browser is installed. The lint.mjs script checks the file against the style's rules.
Ask the agent to fix specific faults you see, such as a limb that folds back on itself or a hand that reads as a plain oval. The guide names these failure modes and how to avoid them.
- Run lint.mjs to check the SVG against the style rules.
- Render a preview with render.mjs if Chromium is available.
- Keep the card at 480 by 360 so the stated line weights hold.
Safety notes: scripts and network
This skill runs local scripts (lint.mjs, oneline.mjs, render.mjs). Read them before you let an agent run them in a sensitive project, and run them in an environment where local Node scripts are allowed. The files say the skill does not use the network.
Rendering previews may require installing playwright or playwright-core and a Chromium browser. Only do that if your environment permits it.
- Runs scripts: yes
- Uses network: no
- Review the scripts in scripts/ before first use.
What people use it for
- An empty state for a project tool, showing a developer mid-leap between two code braces.
- A 404 page with a sprinter carrying a </> baton and a stopwatch on a motion squiggle.
- An onboarding screen showing a developer juggling a laptop, a coffee cup and a bug.
- A blog header or feature spot in a consistent set of playful spot illustrations.
- A launch announcement card with an upbeat figure in a celebratory pose.
Frequently asked questions
How do I install the illustration-one-line skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
What do I need to run it?
The bundled scripts need Node.js. Rendering preview images optionally needs playwright or playwright-core and a Chromium browser. The files do not mention API keys or accounts.
Does the skill use the internet?
The skill's files state that it does not use the network. It does run local scripts, so review them before use.
Is this skill free to use?
The skill is licensed under MIT, as listed on this page. Check the licence file in the download for the full terms.
What is the difference between this and other illustration styles?
This style uses one continuous black line over offset coral, periwinkle and white patches. The skill's SKILL.md points to other styles for different looks: illustration-halftone-line for dot-screen tones with no colour, illustration-ink-sketch for a brush outline around a critter, and illustration-two-colour-brush for thick brush outlines with one mint ink.
Why does my output look wrong or the agent ignores the style?
Check that the skill is installed in the right folder and that your request uses a trigger phrase such as one-line or riso-style. Ask the agent to run lint.mjs on the result, since the style has specific rules on line weight, palette and colour placement.
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 upbeat, consistent spot illustrations in a playful flat style and can review generated SVG before publishing. Pick something else if you need photographic or highly detailed artwork, a fully rendered brand illustration without human review, or if your environment does not allow local Node scripts or a headless browser.
Download the skill