К основному содержанию
скилл CX Codex

threejs-image-generator — скилл для Claude Code: установка

Генерирует и редактирует 2D-ассеты для игр на Three.js через Gemini API. Подходит для концепт-артов, текстур, UI и исходников под 3D-генерацию.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-image-generator -a claude-code
Открыть на GitHub

Что делает threejs-image-generator

Скилл запускает скрипт generate_image.py через менеджер uv и обращается к Google Gemini image API. Он создаёт концепты, текстуры, фоновые панорамы, элементы интерфейса и декали для Three.js. Готовые изображения можно передавать дальше в threejs-3d-generator для создания полигональных моделей.

Генератор поддерживает три разрешения: 1K для иконок или набросков, 2K по умолчанию для рабочих ассетов и 4K для детальных фонов. Если передать путь к файлу через --input-image, скрипт изменит стиль или расцветку без перерисовки с нуля.

Для работы нужен ключ GEMINI_API_KEY или аргумент --api-key. Если ключ объявлен только в профиле оболочки, процесс может его не подхватить, поэтому статус проверяют командой probe. Скрипт служит вспомогательным инструментом сборки и никогда не вызывается из рантайм-кода игры.

Какие задачи решает

  • создать концепт-арт для последующей 3D-генерации
  • сгенерировать текстуру поверхности без теней и перспективы
  • отрисовать иконки и элементы интерфейса игры
  • изменить расцветку или детали существующего концепта

Примеры запросов агенту

  • Сгенерируй концепт космического корабля в разрешении 2K для передачи в 3D-генератор
  • Сделай ортографическую текстуру скальной породы без теней для Three.js сцены
  • Отредактируй assets/concepts/ship.png, добавь красную боевую раскраску

Как установить threejs-image-generator

1Через Skills CLI (Vercel)

npx skills add majidmanzarpour/threejs-game-skills --skill threejs-image-generator -a claude-code

2Вручную: положить файлы

~/.claude/skills/threejs-image-generator/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/threejs-image-generator/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о threejs-image-generator

Как установить threejs-image-generator в Claude Code?

Выполните команду npx skills add majidmanzarpour/threejs-game-skills --skill threejs-image-generator -a claude-code в терминале.

Что делает threejs-image-generator?

Скилл создаёт и редактирует 2D-графику для Three.js с помощью Google Gemini image API: готовит текстуры, интерфейсные значки, фоны и исходные картинки для 3D-моделирования.

Что нужно настроить перед первым запуском?

Потребуются утилита uv и ключ GEMINI_API_KEY. Доступность ключа можно проверить командой uv run <this-skill-dir>/scripts/generate_image.py probe.

Исходный текст

SKILL.md · MIT
---
name: threejs-image-generator
description: "Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos, icons, GUI art, title and menu art, and marketing stills. Also use for direct image editing when the user supplies an image path."
---

# Three.js Image Generator

The 2D layer for Three.js games: concepts, textures, decals, UI art, and the source images that feed `threejs-3d-generator` for image-to-3D.

Resolve `<this-skill-dir>` from the actual loaded skill file. Resolve sibling skills beside it first, then use the runner's discovered paths. Do not mix installed versions or assume a particular home directory.

## When to use

- Image-to-3D references: characters, creatures, buildings, ships, cars, weapons, props, pickups, terrain modules.
- Texture and material references: terrain, road, rock, sand, metal, sci-fi panels, trim sheets, decals, hazard labels, signs.
- Environment plates: skies, backdrops, city horizons, nebulas, menu backgrounds, parallax layers.
- UI art: logos, faction marks, icons, item cards, ability badges, cockpit decals, GUI panels, title art.
- Editing an existing image: style variants, cleanup, palette alignment, concept refinement.

For premium graphics work with generation in scope, generate the high-value 2D surfaces rather than defaulting to hand-coded CSS and flat colors. Respect explicitly procedural art and external-service restrictions. Choose assets from the game's design, not a fixed quota of logos, skies, or icons.

## API key

The script reads `--api-key` or `GEMINI_API_KEY`. Keys never go in skill files, game code, or reports.

```bash
uv run <this-skill-dir>/scripts/generate_image.py probe   # GEMINI_API_KEY=SET|MISSING
```

Keys defined only in a shell profile can be absent from the process env. If the plain probe unexpectedly prints MISSING, use `threejs-game-director/scripts/probe_asset_credentials.sh`, which sources the profile and probes all three providers.

## Commands

Run from the game project so output lands in it:

```bash
uv run <this-skill-dir>/scripts/generate_image.py \
  --prompt "your image description" --filename assets/concepts/output.png --resolution 2K

uv run <this-skill-dir>/scripts/generate_image.py \
  --input-image assets/concepts/ship.png \
  --prompt "battle-worn red racing livery with clearer material zones" \
  --filename assets/concepts/ship-red-livery.png --resolution 2K
```

Resolution: `1K` for quick concepts, icons, and draft sheets · `2K` (the default) for production references, image-to-3D, textures, backgrounds, UI panels · `4K` for hero splash art, high-detail texture references, and large sky plates.

## Prompt patterns

Image-to-3D reference:
> Create a clean 3D-generation reference image of [asset]. Centered single object, full object visible, plain light background, readable silhouette, clear material zones, game-ready [genre/style], no motion blur, no cropped parts, no text.

Riggable character or creature:
> Create a full-body [T-pose / A-pose / side-view creature] reference for 3D rigging: [details]. Symmetric stance, visible hands/feet/limbs, plain background, readable costume and anatomy layers, no weapon fused to hands.

Texture or material:
> Create a seamless game texture reference for [surface]. Orthographic top-down, PBR-friendly albedo, clear material variation, no perspective, no baked strong shadows, [style details].

Logo, icon, or UI art:
> Create a crisp game UI [logo/icon/badge/panel] for [faction/item/ability]. Transparent-friendly silhouette, high contrast at small size, [genre styling], no tiny unreadable text.

Sky or background:
> Create a wide game background plate of [environment]. Layered depth, readable horizon, [time/weather/style], suitable behind a real-time Three.js scene, no foreground subject.

## Integration

Save concepts and image-to-3D sources under `assets/concepts/`; textures, decals, icons, and GUI sources under `assets/textures/`, `assets/decals/`, or `assets/ui/`. Hand image-to-3D sources to `threejs-3d-generator` by path.

Convert PNGs to runtime formats deliberately: PNG where alpha matters (UI, icons, decals), JPG/WebP/KTX2 for larger opaque textures where the pipeline supports it. The API is a tooling step — never called from game code.

Inspect the image before spending on image-to-3D or dependent variants. Check how runtime images look in the game, not just that the file was written. Preserve useful existing images when the user changes requirements, and update the project note instead of regenerating everything.

## Recovery

For coordinated games use the director's `references/asset-recovery.md`. Missing credentials or exhausted credits permit an honest local alternative; a transient error does not. Distinguish invalid input and authentication from service failures. Do not blindly retry an uncertain paid generation: preserve existing files and reconcile the provider result first. This command has no Tripo-style task resume interface. Continue independent game work while only the dependent image work is blocked.

## Report

Prompt and purpose, output path, resolution, whether it was used directly, edited further, or handed to `threejs-3d-generator`, and any remaining work such as compression, UV assignment, alpha cleanup, or atlas packing.

© majidmanzarpour · MIT · majidmanzarpour/threejs-game-skills

Похожие скиллы

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
generate-image официальный github Скилл создаёт изображения по запросу через OpenAI или Google Gemini. Подойдёт для подготовки текстур, иконок, спрайтов и макетов прямо в проекте. 93установок threejs-textures CloudAI-X Скилл помогает настраивать загрузку изображений, цветовые пространства и типы текстур в Three.js r186. Пригодится при сборке материалов для WebGL или WebGPU. CX Codex +1 12 600установок threejs-loaders calesthio Скилл для работы с Three.js: загружает GLTF-модели, текстуры, HDR-среды и управляет прогрессом загрузки через LoadingManager. Пригодится, если в проекте нужно добавить 3D-сцены или работать с моделями из Blender. CX Codex +1 1 000установок substance-3d-texturing freshtechbro Скилл для работы с Substance 3D Painter: помогает писать PBR-материалы, выгружать текстуры под Three.js, Babylon.js, Unity и Unreal и автоматизировать экспорт через Python API. CX Codex +1 2 400установок build-mobile-threejs-games MengTo Скилл для сборки и проверки Three.js-игры под мобильный веб: тач-управление, адаптивный HUD, бюджеты производительности. CX Codex +1 1 300установок optimize-threejs-games MengTo Скилл для профилирования и ускорения игр на Three.js и WebGL: находит, что тормозит — процессор или видеокарта, и чинит без потери геймплея. CX Codex +1 1 300установок

Из того же набора9

threejs-3d-generator Генерирует 3D-модели для игр на Three.js через Tripo API: из текста или картинки, с текстурами, ригом и анимациями, и складывает готовые GLB или FBX в проект. CX Codex +1 3 500установок threejs-game-ui-designer Скилл для проектирования игровых интерфейсов на Three.js: HUD, меню, экраны паузы и победы, адаптивная вёрстка для мобильных и десктопа. Помогает избежать наложений, обеспечить читаемость и согласованность со стилем игры. CX Codex +1 3 300установок threejs-gameplay-systems Разворачивает игровой цикл на Three.js, Vite и TypeScript с контролем физики, ввода и камеры. Пригодится при сборке прототипов и настройке гейм-фила. CX Codex +1 3 300установок threejs-aaa-graphics-builder Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок threejs-debug-profiler Ищет причины пустого экрана и сбоев рендера в браузерных играх на Three.js. Помогает замерить вызовы отрисовки и расход памяти без поломки геймплея. CX Codex +1 3 100установок threejs-qa-release Проверяет браузерные игры на Three.js перед релизом: игровой цикл, адаптивность, сборку и визуальные артефакты. Нужен после изменений в механиках или перед публикацией. CX Codex +1 3 000установок threejs-game-director Скилл-режиссёр для браузерных игр на Three.js: ведёт от играбельного цикла до графики, UI и проверки в браузере, раздавая фазы соседним скиллам. CX Codex +1 3 100установок threejs-audio-generator Скилл генерирует через ElevenLabs звуки, музыку и озвучку для игр на Three.js и встраивает их в проект через Web Audio. CX Codex +1 2 900установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой