Diorama (pixel-art Three.js dioramas)
/diorama
A one-file agent playbook plus a Three.js code kit for small pixel-art isometric dioramas: research-first builds, locked camera, 64-colour palette snap, ordered dither, inked contour and an animated toy-scale cast, with per-frame QA.
- GitHub 星数
- 40 (GitHub 星数，统计于 2026-10-25)
- 许可证
- MIT
- 最近提交
- 2026/10/24
- 作者
- sloemo01
信息来自作者的 README。 GameSkill 还没完整跑过。支持的 Agent 和安装步骤以作者文档为准。
安装
git clone https://github.com/sloemo01/diorama ~/skills/dioramaThen tell the agent to read SKILL.md and the templates before building. SKILL.md carries skill frontmatter, so a skills directory can load it by name.
命令照搬项目 README。在本机运行前，请先看一眼仓库。
包含内容
- SKILL.md (v3.8.0): the whole playbook in one file: workflow, look and animation bars, pipeline, recipes, QA and pitfalls
- Copy-in templates: camera, palette, post (dither and contour), stage, lighting, water, wake, people model, poses, combat, creature and more
- A deterministic scene: everything is a pure function of t, so any frame can be frozen and compared
- Verify harness with worked examples (creature battle, water, climb)
- Four showcase scenes: Pikachu vs Charizard, Dust Kings, Pool, Bank job
适合
- Animated pixel-art isometric scenes for game trailers, menus and landing pages
- Locking a consistent art style across many agent-built scenes
不适合
- A full playable game loop (these are staged, looping scenes)
关于这个 Skill
Diorama packages one art style as an agent skill. Every scene is a tiny stage on a slab: a locked three-quarter camera, a flat cut-out on white paper, a 64-colour palette with ordered dither and an inked contour, and toy-scale people with real joint animation. The subject changes, the look stays.
The agent researches the subject first, then builds from the copy-in templates. The author's demo on X (@Sloemo_dzn) drew over 300 likes in its first day.
It is new (created 24 October 2026, 14 commits) by Nehal Kanak.
Related
- Diorama by educlopez, a different skill set with the same name (SVG, Three.js and canvas pixel renderers).
- pixelwright for turning renders into true pixel-art sprites.
环境要求
- A browser with WebGL; three.js r170 (pulled in by the templates)
- Node.js for templates/build.mjs and the verify harness
相关主题
常见问题
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
pixelwright
Three agent skills and a numpy + Pillow CLI that turn AI renders into true pixel art (grid snap, palette lock, cleanup, tiles) and animate stills in code inside masks, with gates that prove every result.
SPA: Aseprite Automation
Aseprite automation for AI agents as a CLI, an agent skill and an MCP server: create, edit, verify and export pixel art, animations, tilesets and sprite sheets in batch mode, keeping editable .aseprite sources.
Diorama (educlopez): animated isometric illustrations
Three agent skills that turn a description of a place into one self-contained offline HTML file: Diorama SVG (six themes), Diorama Worlds (Three.js miniatures, four finishes) and Diorama Pixel (dithered pixel art, no dependencies).
相似 skills
Godogen
Autonomous game development with Claude Code and Codex. Publishes a ready game repo for Godot, Bevy, Babylon.js or three.js.
Hermes GameForge
A game-development plugin for Hermes Agent with 10 agent skills and 9 tools: SFX, music, NPC voices, pixel sprites, tilesets, low-poly 3D, web/Godot/Unity builds, a playtester that plays the build, and itch.io export. Runs offline by default.
rng-vfx
A game VFX skill for coding agents: six styles (anime, toon, stylized, dark fantasy, pixel, realism) for Unity VFX Graph, Unreal Niagara and three.js, with a live three.js stand to verify frame strips.
img2threejs
An Agent Skill that rebuilds the object or character in a reference image as a code-only, animation-ready Three.js model, checked pass by pass.