Skip to content
Get packs

Bold Pop Illustration

Draws chunky navy-outlined pop-geometric SVG spot illustrations for cards and pages.

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

What it does

This skill teaches an AI agent a specific illustration style: thick navy outlines, solid navy drop-extrusions, saturated flat colours with hatching and dots, and a cluster of overlapping props around one simple cartoon character. When asked, the agent writes hand-built SVG artwork in this look, using helper scripts for repeated shapes and a render-and-check loop to review the result. It is meant for playful product moments such as empty states, error pages and feature cards.

Great for

  • Designers who want a loud, retro pop-art spot illustration for a landing page or blog header
  • Developers building empty-state, 404 or onboarding screens who need on-brand SVG art
  • Marketers making feature or launch cards in a consistent Memphis-style look

Skip it if

  • Projects needing thin near-black outlines, big heads or no extrusions; the skill's own boundary note points to other styles for those
  • Anyone wanting a flat, outline-free look, which the skill says is the wrong skill; running the render scripts needs a local Chromium install and modifies files on disk

Try asking

  • “Draw a bold pop illustration of a rate-limited API error for our 404 page”
  • “Make a bold pop blog header showing a developer launching a build, in navy outlines”
  • “Create a bold pop empty-state card for an inbox with no messages”
Step-by-step guide: how to use Bold Pop IllustrationInstall, 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-bold-pop.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-bold-pop.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-bold-pop.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

  • Name the scene and mood clearly (error, launch, security) so the cluster of props fits the message
  • Ask for a render check; the skill includes a lint script that validates the SVG contract before use
  • Mention the 480x360 card size if the illustration is going into a fixed layout

What's inside

  • agents/openai.yaml
  • demo/PROMPT.md
  • references/craft.md
  • scripts/lint.mjs
  • scripts/pop.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.