ideagram

Featured

Turn a concept, feature description, blog post, or pitch into a single beautiful, on-brand illustration by matching it to a real unDraw illustration in a local library and recoloring it to the brand accent — genuine illustrator quality, not an AI-drawn approximation. Use whenever the user asks to "make an illustration," "create a graphic," "visualize this concept," "explain this visually," wants something "unDraw-style" or "Storyset-style," needs a hero/feature/blog illustration, or says an idea needs a picture. Trigger even if they don't name a style — "make something to explain X" or "I need a graphic for this tweet" both qualify.

Code & Development 365 stars 23 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%
85
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Ideagram ## The core idea Produce **one** beautiful, on-brand illustration for a concept by matching it to a real unDraw illustration and recoloring it to the brand — never by hand-drawing. unDraw's figures are dozens of hand-placed bezier anchors from a professional illustrator; freehand-generating path coordinates produces crude pictograms, not art. The quality lives in the real path data, so this skill reuses it: match → recolor → (compose, if needed) → deliver. The output is genuinely illustrator-grade because it *is* the illustrator's work, just made on-brand. Read `references/undraw-anatomy.md` once — it's the dissection of how these files are built and why this reuse approach works. ## Setup: a local unDraw library This skill reads real unDraw SVGs from a **local library folder** — it does not bundle or redistribute unDraw's files (their license bars compiling their assets into a redistributed collection; downloading them for your own use is free and needs no attribution). - Default library location: `~/.ideagram/undraw/`. - Populate it by downloading illustrations from [undraw.co/illustrations](https://undraw.co/illustrations) (free, no attribution, unlimited) — 20-30 illustrations spanning common themes (teams, devices, data, growth, communication, security, travel) covers most requests well. - After adding SVGs, (re)build the index: `python3 scripts/build_library_index.py`. This writes `index.md` (human-scannable) and `index.json` (machine-readable) into the...

Details

Author
codeswithroh
Repository
codeswithroh/tastemaker
Created
2 months ago
Last Updated
yesterday
Language
Python
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

excalidraw-diagram

Create Excalidraw diagrams as editable `.excalidraw` JSON that make a visual argument — architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, loop/flywheel, layers, nested, tree, org chart, venn, pyramid, process, medallion, data flow, IT current-state, evidence/protocol explainers, before/after comparisons, and charts — with themed brand skins, a taste gate, progressive type refs, and a mandatory render-inspect loop. Prefer this over static HTML/SVG or Mermaid-slop when the diagram must open in Excalidraw/Obsidian/VS Code, prove claims with evidence artifacts, or iterate until it looks right. Triggers on "make a diagram", "draw the architecture", "visualize this", "excalidraw", "flowchart", "system design diagram", "sketch this out", "whiteboard it", or brand-matched technical diagrams.

4 Updated yesterday
isatimur
AI & Automation Listed

diagram-design

Create polished, accessible, self-contained HTML/SVG diagrams for architecture, workflows, data flows, sequences, state machines, ER models, timelines, swimlanes, charts, security views, and other editorial visual types. Redraw Mermaid and draw.io sources into a fresh layout, apply optional brand tokens, and verify geometry, accessibility, motion, and single-file safety. Use when the output should be an editable HTML/SVG artifact rather than an ASCII sketch, generated raster image, or editable whiteboard canvas.

7 Updated today
vanducng
Data & Documents Listed

excalidraw-diagram

Use this skill when the user wants to create visual diagrams that argue a point, explain an architecture, or teach a concept. Trigger on: "excalidraw", "visual diagram", "draw an architecture", "whiteboard diagram", "visualize this system", "create a diagram showing", "concept diagram", or any request for editable hand-drawn-style diagrams. Also trigger when the user wants diagrams with code snippets, JSON examples, or evidence artifacts embedded — this skill excels at educational technical diagrams. Generates .excalidraw JSON files with Playwright-based render-and-validate loop.

2 Updated 1 months ago
petermcalister