claude-design-system-prompt vs Liquid Glass Design (ECC)

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.

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.

Liquid Glass Design (ECC)

4/5

Liquid Glass Design builds Tally out of frosted glass panels floating over soft mint, peach and periwinkle light, set in Bricolage Grotesque and DM Sans. The dashboard keeps the glass in Manrope and stays readable. Pick it if you want a friendly, Apple-flavored product that looks nothing like the cream-and-serif default.

Side by side

Field	claude-design-system-prompt	Liquid Glass Design (ECC)
Fonts	Bricolage Grotesque Geist Geist Mono	Bricolage Grotesque (landing) DM Sans (landing) Manrope (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)	#13212c ink #0f8f7e teal #ff7a59 coral #ffb547 amber #8b7cf6 violet #3f5bd9 blue (dashboard) #e0435a red (dashboard)
Good fit for	B2B and prosumer SaaS fintech dashboards developer-adjacent tools directories and content tools	consumer fintech apps iOS companion sites friendly SaaS dashboards wellness and lifestyle products app launch pages
Not great for	warm lifestyle brands kids or playful apps luxury	dense data and admin tools sober enterprise or legal brands long-form editorial sites
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	dashboard desktop: the payee column in the transactions table wraps onto two lines the landing (teal, coral, amber) and the dashboard (blue-led) shift the accent color between pages the skill is written for SwiftUI; on the web the glass is CSS blur, so it leans on backdrop-filter support

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 Liquid Glass Design (ECC)

1 Run in your terminal

npx degit affaan-m/ECC/skills/liquid-glass-design#main .claude/skills/liquid-glass-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.