Claude Design System Prompt vs Swiss Design

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 Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

Claude Design System Prompt4/5
After: Tally landing page, made with Claude Design System Prompt
Swiss Design4/5
After: Tally landing page, made with Swiss Design

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.

Swiss Design

4/5

Swiss Design gives Tally a large light-weight IBM Plex Sans headline with 'place.' in red #C8102E, a thin black rule across the top and a flat budget table instead of a phone. The dashboard keeps the system: numbered section headings, black rules, grey bars with October in black, and red only for the $640 left to budget, Dining out and the bill due soon. Both pages are consistent, readable and work on a phone. The thin light type and pale grey labels are faint in places. Pick it for finance and tool products that want a calm, typographic look.

Side by side

FieldClaude Design System PromptSwiss Design
Fonts
  • Bricolage Grotesque
  • Geist
  • Geist Mono
  • IBM Plex Sans
  • IBM Plex Mono
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)
  • #fafaf9 warm white
  • #0c0a09 black
  • #c8102e swiss red
  • #e7e5e4 stone grey
  • #f5f5f4 light stone
Pick it for
  • B2B and prosumer SaaS
  • fintech dashboards
  • developer-adjacent tools
  • directories and content tools
  • finance products
  • productivity tools
  • typographic brands
  • data dashboards
Skip it for
  • warm lifestyle brands
  • kids or playful apps
  • luxury
  • playful consumer brands
  • dark interfaces
  • illustration-heavy sites
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
  • thin light type and pale grey labels are faint in places
  • household avatars are clipped in the switcher

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 Swiss Design

1 Run in your terminal

npx degit zeke/swiss-design-skill/swiss-design#main .claude/skills/swiss-design

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.