design-game

Q: How do I install design-game?

Run npx skills add https://github.com/playableintelligence/game-creator --skill design-game in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-game/ (personal) or .claude/skills/design-game/ (project).

by playableintelligenceMedia & Creative

Audit and improve the visual design, polish, and player experience of an existing game. Use when the user says "make my game look better", "improve the design", "add polish", "add juice", "add particles", "fix the UI", or "make it more visually appealing". Do NOT use for gameplay logic changes (use add-feature instead).

Installs: 1.4K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/playableintelligence/game-creator --skill design-game

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads design-game automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Performance Notes

Take your time to do this thoroughly
Quality is more important than speed
Do not skip validation steps

Design Game

Run a UI/UX design pass on an existing game to improve visuals, atmosphere, and game feel. No design experience needed — this command analyzes your game and applies proven visual patterns.

Instructions

Analyze the game at $ARGUMENTS (or the current directory if no path given).

First, load the game-designer skill to get the full design vocabulary and patterns.

Step 1: Audit

Read package.json to identify the engine
Read src/core/Constants.js for the current color palette and config
Read all scene files to understand current visuals
Read entity files to see how game objects are drawn
Read src/core/EventBus.js for existing events

Step 2: Design Report

Score each area 1-5 and present as a table:

Area	Score	Notes
Background & Atmosphere
Color Palette
Animations & Tweens
Particle Effects
Screen Transitions
Typography
Game Feel / Juice
Game Over
Expression Usage		If personality characters exist, score how reactively expressions change to game events. Score 1 if expressions never change.

Then list the top improvements ranked by visual impact, with a plain-English description of what each one does (e.g., "Add a sky gradient so the background looks like a real sky instead of a flat color").

Step 3: Implement

Ask the user which improvements they want, or implement all if they say so. Follow the game-designer skill patterns:

All new values in Constants.js
Use EventBus for triggering effects
Don't alter gameplay (physics, scoring, controls, spawn timing)
Prefer procedural graphics
New files in proper directories

Step 4: Verify

Run npm run build to confirm no errors
Summarize all changes made in plain English

Example Usage

Full design pass

/design-game examples/asteroid-dodge

Result: Audits visuals → scores Background 2/5, Particles 1/5, Typography 3/5 → adds sky gradient background, star parallax, explosion particles on asteroid destroy, screen shake on hit, smooth scene transitions. All values in Constants.js.

Troubleshooting

Visual changes cause performance drops

Cause: Too many particle emitters or gradient fills per frame. Fix: Limit active particles (pool and reuse). Use cached gradient textures instead of recreating per-frame.

Design changes break layout on different screen sizes

Cause: Hardcoded pixel positions instead of using PX scale factor. Fix: All positions and sizes should use Constants.js PX-relative values.

Next Step

Tell the user:

Your game looks much better now! Next, run /game-creator:add-audio to add chiptune background music and retro sound effects — all procedurally generated, no audio files needed.

Pipeline progress: ~~/viral-game~~ → ~~/design-game~~ → /add-audio → /qa-game → /review-game

(This is the /viral-game one-shot pipeline — not the /make-game multi-session, milestone-driven workflow.)

FAQ

What does the design-game skill do?

How do I install design-game?

Run npx skills add https://github.com/playableintelligence/game-creator --skill design-game in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-game/ (personal) or .claude/skills/design-game/ (project).

Which AI agents can use design-game?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is design-game safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains design-game?

It is published by playableintelligence in playableintelligence/game-creator. It has 1,437 recorded installs.