Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Ideagram — Concept to On-Brand Illustration

Matches your concept to a real unDraw illustration in a local library and recolors it to your brand accent for one polished SVG.

Design & UIIntermediate★ 181⑂ 11AI score 9/10Last updated: Aug 22, 2026

What it does

  • Distills a feature description, blog post, or pitch into a single core idea, then matches it to the best-fitting illustration in your local unDraw library via a generated index.md.
  • Runs recolor_undraw.py to swap only unDraw's #6c63ff accent family for your brand color, preserving skin tones, hair, clothing, and neutrals.
  • When nothing fits, lifts whole components with extract_component.py and assembles a real scene (background, midground device, figure, ground shadow).
  • Validates the SVG with validate_assets.py and optionally exports social-sized PNGs via export_png.py.
  • Enforces honesty: it reports which illustration was matched, why, and whether it fell back to lower-quality generated primitives.

Who it's for

  • Indie devs and startup teams who constantly need hero, feature, and blog illustrations.
  • Designers and marketers who want illustrator-grade vectors instead of crude AI-drawn approximations.
  • Content and PM folks who must keep brand color consistency.

Example uses

  1. "Make a graphic explaining this new feature" → matches a dashboard/chart scene and returns an SVG recolored to #FF6B35.
  2. "I need an image for this tweet" → picks a multi-figure teamwork scene and exports a 1200×675 PNG.
  3. "Visualize an AI composing a whole design system" → no keyword match, but it picks mobile-site-builder as the closest visual metaphor.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/codeswithroh/tastemaker/HEAD/skills/tastemaker/ideagram/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/tastemaker/ideagram folder from the GitHub repo codeswithroh/tastemaker into my ~/.claude/skills/ideagram/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/codeswithroh/tastemaker.git && mkdir -p ~/.claude/skills && cp -r tastemaker/skills/tastemaker/ideagram ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Clone the repo: git clone https://github.com/codeswithroh/tastemaker.git
  2. Copy the skill: mkdir -p ~/.claude/skills && cp -r tastemaker/skills/tastemaker/ideagram ~/.claude/skills/
  3. Confirm Python 3 is available: python3 --version
  4. Create the library folder: mkdir -p ~/.ideagram/undraw
  5. Download 20–30 SVGs from undraw.co/illustrations (teams, devices, data, growth, communication, security) into that folder.
  6. Build the index: python3 ~/.claude/skills/ideagram/scripts/build_library_index.py
  7. Optional, for PNG export: pip install cairosvg plus system cairo.
  8. Restart Claude Code and ask something like "make an illustration explaining this feature."
View source on GitHub ↗License: MIT