Is the Design System Reference skill free?

Yes. The skill itself is free from wigtn/wigtn-plugins. SkillProof publishes the install command and an independent test verdict at no cost.

What is the Design System Reference SkillProof Score?

8.4/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 4/5.

How do I install Design System Reference?

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 System Reference 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 System Reference

Twenty frontend style guides with real palettes, fonts, and anti-slop rules

by wigtn · wigtn/wigtn-plugins

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 8.4/10
Tested: Jul 20, 2026
Environment: Claude Code 2.x (agent harness)
Upstream re-checked: Jul 30, 2026 · 8a000b3

⚠ This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 20, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.

Read the 451-line Bento Grid guide it ships: real Apple-style CSS variables, named font pairings, and a concrete AI-slop blocklist (no default Inter, no purple-gradient-on-white). Building a hero section from it beat a no-skill baseline on token specificity instead of generic Tailwind defaults. Caveat: the advertised 'VS-based style recommendation' flow lives in a separate design-discovery agent that the skill install does NOT copy, so standalone it is a strong style-reference library rather than the full guided workflow.

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 7/10
Docs & honesty 4/5

What Design System Reference does

Ships twenty detailed frontend style guides (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism and more), each with concrete CSS variable palettes, font pairings, and layout patterns, plus a shared AI-slop anti-pattern checklist. Triggers when building or styling a web UI in a named aesthetic or when trying to avoid generic AI-looking designs.

How to install Design System Reference

Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.

Commands — how to trigger Design System Reference

/design-system-reference Twenty frontend style guides with real palettes, fonts, and anti-slop rules

It also activates on plain-language prompts like these:

Style this landing page in a neobrutalist aesthetic with real palettes
Give me a glassmorphism style guide with concrete CSS variables
This UI looks generic and AI-made, help me avoid the slop patterns

Frequently asked questions

Is the Design System Reference skill free?: Yes. The skill itself is free from wigtn/wigtn-plugins. SkillProof publishes the install command and an independent test verdict at no cost.
Does Design System Reference work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 20, 2026. Verdict: Tested · Works. Read the 451-line Bento Grid guide it ships: real Apple-style CSS variables, named font pairings, and a concrete AI-slop blocklist (no default Inter, no purple-gradient-on-white). Building a hero section from it beat a no-skill baseline on token specificity instead of generic Tailwind defaults. Caveat: the advertised 'VS-based style recommendation' flow lives in a separate design-discovery agent that the skill install does NOT copy, so standalone it is a strong style-reference library rather than the full guided workflow.
What is the Design System Reference SkillProof Score?: 8.4/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 4/5.
How do I install Design System Reference?: 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 System Reference 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.