Remove AI plastic look from Claude Code generated UI using unslop

To fix common issues in Claude Code generated frontend UIs such as purple gradients, glow effects, and random spacing, you can use the open-source project heydamir/unslop as a Claude Code skill for automated code reviews and layered fixes.

X (Twitter)@LiuweijiaVip5

Claude Codeheydamir/unslop

Added 2026-11-02 · originally published 2026-11-01

Key points

Use the open-source project heydamir/unslop to turn the UI review workflow into a Claude Code skill.
Automatically scan and clean up pervasive purple gradients, glow effects, and random spacing.
Automatically scan for typical AI plastic-look characteristics, including neon purple, emoji tags, misaligned margins, and empty slogans.
Apply layered fixes to frontend code according to professional designer standards (such as adjusting to the 4px grid).

Pitfalls

Pervasive purple gradients, glow effects, and random spacing
AI plastic-look characteristics caused by neon purple, emoji tags, misaligned margins, and empty slogans

.cursorrules

- Avoid generating pervasive purple gradients, glow effects, emoji tags, and empty slogans
- Strictly avoid random spacing and align margins according to standards like the 4px grid
- Run the UI review workflow to clean up typical AI plastic-look characteristics

Copy-ready prompt

Please use the [heydamir/unslop] tool or its standards to inspect and fix the currently generated frontend UI code. Automatically scan and remove neon purple, purple gradients, glow effects, emoji tags, misaligned margins, and empty marketing slogans, and apply layered fixes according to designer standards (such as the 4px spacing rule).

View original post

#AI Frontend#Code Beautification#Claude Code#Pitfall Avoidance

Remove that AI-generated look from frontend interfaces with unslop

Fix typical AI-generated UI flaws such as purple gradients, glows, emoji labels, loud copy, and uneven spacing by using the unslop skill for step-by-step audits and multi-round refinement, transforming generic outputs into interfaces with real character.

Curing ugly AI frontends with production-grade UI design principles

Benji, a design lead at X, open-sourced a skill set to give AI frontends production-grade aesthetic standards. It solves the problems of overloaded, flat, or generic AI interfaces by outlining 5 common anti-patterns, 7 execution steps to plan most of the UI before writing code, and a technique for recording and checking animation frames.

Equip AI with top-tier aesthetic judgment using 6 design and tool repositories

By integrating design system repositories, Figma MCP, and animation and 3D tool libraries, this solves the issues of ugly interfaces, missing animations, and a lack of professional design rules when AI writes frontend code. It enables AI to accurately translate Figma designs into code and generate animations and 3D scenes.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques