Is the Design Trends skill free?

Yes. The skill itself is free from growthaudit/claude-design-skills. SkillProof publishes the install command and an independent test verdict at no cost.

What is the Design Trends SkillProof Score?

9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.

How do I install Design Trends?

Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.

Can I use Design Trends with Cursor, Copilot, Gemini CLI, Codex or other AI tools?

The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.

Design Trends

17 complete 2026 web-design styling systems with exact CSS vars, Tailwind config, and do/don'ts.

by growthaudit · growthaudit/claude-design-skills

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 9.6/10
Tested: Jul 16, 2026
Environment: Claude Code 2.x (agent harness)
Upstream re-checked: Aug 10, 2026 · 784f26a

Asked it to neo-brutalize a hero section: it delivered exact, opinionated tokens (3px border, 5px/5px/0 hard shadow, Space Grotesk/DM Sans/Space Mono font trio, zero border-radius, hover/active shadow-lift recipe) plus explicit do/don't rules — a from-memory attempt without the file produced only vague 'thick border, bold colors' guesses with no concrete values.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

Installs cleanly 5/5
Triggers reliably 5/5
Output vs. baseline 9/10
Docs & honesty 5/5

What Design Trends does

Applies one of 17 complete 2026 web-design trend systems (neo-brutalism, neumorphism, dark mode, retrofuturism, chatbot UI, etc.) to any UI artifact, each bundled with CSS custom properties, Tailwind config, typography pairings, layout principles, do/don't rules, and reference component patterns. Triggers whenever the user names a trend, asks for something 'trendy'/'2026 style'/'Y2K', or wants a design to feel less generic/AI-default.

How to install Design Trends

git clone https://github.com/growthaudit/claude-design-skills
cd claude-design-skills
mkdir -p ~/.claude/skills
cp -r . ~/.claude/skills/design-trends

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Design Trends

/design-trends 17 complete 2026 web-design styling systems with exact CSS vars, Tailwind config, and do/don'ts.

It also activates on plain-language prompts like these:

Give this hero section a neo-brutalist look with real CSS values
Make this dashboard feel less generic, more 2026 Y2K style
Restyle our chatbot UI using an actual neumorphism token system

Frequently asked questions

Is the Design Trends skill free?: Yes. The skill itself is free from growthaudit/claude-design-skills. SkillProof publishes the install command and an independent test verdict at no cost.
Does Design Trends work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 16, 2026. Verdict: Tested · Works. Asked it to neo-brutalize a hero section: it delivered exact, opinionated tokens (3px border, 5px/5px/0 hard shadow, Space Grotesk/DM Sans/Space Mono font trio, zero border-radius, hover/active shadow-lift recipe) plus explicit do/don't rules — a from-memory attempt without the file produced only vague 'thick border, bold colors' guesses with no concrete values.
What is the Design Trends SkillProof Score?: 9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
How do I install Design Trends?: Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Design Trends with Cursor, Copilot, Gemini CLI, Codex or other AI tools?: The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.