claude-design-system-prompt vs Book Serif Index (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.

Book Serif Index (Meng To)

4/5

Book Serif Index lays Tally out as an open ledger: aged paper pages inside a dark leather frame, IM Fell English and EB Garamond on the landing, Cormorant Garamond and Newsreader on the dashboard, with mono chapter numbers and an oxblood accent. The dashboard reads like a page of accounts, drop cap included. It is the most committed idea in this batch. Pick it for products that want warmth, history or craft.

Side by side

Field	claude-design-system-prompt	Book Serif Index (Meng To)
Fonts	Bricolage Grotesque Geist Geist Mono	IM Fell English (landing) EB Garamond (landing) Cormorant Garamond (dashboard) Newsreader (dashboard) JetBrains Mono (landing) IBM Plex 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)	#15130f leather #efe4cc aged paper #2a2118 ink #7c2d23 oxblood #a8823f gold #cdbf9f frame text
Good fit for	B2B and prosumer SaaS fintech dashboards developer-adjacent tools directories and content tools	editorial and publishing sites heritage and craft brands personal finance with a story reading and journaling apps
Not great for	warm lifestyle brands kids or playful apps luxury	fast-moving SaaS data-dense admin tools brands that want to look modern
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	small grey serif text on aged paper is hard to read at mobile sizes dashboard: the book frame eats width, so tables feel cramped

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 Book Serif Index (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/book-serif-index#main .claude/skills/book-serif-index

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.