Design Taste (Frontend)
Three sliders that tune Claude's UI output. Stops the generic AI look.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/design-taste-frontend-leonxlnx/— the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
Senior UI/UX engineer that overrides default LLM design biases. Tuneable via DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY parameters. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
What this skill does
A high-agency frontend skill that exposes three knobs (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) so you can dial the AI's output from clean and centered to asymmetric and dense. Bans common AI tells (the "Lila" purple/blue aesthetic, centered hero sections, generic card overuse, emoji decorations) and enforces specific React/Next.js/Tailwind architecture rules with hardware-accelerated motion via Framer Motion.
Related skills
Logo Creator
SamurAIGPT
Generate minimalist, scalable vector logos using geometric shapes and negative space.
Design Audit
thedotmack
Score a design against Dieter Rams' principles and create a plan to improve it.
Emil's Design Engineering
emilkowalski
A design review from Emil Kowalski — catches the small things that make UIs feel right.
Impeccable
pbakaus
Kills generic AI design — gives your interfaces deliberate taste, motion, and polish.