claude-design-system-prompt vs Huashu 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. Shared tasks: Visual direction.

Tally landing page made with claude-design-system-prompt

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.

Tally landing page made with Huashu Design

Huashu swaps Fraunces for Bricolage Grotesque and puts a lime highlighter on a deep forest green. It keeps envelopes as real kraft cards and carries the look into a tidy dashboard. A safe, distinct choice for consumer finance.

Side by side

Fieldclaude-design-system-promptHuashu Design
Fonts
  • Bricolage Grotesque
  • Geist
  • Geist Mono
  • Bricolage Grotesque
  • Hanken Grotesk
  • IBM Plex Mono
  • Geist and Geist 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)
  • #F3F4EE paper
  • #0F2A22 ink
  • #163D31 forest
  • #CDEB5A lime
  • #E7D3AE kraft
  • #E8684A coral
Good fit for
  • B2B and prosumer SaaS
  • fintech dashboards
  • developer-adjacent tools
  • directories and content tools
  • personal finance and budgeting
  • household money apps
  • consumer SaaS marketing
  • sustainability or food brands
Not great for
  • warm lifestyle brands
  • kids or playful apps
  • luxury
  • enterprise admin
  • luxury brands
  • dark-first dev tools
Flaws we saw
  • 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
  • landing desktop: the headline breaks into three short lines and leaves an empty column beside it
  • dashboard: the value labels above the spending bars are tiny and crowd each other

The baseline with no skillHow 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 Huashu Design

1 Run in your terminal

npx skills add alchaincyf/huashu-design

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

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

Taken from the project README. Check the source for the latest instructions.