ideagram

Name: ideagram
Author: codeswithroh

41stars3forks

How to install ideagram?

codeswithroh/tastemaker/ideagram

$npx -y skills add codeswithroh/tastemaker --skill ideagram

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Ideagram
2
3	## The core idea
4
5	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.
6
7	Read `references/undraw-anatomy.md` once — it's the dissection of how these files are built and why this reuse approach works.
8
9	## Setup: a local unDraw library
10
11	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).
12
13	- Default library location: `~/.ideagram/undraw/`.
14	- 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.
15	- 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 library folder — read `index.md` first for matching instead of guessing from filenames cold.
16	- If no library exists yet, say so plainly and point the user at undraw.co (30 seconds to grab a few). Only fall back to the crude generated-primitive path (`references/style-contract.md`) if they genuinely can't, and be upfront that it's a large quality drop from real unDraw art.
17
18	## Workflow
19
20	### Step 1 — Distill the concept
21
22	Reduce the input to one sentence — "this is fundamentally about ___" — plus a few keywords. If the content genuinely holds two ideas, that's two illustrations, not one crowded brief.
23
24	### Step 2 — Match to the best illustration in the library
25
26	Read `~/.ideagram/undraw/index.md` (run `scripts/build_library_index.py` first if it doesn't exist or the library changed). Match the concept's keywords against each entry's keyword list — prefer a match on the scene, not just a loose word overlap: a dashboard/analytics concept wants an illustration with a screen or chart; a teamwork concept wants one with multiple figures. If several are close, pick the one whose scene most literally embodies the concept (see the worked example below). If nothing in the library is a real fit, say so and either ask the user to grab a closer one from undraw.co or fall back (Step 5) — don't force a bad match.
27
28	Worked example: "an AI creative director composing a whole design system from one prompt" → not literally "AI" or "design system" in any filename, but `mobile-site-builder` (a person actively laying out screen components) is the closest scene match — the visual metaphor matters more than exact keyword overlap.
29
30	### Step 3 — Recolor to the brand
31
32	```
33	python3 scripts/recolor_undraw.py <matched>.svg --accent "#<brand-hex>" --out design/<name>.svg
34	```
35
36	This swaps only unDraw's `#6c63ff` accent family for the brand color, leaving every skin tone, hair, clothing, and neutral exactly as drawn — verified on real multi-figure scenes. Check the matched illustration's `index.md` row for a flagged secondary accent (green/pink); if present and it should also change, add `--also "#8ed16f:#<hex>"`. If the user gives no brand color, unDraw's default purple is a fine, deliberate choice — don't invent one.
37
38	If you need to redo a color (the user asks for a different one), re-copy the original unDraw source into the output path first, then recolor — `recolor_undraw.py` only remaps `#6c63ff` outward, so recoloring an already-recolored file does nothing (the purple it looks for is gone). Never edit a previously-branded file's colors by hand to "fix" this.
39
40	### Step 4 — (Optional) Compose a custom scene from real components
41
42	Only when no single library illustration fits and a custom scene is worth the extra effort:
43
44	- List a source's components with `scripts/extract_component.py sourc

People who liked this also viewed

6 picks

Type

ideagram

41stars3forks

View on GitHub

How to install ideagram?

codeswithroh/tastemaker/ideagram

$npx -y skills add codeswithroh/tastemaker --skill ideagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Ideagram
2
3	## The core idea
4
5	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.
6
7	Read `references/undraw-anatomy.md` once — it's the dissection of how these files are built and why this reuse approach works.
8
9	## Setup: a local unDraw library
10
11	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).
12
13	- Default library location: `~/.ideagram/undraw/`.
14	- 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.
15	- 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 library folder — read `index.md` first for matching instead of guessing from filenames cold.
16	- If no library exists yet, say so plainly and point the user at undraw.co (30 seconds to grab a few). Only fall back to the crude generated-primitive path (`references/style-contract.md`) if they genuinely can't, and be upfront that it's a large quality drop from real unDraw art.
17
18	## Workflow
19
20	### Step 1 — Distill the concept
21
22	Reduce the input to one sentence — "this is fundamentally about ___" — plus a few keywords. If the content genuinely holds two ideas, that's two illustrations, not one crowded brief.
23
24	### Step 2 — Match to the best illustration in the library
25
26	Read `~/.ideagram/undraw/index.md` (run `scripts/build_library_index.py` first if it doesn't exist or the library changed). Match the concept's keywords against each entry's keyword list — prefer a match on the scene, not just a loose word overlap: a dashboard/analytics concept wants an illustration with a screen or chart; a teamwork concept wants one with multiple figures. If several are close, pick the one whose scene most literally embodies the concept (see the worked example below). If nothing in the library is a real fit, say so and either ask the user to grab a closer one from undraw.co or fall back (Step 5) — don't force a bad match.
27
28	Worked example: "an AI creative director composing a whole design system from one prompt" → not literally "AI" or "design system" in any filename, but `mobile-site-builder` (a person actively laying out screen components) is the closest scene match — the visual metaphor matters more than exact keyword overlap.
29
30	### Step 3 — Recolor to the brand
31
32	```
33	python3 scripts/recolor_undraw.py <matched>.svg --accent "#<brand-hex>" --out design/<name>.svg
34	```
35
36	This swaps only unDraw's `#6c63ff` accent family for the brand color, leaving every skin tone, hair, clothing, and neutral exactly as drawn — verified on real multi-figure scenes. Check the matched illustration's `index.md` row for a flagged secondary accent (green/pink); if present and it should also change, add `--also "#8ed16f:#<hex>"`. If the user gives no brand color, unDraw's default purple is a fine, deliberate choice — don't invent one.
37
38	If you need to redo a color (the user asks for a different one), re-copy the original unDraw source into the output path first, then recolor — `recolor_undraw.py` only remaps `#6c63ff` outward, so recoloring an already-recolored file does nothing (the purple it looks for is gone). Never edit a previously-branded file's colors by hand to "fix" this.
39
40	### Step 4 — (Optional) Compose a custom scene from real components
41
42	Only when no single library illustration fits and a custom scene is worth the extra effort:
43
44	- List a source's components with `scripts/extract_component.py sourc

People who liked this also viewed

6 picks

Type