Garden Web Design Engineer vs Hallmark

Hallmark scored higher on the same brief, 4/5. The rows below show where each one fits.

Both built the Tally landing page in the same Claude Code test. Shared tasks: Visual direction, Landing pages.

Garden Web Design Engineer

3/5

Garden's web-design-engineer trades Fraunces for Young Serif and adds an orange-red accent with sage. It's a warm variation on the default, and it repeats the default's habit of a hero card covering the mockup.

Hallmark

4/5

Hallmark turns Tally into a cheerful yellow-and-pastel brand in Plus Jakarta Sans with big ghost numerals, and the dashboard matches it. The most consistent result in the set, but it took about 12 minutes per brief.

Side by side

Field	Garden Web Design Engineer	Hallmark
Fonts	Young Serif Instrument Sans Instrument Serif and Hanken Grotesk (dashboard)	Plus Jakarta Sans JetBrains Mono
Colors	#F3EDE2 paper #D9542F orange-red #5E7F66 sage #EFD99A butter dashboard #2E5B45 green	paper oklch(97% 0.012 95) yellow accent oklch(86% 0.18 95) blue oklch(66% 0.18 235) pink, mint and lavender step bands ink oklch(20% 0.012 250)
Good fit for	personal finance food and lifestyle brands small consumer SaaS	consumer budgeting apps family and household tools onboarding-heavy mobile apps friendly B2C SaaS
Not great for	dense pro dashboards dev tools bold or dark brands	serious banking or wealth enterprise and pro tools luxury brands
Flaws we saw	landing hero: the dark "Internet bill due Friday" card covers the Weekend fund row landing mobile: the CTA buttons wrap to three lines	landing and dashboard: the mono labels run very small and get hard to read each brief took about 12 minutes (742 s and 722 s), about five times the baseline's 143 s and 125 s

The baseline with no skill How the brief works

Install Garden Web Design Engineer

1 Run in your terminal

npx degit ConardLi/garden-skills/skills/web-design-engineer#main .claude/skills/web-design-engineer

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.

Install Hallmark

1 Run in your terminal

npx skills add nutlope/hallmark

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

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