Skip to content
Get packs

Guide · Agent skill

How to use the Framed Panel Illustration agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Framed Panel Illustration skill (illustration-framed-panel) lets an AI agent draw original cartoon scenes as 480x360 SVG cards in one fixed style: a pastel card with a violet window frame, a person working at a laptop, and speech bubbles or UI cards that spill over the frame. This guide is for readers who have never used an agent skill. By the end you will know what the skill does, how to install it, how to ask for a picture in a way the agent recognises, and what the optional scripts need.

Framed Panel IllustrationMengTo/Skills · MIT

Quick start

  1. 1Download the ZIP. Get the illustration-framed-panel ZIP from this page and unzip it so the folder contains SKILL.md and the scripts.
  2. 2Place the folder. Move it to ~/.claude/skills/ for personal use or to .claude/skills/ inside a project. Or upload it in the Claude apps under Settings → Capabilities → Skills.
  3. 3Make a request. Ask for a framed panel, window-frame, onboarding, 404 or blog header illustration, and name the person and their action.
  4. 4Check the output. Review the SVG against the brief: 480 by 360, one figure, violet panel, navy outlines and at most three words of text.
  5. 5Install Node.js for scripts. Install Node.js if you want to run the lint and panel-kit scripts. This is required to run the .mjs files.
  6. 6Add rendering if you need previews. Install Playwright or playwright-core and a Chromium browser only if you want PNG previews from render.mjs.

What the skill makes the agent do

An agent skill is a folder of instructions and helper files that an AI agent loads when your request matches the skill's description. This one teaches the agent a specific illustration style. Each picture is a single SVG file, a text-based image format used for web graphics.

The style has recognisable traits: a soft pastel card (peach, orchid or sky cyan), a periwinkle-violet panel framed in thin navy, outline-only clouds and a pale lavender floor band, L-shaped corner brackets outside two corners, and white speech bubbles or UI cards that break over the frame edge. The main figure is a semi-real character with a thin navy outline, seated or kneeling at a desk, laptop or screen.

  • Output: an SVG card, 480 by 360 units, with one person in the scene
  • Subjects: people working with laptops, screens, UI parts and devices
  • Built-in rules for colours, line widths and character shapes so new cards match a set

Install the framed panel skill from the ZIP

Download the illustration-framed-panel ZIP from this page and unzip it. The folder inside should contain SKILL.md and the scripts, references and style files listed below.

You can install it in one of two places. For a personal setup, put the unzipped folder in ~/.claude/skills/. For a single project, put it in the project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

  • Personal: ~/.claude/skills/illustration-framed-panel
  • Project: .claude/skills/illustration-framed-panel inside your project folder
  • Claude apps: Settings → Capabilities → Skills, then upload the skill

Ask for a framed panel illustration in plain words

The agent decides whether to use the skill from your request, so name the look you want. The skill's trigger phrases include framed panel, window-frame or picture-frame illustration, pastel violet cartoon, outlined flat character scene, empty-state, onboarding or 404 art, a blog header, a feature spot, a support, about or team page illustration, and a marketing card with a person.

Say who is in the picture and what they are doing. Keep the request to one person and one job, because the style needs one seated or kneeling figure per card.

  • Good: 'Draw a 480x360 SVG card of a product manager sitting on a stool sorting sticky notes on a board, for a Roadmap page.'
  • Good: 'Make an empty-state illustration for a support page: a person at a laptop with a chat bubble breaking out of the frame.'
  • Weaker: 'Draw a photo of a team in an office.' (photographic images are outside this style)

Run the helper scripts (optional, needs Node.js)

The skill includes scripts/panel-kit.mjs, which provides the face, bubble, bush and hand templates, plus a scaffold command. scripts/lint.mjs checks the result against the style rules, and scripts/render.mjs makes PNG previews. Running these needs Node.js to run the .mjs files.

Rendering PNG previews through render.mjs also needs Playwright or playwright-core and a Chromium browser. Without them you can still get the SVG output, but you will not get the preview images. Run the scaffold command from the skill folder.

  • Requires: Node.js
  • Requires for previews only: Playwright or playwright-core and a Chromium browser
  • Scripts run locally; the skill is listed as not using the network
node scripts/panel-kit.mjs scaffold

Safety notes before you run the scripts

This skill runs scripts, so read them before you run them. The listing says it runs scripts and does not use the network. Keep it in a folder you control and review scripts/lint.mjs, scripts/render.mjs and scripts/panel-kit.mjs first.

If you skip the scripts, the agent can still write SVG by following the rules in SKILL.md and references/craft.md, but you should check the output yourself, since lint checks are the only automated check the skill provides.

  • Runs scripts: yes
  • Uses network: no
  • Licence: MIT

Tips for getting cards that match your set

The skill is strongest when you ask for a set. Name the card job, the pastel you want (peach, orchid or sky cyan) and two breakout pieces that tell the story, such as a question and an answer or a chat bubble and a code snippet. Keep on-card text short, since the style allows at most three words per card.

If you need a different look, ask for it by name instead of forcing this style. The skill's own boundaries point to other skills for those cases.

  • Name one person and one action per card
  • Specify the pastel: peach, orchid or sky cyan
  • Ask for breakout pieces such as bubbles, UI cards or bushes
  • Keep text to three words or fewer
  • For other styles, use illustration-outlined-cartoon, illustration-flat or illustration-teal-spot

What people use it for

  • Blog header art for a marketing or product article
  • Feature spot on a landing page where a person uses the product
  • Empty-state or 404 artwork for a website, showing a person at a laptop
  • Support, about or team page illustrations with a friendly cartoon character

Frequently asked questions

Is the Framed Panel Illustration skill free?

The skill is listed under the MIT licence. You can use and adapt it under those terms, but check the licence text in the download before reusing its files in a commercial project.

What do I need to install illustration-framed-panel?

You need an agent that supports skills and a place to put the skill folder: ~/.claude/skills/, a project's .claude/skills/, or the Settings → Capabilities → Skills upload in the Claude apps. Node.js is needed to run the scripts, and Playwright or playwright-core with a Chromium browser is needed only for PNG previews.

Where do I put the skill folder?

Put the unzipped folder in ~/.claude/skills/ to make it available personally, or in .claude/skills/ within a single project. In the Claude apps, upload it under Settings → Capabilities → Skills instead.

Does the skill need an internet connection?

The listing says the skill does not use the network. It does run scripts, so review them before running and keep the folder somewhere you control.

Why won't the agent draw a realistic photo?

This skill only produces flat cartoon vector art in one framed-panel style. For photographic or realistic images, use a different tool, and for other illustration styles use the related skills named in its boundary notes.

What is the difference between this and illustration-flat or illustration-outlined-cartoon?

This style uses a violet framed window on a pastel card with a semi-real character. illustration-outlined-cartoon is for people on a plain white background with inked outlines and big heads, and illustration-flat is for flat shapes with no outlines and floating confetti.

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

Choose this skill if you need a consistent, friendly framed-panel cartoon card for a blog header, feature spot, support page or empty state, and you are comfortable running a few local scripts. Pick a different skill if you need photographic images, a different illustration style, or a setup that avoids running scripts entirely.

Download the skill