Claude Design System Prompt vs 3D Metal Material

Standalone skill · Meng To

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

Same brief, opposite looks. Claude Design System Prompt is Minimalist and 3D Metal Material is Night Shift: see how far apart two good skills can take the same page.

Claude Design System Prompt4/5
After: Tally landing page, made with Claude Design System Prompt
3D Metal Material4/5
After: Tally landing page, made with 3D Metal Material (Meng To)

Scroll either page; the other follows.

Claude Design System Prompt

4/5

This system prompt moves Tally to a cool grey-and-ink look with Bricolage Grotesque, Geist and a lime marker, and the dashboard is clean and well organized. One contrast bug on the closing CTA keeps it from a higher score.

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

FieldClaude Design System Prompt3D Metal Material (Meng To)
Fonts
  • Bricolage Grotesque
  • Geist
  • Geist Mono
  • Instrument Serif (landing)
  • Manrope
  • JetBrains Mono (landing)
  • IBM Plex Mono (dashboard)
Colors
  • #F4F5F1 paper
  • #16181D ink
  • lime marker oklch(91% 0.19 122)
  • coral oklch(58% 0.17 30)
  • dashboard brand oklch(44% 0.09 168)
  • #0a0b0d graphite
  • #15181c panel
  • #e2bd6e brass
  • #c9ced2 steel
  • #e6a48d copper
  • #e7eaee text
  • #8fc7a4 sage
Pick it for
  • B2B and prosumer SaaS
  • fintech dashboards
  • developer-adjacent tools
  • directories and content tools
  • premium fintech and card products
  • dark product landing pages
  • hardware and luxury brands
  • hero visuals
Skip it for
  • warm lifestyle brands
  • kids or playful apps
  • luxury
  • light or playful brands
  • low-power devices
  • teams without WebGL experience
Observations
  • landing, desktop and mobile: in the closing CTA the highlighted word "counted." is dark ink on the dark band, so most of it disappears
  • took the longest after hallmark and taste (285 s landing, 263 s dashboard) and used a subagent
  • 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 Claude Design System Prompt

1 Paste a prompt into Claude Code, Codex, Cursor or Gemini

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

No install command in README: paste system-prompt.md as the system prompt and copy skills/ manually.

Taken from the project README. 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.