Pac-Man vs 3D Metal Material

Awesome Design Skills · Meng To

Tied at 4/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Night Shift way: dark screens, glowing accents, work that looks best at 2am. Both are best for: visual direction.

Pac-Man4/5
After: Tally landing page, made with Pac-Man (Awesome Design Skills)
3D Metal Material4/5
After: Tally landing page, made with 3D Metal Material (Meng To)

Scroll either page; the other follows.

Pac-Man (Awesome Design Skills)

4/5

Pac-Man turns Tally into an arcade cabinet: black screens, blue dotted maze borders, Press Start 2P headings and power-pellet yellow buttons. The hero is an arcade screen with envelope budgets as pellet bars, and on the dashboard a little Pac-Man chomps along each envelope while the over-budget one gets ghost styling. The theme is committed and still readable. Pick it for playful or gaming-adjacent brands.

3D Metal Material (Meng To)

4/5

3D Metal Material gives Tally a dark studio look: Instrument Serif headlines with brass accents and a slowly tilting brushed-steel card in the hero, drawn live with WebGL. The dashboard puts the $640 on a machined steel plate and uses steel, brass and copper finishes on the bars and buttons. It feels premium and is consistent across both pages. Pick it when you want one rich 3D centerpiece on a dark product page.

Side by side

FieldPac-Man (Awesome Design Skills)3D Metal Material (Meng To)
Fonts
  • Press Start 2P
  • Space Mono
  • Instrument Serif (landing)
  • Manrope
  • JetBrains Mono (landing)
  • IBM Plex Mono (dashboard)
Colors
  • #000000 black
  • #2a3fe5 maze blue
  • #ffd23f pellet yellow
  • #f4b9b0 ghost pink
  • #ff4d4d ghost red
  • #5eead4 cyan (dashboard)
  • #0a0b0d graphite
  • #15181c panel
  • #e2bd6e brass
  • #c9ced2 steel
  • #e6a48d copper
  • #e7eaee text
  • #8fc7a4 sage
Pick it for
  • gaming and hobby products
  • playful consumer apps
  • hackathon and side projects
  • event or campaign pages
  • premium fintech and card products
  • dark product landing pages
  • hardware and luxury brands
  • hero visuals
Skip it for
  • serious finance or B2B products
  • accessibility-first products
  • long reading pages
  • light or playful brands
  • low-power devices
  • teams without WebGL experience
Observations
  • pixel headings get hard to read at small sizes
  • monospace body text makes the landing feel dense in places
  • the WebGL card and plate add weight to the page and need a fallback
  • dashboard: the brass on graphite is subtle, so some labels are low contrast

How the brief works

Install Pac-Man (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/pacman#main .claude/skills/pacman

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install 3D Metal Material (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/3d/3d-metal-material#main .claude/skills/3d-metal-material

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.