New to Claude Skills? Learn how to install them →

hkuds on GitHub

Image & Graphic Design Matrix

Free

Comprehensive tools for graphic design and image editing.

Get this skill

Free · Opens the source repo

What Image & Graphic Design Matrix does

The Image & Graphic Design Matrix skill provides a robust suite of tools tailored for image and graphic design tasks. It integrates various capabilities including AI image generation, raster and vector editing, UI mockups, diagram creation, and photo upscaling. This skill is particularly useful for designers and developers who require a flexible and powerful environment to create and manipulate visual content efficiently.

With support for popular applications such as GIMP, Krita, and Inkscape, users can perform raster and vector editing directly through the command line. The skill also includes access to multiple AI generation options, allowing for high-quality image creation using various APIs. Users can choose their preferred provider based on their specific needs, whether they require offline capabilities or are willing to use metered APIs for advanced features.

Additionally, the skill facilitates the creation of UI mockups and diagrams using tools like draw.io and Mermaid, making it a comprehensive solution for visual design workflows. The matrix structure allows users to quickly assess and select the best tools for their projects, ensuring they have the right capabilities at their fingertips.

This skill is ideal for graphic designers, UI/UX professionals, and developers who need to produce high-quality visual content while maintaining flexibility in their tool choices. Whether working on a detailed graphic project or a simple mockup, the Image & Graphic Design Matrix skill offers a well-rounded set of features to enhance productivity and creativity.

When to use it

Use this skill when you need a comprehensive set of tools for image and graphic design, especially if you prefer working in a command-line environment.

When not to use it

This skill may not be suitable for users who require a graphical user interface or those who primarily work with Figma, as it does not fully integrate with that platform.

What you can build with it

Creating High-Quality UI Mockups

Use this skill to generate UI mockups quickly by leveraging tools like draw.io and Figma integration.

Editing Images for Web Use

Utilize raster editing capabilities with GIMP or Krita to prepare images for web applications.

Generating AI Images for Projects

Employ AI generation features to create unique images for marketing materials or design projects.

How to install Image & Graphic Design Matrix

View source

1. Install with the skills CLI

npx skills add hkuds/cli-anything/image-design --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by hkuds

Image & Graphic Design Matrix (S5 — v2 capability-based)

Scenario S5. Deepest creation coverage after S2 — raster (GIMP + Krita), vector (Inkscape), AI (ComfyUI + Jimeng + 7 APIs), diagram (drawio + mermaid). Figma is the headline gap (also affects S7).

Schema: docs/cli-matrix/matrix_registry.schema.md. Matrix plan: docs/cli-matrix/cli-matrix-plan.md.

Install

cli-hub matrix install image-design
cli-hub matrix info    image-design
cli-hub matrix preflight image-design --json

Provider selection constraints

  1. Use preflight as an availability report, not as a provider selector.
  2. Treat provider order as documentation order only.
  3. Choose from user requirements, output quality bar, offline needs, credential state, install cost, and provider notes.
  4. Escalate to paid or metered APIs only when credentials are already present or the user explicitly consents. AI image is paid-API-diverse, so ask which provider the user wants when several credentialed choices are available.

Offline context? GIMP, Krita, Inkscape, and local diffusers cover almost everything offline.


Preflight

Run cli-hub matrix preflight image-design --json first. Use the manual block below for extra probes or older cli-hub versions.

cli-hub list --json
python - <<'PY'
import importlib.util
for m in ("PIL","cv2","skimage","rembg","svgwrite","cairosvg","svgpathtools","vpype",
          "diffusers","replicate","rawpy"):
    print(m, importlib.util.find_spec(m) is not None)
PY
for b in inkscape gimp krita drawio magick convert exiftool upscayl darktable-cli \
         rawtherapee-cli graphviz dot mermaid plantuml hugo mkdocs; do
  command -v "$b" >/dev/null && echo "$b: yes" || echo "$b: no"
done
for e in OPENAI_API_KEY STABILITY_API_KEY IDEOGRAM_API_KEY RECRAFT_API_KEY \
         GOOGLE_API_KEY MIDJOURNEY_TOKEN FIGMA_TOKEN CANVA_API_KEY PENPOT_TOKEN \
         REPLICATE_API_TOKEN TOPAZ_API_KEY REMOVE_BG_API_KEY FIREFLY_TOKEN; do
  [ -n "${!e}" ] && echo "$e: set" || echo "$e: unset"
done

Suggest-to-user template

To enable <capability> via <provider>, please set <ENV_VAR>.
  Cost: <cost notes>
  Quality: <quality tier>
Reply 'skip' to fall back to <next provider>.

Examples:

  • To enable sota AI image generation via OpenAI GPT-Image-1, please set OPENAI_API_KEY. Cost: metered per-image. Quality: sota for photoreal + text rendering. Reply 'skip' to fall back to local comfyui (FLUX/SDXL).
  • To round-trip UI mockups with Figma, please set FIGMA_TOKEN. Cost: free tier works for most users. Quality: sota (design system aware). Reply 'skip' to fall back to sketch or drawio wireframes.

Capabilities

visual.generate — AI image generation

ProviderKindRequiresCostQualityOffline
cli-anything-comfyuiharness-cliComfyUI + weightsfreehighyes
jimengpublic-clidreamina binmeteredhighno
diffusers (SD/SDXL/FLUX)pythonpkg + weights + GPUfreegood-highyes
replicatepythonREPLICATE_API_TOKENmeteredhighno
OpenAI GPT-Image-1apiOPENAI_API_KEYmeteredsotano
IdeogramapiIDEOGRAM_API_KEYmeteredsotano
Stability AIapiSTABILITY_API_KEYmeteredhighno
RecraftapiRECRAFT_API_KEYpaidsotano
Google Imagen / Nano BananaapiGOOGLE_API_KEYmeteredhighno
Midjourney (Discord bridge)apiMIDJOURNEY_TOKENpaidsotano
Adobe FireflyapiFIREFLY_TOKENpaidhighno

visual.edit.raster — raster editing

ProviderKindRequiresCostQualityOffline
cli-anything-gimpharness-cliGIMP installedfreesotayes
cli-anything-kritaharness-cliKrita installedfreesotayes
Pillowpythonpkgfreegoodyes
opencv-pythonpythonpkgfreehighyes
scikit-imagepythonpkgfreehighyes
rembg (background removal)pythonpkgfreehighyes
remove.bgapiREMOVE_BG_API_KEYmeteredsotano
Adobe FireflyapiFIREFLY_TOKENpaidsotano
Cutout.proapitokenmeteredhighno

visual.edit.vector — vector editing

ProviderKindRequiresCostQualityOffline
cli-anything-inkscapeharness-cliInkscape installedfreesotayes
svgwritepythonpkgfreegoodyes
cairosvgpythonpkgfreegoodyes
svgpathtoolspythonpkgfreehighyes
vpype (vector post-processing)pythonpkgfreehighyes

visual.mockup — UI / mockup / wireframe

ProviderKindRequiresCostQualityOffline
cli-anything-sketchharness-cliSketch installed (macOS)paid appsotayes
cli-anything-drawioharness-clidrawio installedfreehighyes
drawio-desktopnativebinaryfreehighyes
penpotnativebinary / self-hostfreehighyes
Figma APIapiFIGMA_TOKENfree tiersotano
Canva APIapiCANVA_API_KEYpaidhighno
Penpot APIapiPENPOT_TOKENfreehighno

Known gap — Figma is the cross-scenario gap (S5 and S7).

visual.diagram — diagrams / flowcharts

ProviderKindRequiresCostQualityOffline
cli-anything-drawioharness-clidrawiofreesotayes
cli-anything-mermaidharness-climermaid-clifreehighyes
graphviz (dot)nativebinaryfreehighyes
plantumlnativebinary + javafreehighyes

visual.upscale — super-resolution

ProviderKindRequiresCostQualityOffline
Real-ESRGANpythonpkg + weightsfreehighyes
GFPGAN (faces)pythonpkg + weightsfreehighyes
upscaylnativebinaryfreehighyes
TopazapiTOPAZ_API_KEYpaidsotano
Replicate upscalerspythonREPLICATE_API_TOKENmeteredhighno

photo.library — DAM / photo organization

ProviderKindRequiresCostQualityOffline
exiftool + Pillownative+pythonbinary+pkgfreehighyes
digikamnativebinaryfreehighyes
photoprismnativebinary / self-hostfreehighyes
Google Photos APIapiOAuthfree tierhighno

photo.develop — RAW processing

ProviderKindRequiresCostQualityOffline
rawpypythonpkgfreehighyes
darktable-clinativebinaryfreesotayes
rawtherapee-clinativebinaryfreesotayes
Adobe Lightroom APIapiAdobe credspaidsotano

publish.cms — publish images / articles to a CMS

ProviderKindRequiresCostQualityOffline
contentfulpublic-clibin + tokenmeteredhighno
sanitypublic-clibin + tokenmeteredhighno
hugo / mkdocsnative/pythonbinary/pkgfreehighyes
WordPress RESTapiapp passwordfreehighno

Recipes

  • social-card — generate + compose a social sharing image. Uses: visual.generate, visual.edit.raster, publish.cms.

  • logo-set — design a logo + size variants. Uses: visual.edit.vector, visual.edit.raster (rasterize), batch export.

  • ui-wireframe — mockup a UI flow. Uses: visual.mockup, optional visual.edit.vector polish.

  • photo-batch — RAW ingest → develop → edit → library → publish. Uses: photo.develop, visual.edit.raster, photo.library, publish.cms.

  • icon-pack — systematic icon production. Uses: visual.edit.vector, batch rasterize via cairosvg.

  • thumbnail-set — thumbnails for a video/article series. Uses: visual.generate (hero imagery), visual.edit.raster (layout, type), batch variant export.

  • ai-concept-art — generate → upscale → touch up. Uses: visual.generate, visual.upscale, visual.edit.raster.


Known gaps

  • Figma — cross-scenario gap (UI/UX loop for S5 and S7). API escalation works but we lack a native harness.
  • photo.library / photo.develop — strong native CLIs, no harness.
  • Midjourney — Discord bridge only; no clean API.

Agent guidance

  • Match generation provider to intent. GPT-Image-1 for text-in-image and photoreal; Ideogram for poster/typography; FLUX for artistic; Midjourney for stylized beauty shots; Stability for control+speed.
  • Vector-first for design systems — logos, icons, illustrations start in visual.edit.vector, rasterize last.
  • Preserve color profiles. exiftool + Pillow handles ICC; when moving between rawpy and Pillow, convert to sRGB at the boundary.
  • AI + edit chain. Agents should plan: generate → background removal (rembg) → composite (visual.edit.raster) → export. Skipping cleanup is the most common visible defect.
  • Workspace discipline. Keep generation seeds + prompts in a manifest alongside output PNGs so variations are reproducible.

Frequently asked questions about Image & Graphic Design Matrix

Similar skills