# Yoyopixel > Pixel art without GPU. Any text-only LLM can draw. Size + prompt → self-contained HTML. Claude Code skill / MCP compatible. - **Type:** MCP server - **Install:** `agentstack add mcp-sbname-yoyopixel` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [SbName](https://agentstack.voostack.com/s/sbname) - **Installs:** 0 - **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [SbName](https://github.com/SbName) - **Source:** https://github.com/SbName/yoyopixel - **Website:** https://sbname.github.io/yoyopixel/ ## Install ```sh agentstack add mcp-sbname-yoyopixel ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About Pixel art without GPU. Any LLM can draw. No GPU. No image model. No multimodal. No dependencies. Any text-only LLM + size + prompt → pixel art HTML --- ## What is YoYoPixel? **Text-only LLMs can generate images — no GPU, no DALL-E, no multimodal model needed.** YoYoPixel is a skill/prompt framework that teaches any LLM (Claude, GPT, Gemini, Llama, Qwen...) to generate pixel art as pure HTML/CSS/JS code. The LLM writes structured text data, the browser renders it as pixel art. ``` Traditional: prompt → GPU → image model → PNG YoYoPixel: prompt → any text LLM → HTML code → pixel art in browser ``` ``` /pixelart 32x32, a wizard with a glowing staff ``` The AI auto-decides everything: palette, detail level, rendering method, shading, animations, atmosphere. No configuration needed. ### Capabilities at a glance | Size Range | What it can do | Rendering | |-----------|----------------|-----------| | **8×8** | Icons, emojis, game items (sword, potion, key, chest) | CSS box-shadow | | **12–16px** | Character sprites, avatars, simple creatures | CSS Grid + JS | | **24–32px** | Detailed characters with outfits, weapons, accessories | CSS Grid + JS | | **48px+** | Complex illustrations with sub-pixel shading | CSS Grid + JS | | **48–96px** | Game assets, buildings, animals, tilesets | Procedural texture engine | | **96–256px** | Full procedural landscapes, cityscapes, world landmarks | Canvas + FBM noise | --- ## Install as Claude Code Skill ### Option 1: Project-level (recommended) ```bash # Clone git clone https://github.com/SbName/yoyopixel.git # Copy skill into your project cp -r yoyopixel/.claude/skills/pixelart YOUR_PROJECT/.claude/skills/ ``` ### Option 2: Global (all projects) ```bash cp -r yoyopixel/.claude/skills/pixelart ~/.claude/skills/ ``` ### Use it ``` /pixelart 16x16, a fire mage with staff /pixelart 32x32, cyberpunk cat with neon goggles /pixelart 192x128, mountain sunset with lake reflection /pixelart 24x24, ancient Chinese swordsman in moonlight /pixelart 80x85, stone cottage with red tile roof /pixelart 50x40, a fox sitting in grass # Tileset mode — generates 25-40 related assets on one sheet /pixelart tileset, medieval village /pixelart tileset, dungeon crawler ``` Two input modes: **size + prompt** for single assets, **tileset + theme** for full sprite sheets. Claude auto-decides everything based on size and prompt: - **Size** determines detail level, max colors, and shading complexity - **Prompt content** determines rendering method (CSS Grid, Canvas landscape, or procedural texture engine) - **Keywords** trigger auto-animations (weapon → gleam, night → stars, fire → embers) - **Subject type** selects texture algorithms (building → stone/tiles, animal → fur/scales/feathers) --- ## Showcases > **[Live Demo](https://sbname.github.io/yoyopixel/showcase.html)** — try all demos online, no download needed. | Page | Link | |------|------| | All-in-one Showcase | [sbname.github.io/yoyopixel/showcase.html](https://sbname.github.io/yoyopixel/showcase.html) | | Landscape Generator | [sbname.github.io/yoyopixel/landscape.html](https://sbname.github.io/yoyopixel/landscape.html) | | World Wonders | [sbname.github.io/yoyopixel/wonders.html](https://sbname.github.io/yoyopixel/wonders.html) | | Stone Cottage | [sbname.github.io/yoyopixel/prototype-cottage.html](https://sbname.github.io/yoyopixel/prototype-cottage.html) | | Style Gallery | [sbname.github.io/yoyopixel/prototype-gallery.html](https://sbname.github.io/yoyopixel/prototype-gallery.html) | | Animals | [sbname.github.io/yoyopixel/prototype-animals.html](https://sbname.github.io/yoyopixel/prototype-animals.html) | ### Characters & Scenes Swordsman16×24 · Moonlit scene Cyberpunk Girl32×32 · Neon rain Fire Dragon24×24 · Ember particles Pixel Icons8×8 · 12 game icons ### Procedural Generators Landscape GeneratorFBM noise · 5 biomes · up to 256×144 World Wonders8 landmarks · Pyramids, Great Wall, Taj Mahal... ### Procedural Texture Engine (NEW) Game-ready assets using region-based procedural textures — LLM declares regions + materials, engine auto-fills textures: Stone Cottage80×85 · Voronoi stone, offset-grid roof tiles, stucco, wood grain Style GalleryWizard tower, sakura tree, treasure chest, village well Organic TexturesFox (fur strands) · Koi (fish scales) · Owl (feather barbs) · Snail (spiral shell) 19 procedural texture algorithms + sprite template system with per-material hue-shift shading and adaptive outlines **Full tileset demo:** Village Tileset · ~35 assets · cottage, fences, crates, bushes, cobblestone paths, birdhouses, flowers, stumps, rocks ### Multi-Size Gallery 8×8 icons → 12×12 sprites → 16×16 avatars → 24×24 characters → 32×32 detailed --- ## How It Works ### Small art (≤48px): String-array pixel data Each character in a string = one pixel. Human-readable, AI-writable. ```javascript const wizard = { width: 24, height: 24, palette: { '.': 'transparent', 'H': '#2a1a4e', // hat 'S': '#f5d0a0', // skin 'R': '#6a3cbf', // robe }, pixels: [ '........HHHH............', '......HHHHHHHH..........', '....HHHHHHHHHHH.........', '...HHHSSSSSSSHHH........', ] }; ``` Rendered via **CSS Grid** (per-pixel animation) or **CSS box-shadow** (zero JS, pure CSS). ### Medium art (48–96px): Procedural texture engine For game assets, buildings, creatures — the LLM declares **regions + materials**, the engine fills textures automatically: ``` Region-based: { shape: "rect", bounds: [12,47,68,74], material: "stone_wall" } 12 texture types: stone, tiles, wood, bark, foliage, fur, scales, feathers, spiral... Auto post-processing: directional shading → edge outline → local shadows → glow ``` No per-pixel specification needed for surfaces. One engine generates cottages, towers, trees, foxes, owls, treasure chests — all with consistent style. ### Large art (≥64px): Canvas-based procedural generation ``` FBM Noise → Terrain shape Ridge Noise → Mountain ridgelines Bayer 4×4 Dithering → Palette-limited gradients Layered Rendering → Sky → Stars → Clouds → Mountains → Trees → Water → Mist ``` All algorithms run in-browser. No server, no API calls. --- ## For AI Platforms ### Claude Code Install the skill, then: ``` /pixelart 32x32, a knight in silver armor ``` ### MCP / OpenClaw ```json { "size": "32x32", "prompt": "a knight in silver armor" } ``` ### What the AI auto-decides | Input | AI figures out | |-------|---------------| | Size `8x8` | minimal detail, 3-5 colors, CSS box-shadow, no animation | | Size `32x32` | detailed, 12-20 colors, CSS Grid, breathe + gleam + fade-in | | Prompt mentions "night" | adds stars, moon, mist atmosphere | | Prompt mentions "fire" | adds ember particles, glow effects | | Prompt mentions "sword" | adds gleam animation on weapon pixels | | Size `192x128` | canvas mode, FBM noise, procedural generation | | Prompt `tileset, village` | tileset mode, ~35 assets, procedural textures, shared palette, single sheet | Full decision rules → [`pixelart-skill.md`](pixelart-skill.md) --- ## Tech Stack | Component | Technology | |-----------|-----------| | Rendering (small) | CSS Grid / CSS box-shadow | | Rendering (medium) | Canvas + Procedural texture engine | | Rendering (large) | Canvas + FBM noise + PixelBuffer | | Terrain generation | FBM (Fractal Brownian Motion) noise | | Mountain ridges | Ridge noise (abs-inverted FBM) | | Gradient dithering | Bayer 4×4 ordered dithering | | Surface textures | 19 types: stone, tiles, wood, bark, foliage, fur, scales, feathers, spiral, cloth, woven, metal, crystal, bone, rope, coral, stucco, planks, smooth | | Post-processing | Multi-pass: ambient occlusion → directional light → specular highlights → edge outline | | Composition | RGBA pixel buffer, alpha-aware blit with contact shadows, assembly pattern for complex assets | | Animation | CSS @keyframes + requestAnimationFrame | | Atmosphere | Pure CSS particles (rain, petals, embers, snow) | | Output | Self-contained HTML (zero external dependencies) | --- ## Project Structure ``` pixelai/ ├── .claude/skills/pixelart/ │ └── SKILL.md ← Claude Code skill definition │ ├── README.md ← You are here ├── pixelart-skill.md ← Full skill reference (AI decision rules) ├── GUIDE.md ← Technical implementation guide ├── LICENSE ← MIT │ ├── showcase.html ★ All-in-one demo page ├── landscape.html ★ Procedural landscape generator ├── wonders.html ★ World wonders (8 landmarks) ├── index.html ← Multi-size gallery ├── swordsman.html ← Moonlit swordsman scene ├── cyberpunk.html ← Neon cyberpunk scene ├── dragon.html ← Fire dragon scene ├── icons.html ← 8×8 icon collection │ ├── prototype-cottage.html ★ Procedural texture engine: stone cottage + tileset ├── prototype-gallery.html ★ Style gallery: tower, sakura tree, chest, well ├── prototype-animals.html ★ Organic textures: fox, koi, owl, snail ├── tileset-village.html ★ Full village tileset (~35 assets on one sheet) ├── tileset-tavern.html ★ Tavern interior tileset (~45 assets) ├── engine-v2.html ★ Engine v2: cloth, metal, crystal, bone, assembly └── engine-v3.html ★ Engine v3: sprite templates, hue-shift shading, adaptive outline ``` --- ## License [MIT](LICENSE) — use it however you want. ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [SbName](https://github.com/SbName) - **Source:** [SbName/yoyopixel](https://github.com/SbName/yoyopixel) - **License:** MIT - **Homepage:** https://sbname.github.io/yoyopixel/ Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-sbname-yoyopixel - Seller: https://agentstack.voostack.com/s/sbname - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.