Individual skill
illustration-framed-panel
Draws original design-and-coding scenes as SVG cards (480x360) in a framed-panel cartoon style. Identifying traits are a soft pastel card with a periwinkle-violet panel framed in thin navy, outline-only clouds and a pale lavender floor band with dashes inside it; L-shaped corner brackets outside two corners; white speech bubbles, UI cards and bushes that break out over the frame edge; and a semi-real character with a thin navy outline (1.25 px), muted flat fills, navy hair with violet highlights, blush and short paired hatch marks. Covers people working with laptops, screens, UI parts and devices. Use when someone asks for a 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, or a marketing card with a person.
agent-skills/illustration/illustration-framed-panel/SKILL.md
Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 7,346
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- design Derived category
- engineering Derived category
- marketing Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 22,253 bytesSKILL.mdcore · 22,253 bytesagents/openai.yamlasset · 301 bytesdemo/PROMPT.mddoc · 1,981 bytesdemo/index.htmlasset · 78,027 bytesdemo/preview.jpgasset · 125,012 bytesexamples/design-system.svgasset · 23,085 bytesexamples/live-coding.svgasset · 22,532 bytesexamples/support.svgasset · 23,188 bytesreferences/craft.mddoc · 10,528 bytesscripts/lint.mjsruns · 3,079 bytesscripts/panel-kit.mjsruns · 26,709 bytesscripts/render.mjsruns · 5,071 bytesstyle.jsonasset · 9,394 bytes
Read excerpt
# Illustration: Framed panel
A cartoon person at work inside a violet "window", painted on a pastel card. The panel gives the scene a stage, and the UI bubbles and bushes that spill over its edge make it feel lively rather than boxed. Use it for friendly product and team moments: support, live streams, design work, onboarding.
Boundary: for people without a frame on a plain white background with inked outlines and big heads, use `illustration-outlined-cartoon`. For flat shapes with no outlines and floating confetti, use `illustration-flat`. For a single object with no person, use `illustration-teal-spot`.
Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in examples/ are this style's shipped cards.
## The look in one sentence
A fixed violet panel with a thin navy frame sits on a pastel card, with outline clouds and a dashed lavender floor inside it, and the scene's white bubbles, UI cards and leaves break out across its edge.
## Palette