claude-design-system-prompt vs web-designer

Both after shots are the Tally budgeting-app landing page, made by applying each skill's published instructions. Shared tags: Visual direction.

4 out of 5

claude-design-system-prompt

The aesthetic-direction and slop-check skills produced a calm, coherent fintech page: a real product panel in the hero, a bento feature block with one lead cell, and borders instead of shadows. It also renders a visible design-system summary, as the skill requires, which some will see as clutter.

Tally landing page made with claude-design-system-prompt
Open full after

4 out of 5

web-designer

Its mandatory six-line brief (direction, mood, palette, type, layout, signature) pushed the page into a warm editorial ledger: Fraunces on paper, one tomato accent, hand-drawn tally marks as the signature and alternating paper/ink sections. One of the most distinctive results in the set. The weak spot is its full-viewport section habit, which leaves big empty bands on a short page.

Tally landing page made with web-designer
Open full after

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 web-designer

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

/plugin marketplace add MickeyAlton33/web-designer-plugin
/plugin install web-designer

Plugin install is 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.