An open-source skill that lets any coding agent design and generate animated mascots — and export them as high-quality PNG, GIF, and MP4.
Recreate the default Claude Code mascot Clawd, or invent a brand-new mascot for your own product, brand, or platform. Install it in Claude Code, Codex, Cursor, or any agent — then just ask.
 Clawd default · limbed robot |
 Xo brand mascot · one-eyed orb |
 Dash object · rocket w/ thrust |
 Acme recolor · cyan brand |
☝️ The logo and all four mascots were generated by this skill — the cyan Acme is the example prompt below, rendered.
…even letters. Drop in a glyph and it becomes a monogram mascot:
MIT licensed · no paid services · pure HTML + Node + ffmpeg
This repo is a skill. Point your agent at it once, then describe the mascot you want and it does the rest.
Tell Claude Code:
"Install the mascot-maker skill from https://github.com/ahkamboh/mascot-maker into my skills folder."
…or do it by hand:
git clone https://github.com/ahkamboh/mascot-maker ~/.claude/skills/mascot-maker
cd ~/.claude/skills/mascot-maker && ./install.sh claude --depsgit clone https://github.com/ahkamboh/mascot-maker /tmp/mascot-maker
/tmp/mascot-maker/install.sh cursor --deps # vendors to ./tools + writes a .cursor rulegit clone https://github.com/ahkamboh/mascot-maker /tmp/mascot-maker
/tmp/mascot-maker/install.sh codex --deps # vendors to ./tools + adds an AGENTS.md pointergit clone https://github.com/ahkamboh/mascot-maker tools/mascot-maker…then add one line to that agent's instruction file pointing at
tools/mascot-maker/SKILL.md. See install/other-agents.md.
One-time render dependency:
npm install && npx playwright install chromium(the--depsflag does this for you), plus ffmpeg on yourPATH.
Then just ask:
"Design a mascot for my brand Acme — colors
#22D3EEon#0F172A, it's a developer tool. Give me png, gif, and mp4."
The agent reads SKILL.md, runs the workflow, and drops the assets in assets/.
git clone https://github.com/ahkamboh/mascot-maker && cd mascot-maker
npm install && npx playwright install chromium # ffmpeg must be on PATH
# render the bundled mascots in all three formats
node scripts/render.mjs --input examples/clawd.html --name clawd --selector .stage --duration 5000
node scripts/render.mjs --input examples/dash.html --name dash --selector .stage --duration 4200
# make your own
cp templates/stage.html my-mascot.html # edit poses + brand colors
node scripts/render.mjs --input my-mascot.html --name my-mascot --selector .stage --duration 4680| Format | Best for |
|---|---|
| PNG | README badges, favicons, app icons, social cards |
| GIF | GitHub READMEs, tweets, Slack, Discord |
| MP4 | landing pages, ads, slide decks, anywhere |
The medium is Unicode Block Elements (█ ▀ ▄ ▌ ▐ ▛ ▜ ▙ ▟ …) — the same
characters Clawd is made of — rendered on a branded stage, captured frame-by-frame
by headless Chromium, and encoded with ffmpeg.
concept ─▶ identity ─▶ silhouette ─▶ glyph grid ─▶ states ─▶ loop ─▶ render
PNG · GIF · MP4
Four mascots, one skill — the very .mp4 output this tool produces, playing inline:
If the player doesn't load on your client, open assets/demo.mp4 — the previews at the top are GIFs.
Spell anything. The sheet below is a full 5×7 Unicode block font — A–Z, a–z,
0–9 and punctuation — so you can build a letter, a word, a name, or a monogram.
Drop any glyph into a stage (like examples/aitch.html)
and give it eyes + a loop.
SKILL.md the workflow your agent follows
AGENTS.md auto-discovery pointer for AGENTS.md agents
install.sh one-command installer (claude | cursor | codex | here)
scripts/render.mjs HTML → PNG + GIF + MP4 engine (Playwright + ffmpeg)
templates/stage.html copy-me starter mascot
examples/clawd.html default Claude mascot (limbed robot)
examples/xo.html custom brand mascot (one-eyed orb)
examples/dash.html object mascot (rocket; animates via exhaust)
examples/mascot-maker.html the project's own mascot (maker-bot; antenna spark)
examples/acme.html same maker-bot, recolored for a brand (cyan; winks)
examples/aitch.html a letterform mascot — the letter "H" (blink · sway · hop)
references/ design process · block technique · animation ·
rendering · brand-mascot playbook
install/ per-agent install guides
branding/ social-preview, square-logo & block-font sheet source (→ assets/)
assets/ rendered samples + logo, favicon, social card, demo reel & block-font sheet
- Stay inside Block Elements (
U+2580–U+259F). They tile seamlessly. Don't mix in geometric shapes◢◣◤◥— they cause seams. - Test-render at your real font size. 48–88px on a 600px stage is the sweet spot; ~110px breaks half-blocks.
- One clear silhouette, internal motion. Keep the outline stable; animate the eye / arms / mouth / thrust.
- For a brand mascot, don't clone Clawd. Steal the brand's colors and tone; pick your own body (orb, drop, arrow, flame, fox, comet, rocket).
--duration= sum of your sequence ms → seamless loops. (Headless capture runs slower than realtime, so for a single calm loop you can author the on-screen timing longer than--duration— see the note inexamples/mascot-maker.html.)
Full details in references/.
- Node 18+
- Playwright + Chromium (
npx playwright install chromium) - ffmpeg on your
PATH
PRs welcome — new silhouette directions, more examples, extra export formats,
install guides for more agents. It's all plain files; fork it and make it yours.
See CONTRIBUTORS.md.
Created and maintained by Ali Hamza Kamboh (@ahkamboh) — Co-Founder & CTO @Xaibridge · alihamzakamboh.com.
MIT. Clawd is Anthropic's mascot; the example Clawd build here is a community recreation for teaching the technique.