Skip to content
Get packs

Framed Panel Illustration

Draws pastel framed-panel cartoon scenes of people at work as SVG cards

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

What it does

Once installed, the agent can create original cartoon illustrations in one specific style: a pastel card with a violet framed window, a seated or kneeling person working at a laptop, and speech bubbles or UI cards that spill over the frame. The output is an SVG image file, a format used for web graphics. The skill includes detailed rules for colours, line widths and character shapes so new pictures match the existing set, plus helper scripts for checking and rendering the result.

Great for

  • Marketing or web teams who need a consistent friendly illustration for a blog header, feature spot or support page
  • Designers who want to generate on-brand empty-state, onboarding or 404 artwork in this specific cartoon look
  • Developers building a landing page who want an SVG card without hiring an illustrator

Skip it if

  • Requests for a different illustration style, since it only produces this framed-panel look and points elsewhere for other styles
  • Photographic or realistic images, because the style is flat cartoon vector art
  • Anyone expecting it to run without setup for the render and lint scripts, which need Node.js and a Chromium browser for rendering

Try asking

  • “Draw a framed-panel illustration of someone coding on a laptop for our support page header”
  • “Make a 404 error card in the pastel violet framed style with a person at a desk”
  • “Create a team page illustration with a person seated at a monitor, peach background”
Step-by-step guide: how to use Framed Panel 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-framed-panel.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip illustration-framed-panel.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-framed-panel.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 pastel background (peach, orchid or cyan) and a simple scene with one figure, since the style works best with one seated or kneeling character
  • Run the included lint script on generated SVGs to catch wrong dimensions, external links or stray IDs before using them on a page
  • Review the scripts before running them, since they execute code on your machine and render.mjs can launch a browser

What's inside

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