claude-design-system-prompt vs hue

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: Design systems.

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.

hue

4/5

hue is built to turn a brand into a new design-language skill. With our one-file brief it skipped those extra files and used its rules for picking colors and fonts, and the result is a clear brand: a pocket-ledger look with warm off-white paper, near-black ink, one marigold highlight and chunky Bricolage Grotesque over Hanken Grotesk. The landing and the dashboard match closely, and neither looks like the cream-and-serif default. Pick it if you want a skill that settles a brand before it designs.

Side by side

Field	claude-design-system-prompt	hue
Fonts	Bricolage Grotesque Geist Geist Mono	Bricolage Grotesque Hanken Grotesk
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)	#f6f5f1 paper #1b1a17 ink #f2b21b marigold #c98a00 deep marigold #d9482b tomato #2f8a4c leaf
Good fit for	B2B and prosumer SaaS fintech dashboards developer-adjacent tools directories and content tools	new products without a brand yet consumer apps SaaS landing pages product dashboards design-system kickoffs
Not great for	warm lifestyle brands kids or playful apps luxury	teams with a fixed brand book dark-mode products quiet enterprise 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	in our one-file test it skipped the design-skill files it normally writes, so we only saw its color and type rules at work landing: the yellow-on-black pricing band is the one loud moment on an otherwise calm page

The baseline with no skill 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 hue

1 Run in your terminal

git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

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.

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