claude-design-system-prompt vs Editorial Portfolio Chapters (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.

Editorial Portfolio Chapters (Meng To)

4/5

Editorial Portfolio Chapters tells the Tally story in color-blocked chapters: clay, sage, mist and ochre panels on a black page, Inter Tight headlines and a hot orange signal color. The dashboard carries the same muted chapter colors into the envelope bars and ends on a big orange call to action. Pick it if you want a confident, art-directed product that still reads cleanly.

Side by side

Field	claude-design-system-prompt	Editorial Portfolio Chapters (Meng To)
Fonts	Bricolage Grotesque Geist Geist Mono	Inter Tight Inter JetBrains Mono (landing)
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)	#0f0f0d ink #f2eee6 paper #ff5b24 signal orange #dcbca4 clay #b9c3aa sage #b0bfcc mist #dcc684 ochre
Good fit for	B2B and prosumer SaaS fintech dashboards developer-adjacent tools directories and content tools	portfolio and studio sites product storytelling pages lifestyle and consumer brands editorial dashboards
Not great for	warm lifestyle brands kids or playful apps luxury	conservative finance brands dense admin tools single-color brand systems
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 hero is a phone and cards on a clay panel, so the first screen is less striking than the chapters below dashboard: the muted envelope colors are close in value and harder to tell apart

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 Editorial Portfolio Chapters (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/editorial-portfolio-chapters#main .claude/skills/editorial-portfolio-chapters

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.