claude-design-system-prompt vs Agency Grid Layout Minimal (Meng To)

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.

Agency Grid Layout Minimal (Meng To)

4/5

Agency Grid Layout Minimal turns Tally into a Swiss-style studio page: grey paper, huge light Inter Tight headlines with a darker second line, hairline rules and JetBrains Mono labels. The dashboard is the same: a giant "$640 left to budget", thin progress lines and one black bar in the chart. Pick it if you want a calm, typographic product page that looks designed rather than templated.

Side by side

Field	claude-design-system-prompt	Agency Grid Layout Minimal (Meng To)
Fonts	Bricolage Grotesque Geist Geist Mono	Inter Tight Inter (landing) JetBrains 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)	#ecebe7 grey paper #fbfaf8 white #121211 ink #8b8984 grey #3d6b4f green (landing) #b4441c rust (dashboard)
Good fit for	B2B and prosumer SaaS fintech dashboards developer-adjacent tools directories and content tools	agency and studio sites portfolio and case-study pages minimal SaaS landing pages finance and analytics dashboards
Not great for	warm lifestyle brands kids or playful apps luxury	playful consumer brands image-heavy marketing pages dark-mode products
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: the light grey type on grey paper is low contrast in places landing: the hero product shot is a pale wireframe that says little at a glance

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 Agency Grid Layout Minimal (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/agency-grid-layout-minimal#main .claude/skills/agency-grid-layout-minimal

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.