Skip to content
Get packs

Flat Vector Illustrations

Draws slim flat-vector people with one hero prop as 480x360 SVG cards for product screens

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

What it does

When installed, the agent can create flat, outline-free vector illustrations as SVG cards: a slim, long-limbed figure in a dynamic pose holding or working with one prop, surrounded by sparse confetti, in a fixed palette of lavender, indigo, yellow, coral and mint. It follows a documented style guide for proportions, line weights and colours, and includes helper scripts that generate and check the SVG files, so the results look consistent with each other.

Great for

  • Designers making empty states, 404 pages, onboarding screens or launch banners in a modern flat style
  • Front-end developers who need a consistent set of SVG illustrations for a web product
  • Marketers producing blog headers or feature cards that match an existing flat illustration set

Skip it if

  • Projects needing photographic, shaded or heavily detailed artwork, since the style forbids shading and gradients
  • Teams that need the outlined cartoon or black-silhouette styles; the skill itself points to other skills for those
  • Anyone expecting a finished image file without a browser setup, because rendering previews needs Chromium and Playwright installed

Try asking

  • “Draw a flat illustration of a person debugging code with a laptop for our 404 page”
  • “Make a coming-soon card in the flat illustration style with a person holding a coffee cup”
  • “Create an empty-state illustration for a project list with one person and a clipboard”
Step-by-step guide: how to use Flat Vector IllustrationsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    illustration-flat.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip illustration-flat.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 hero prop and the moment (for example, a bug report or a launch) so the agent picks a suitable pose and prop colour.
  • Ask for a render after generating so you can check the card visually, and run the lint script to confirm the SVG meets the file rules.
  • Keep the example cards in the skill folder as references when asking for new cards so the output matches the existing set.

What's inside

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