# guizang-material-illustration

Builds prompt plans and Guizang-style 3D illustrations from notes, articles, or chart screenshots. Useful when generating diagram assets for slides and social posts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1700 installs · ★ 1223
- Author: op7418
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/op7418/guizang-material-illustration/tree/HEAD/SKILL.md
- Updated: 2026-07-07
- HTML: https://affpapa.org/en/nevibecode/skills/guizang-material-illustration

## What it does

The skill translates article drafts and chart screenshots into conceptual 3D illustrations. It extracts key concepts from user text, determines an appropriate visual metaphor, and prepares prompt plans for image generation. When reading a chart image, it pulls purely data points and axis labels while discarding original colors or styling.

Each concept maps to a clear visual structure like feedback loops, pipelines, or layered stacks. Short descriptive labels are positioned directly on the illustration. Raster rendering triggers through the environment's built-in image tool or the `imagegen` skill. Every prompt and generated file path is logged inside a task folder next to `PROMPTS.md`.

This skill focuses solely on illustration assets. It does not assemble slide layouts. If you need complete social cards or slide decks, place the resulting illustrations into separate presentation templates. Generating raster images requires an active image-generation tool; otherwise, the skill produces prompt blueprints.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add op7418/guizang-material-illustration --skill guizang-material-illustration -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/guizang-material-illustration/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/guizang-material-illustration/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add op7418/guizang-material-illustration --skill guizang-material-illustration -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/guizang-material-illustration/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add op7418/guizang-material-illustration --skill guizang-material-illustration -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/guizang-material-illustration/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install op7418/guizang-material-illustration guizang-material-illustration
```

2. **Manually: put the files in place**
- File: `.github/skills/guizang-material-illustration/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add op7418/guizang-material-illustration --skill guizang-material-illustration -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/op7418/guizang-material-illustration
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/guizang-material-illustration/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add op7418/guizang-material-illustration --skill guizang-material-illustration -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/op7418/guizang-material-illustration/tree/HEAD/SKILL.md

## When to use it
- generate 3D concept illustrations from notes and article drafts
- restyle chart screenshots into a cohesive visual format without losing data
- design visual prompts for pipeline, loop, and stack diagrams
- produce standalone image assets for slide decks and social posts

## Example prompts
- Create a 3D diagram illustrating our data pipeline based on this architecture note
- Restyle the chart in chart.png using the Guizang material aesthetic while keeping all data values
- Draft visual prompts and illustrations for a step-by-step workflow tutorial

## Similar
- [illustration-style](https://affpapa.org/en/nevibecode/skills/illustration-style.md) — skill · 2500 installs
- [paper-illustration-image2](https://affpapa.org/en/nevibecode/skills/paper-illustration-image2.md) — skill · 439 installs
- [infographic-and-data-viz](https://affpapa.org/en/nevibecode/skills/infographic-and-data-viz.md) — skill · 610 installs
- [material-3](https://affpapa.org/en/nevibecode/skills/material-3.md) — skill · 3300 installs
- [material](https://affpapa.org/en/nevibecode/skills/material.md) — skill · 2400 installs
- [material-ui-theming](https://affpapa.org/en/nevibecode/skills/material-ui-theming.md) — skill · 607 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md