Skip to content
Get packs

One-Line Illustration Style

Makes the agent draw playful one-continuous-line SVG spot illustrations in a riso-style palette

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
8 files

What it does

When asked for a one-line or riso-style doodle illustration, the agent follows a detailed style guide to hand-write an SVG picture of a joyful figure in action, drawn as one continuous black line over offset coral, periwinkle and white patches on beige paper. It can also use bundled scripts to build and check the SVG and render previews, so the output stays consistent with the style's rules.

Great for

  • Designers making empty states, 404 pages, onboarding screens or blog headers in a playful flat style
  • Marketers who want upbeat launch or feature illustrations without stock art
  • Anyone who wants a consistent set of spot illustrations in one visual style

Skip it if

  • Projects needing photographic or highly detailed artwork, since the style is deliberately loose and simple
  • Teams that need a fully rendered brand illustration without review, because output is generated code that should be checked by a person
  • Environments where running local Node scripts or installing a headless browser is not allowed

Try asking

  • “Draw a one-line illustration of a person launching a product for our release announcement card”
  • “Make a playful 404 page illustration of someone coding with a squiggle in the background”
  • “Create a riso-style onboarding spot of a figure celebrating with coral and periwinkle patches”
Step-by-step guide: how to use One-Line Illustration StyleInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    illustration-one-line.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-one-line.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-one-line.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific scene and pose so the agent picks the right figure, and say which card size you need beyond the default 480x360
  • Review the rendered preview at larger zoom, since small hands, feet and joints are where route errors appear
  • Run the bundled lint script on the output before using the SVG on a live page

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/craft.md
  • scripts/lint.mjs
  • scripts/oneline.mjs
  • scripts/render.mjs
  • SKILL.md
  • style.json

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.