claude-design-system-prompt vs Garden Web Design Engineer

Both after shots are the Tally landing page from the same Claude Code test. Shared tags: Visual direction.

4 out of 5

claude-design-system-prompt

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.

3 out of 5

Garden Web Design Engineer

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.

Baseline with no skill · How the brief works

How to install claude-design-system-prompt

Works with Claude Code, Codex, Cursor, Gemini and more

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.

How to install Garden Web Design Engineer

Works with Claude Code, Codex, Cursor, Gemini and more

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

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.