unslop-ui

Detects and removes AI-generated design tells from web UI codebases.

Updated Nov 29, 2025
One-click install
npx skills add https://github.com/achyutkneupane/Blog-Kit --skill unslop-ui-achyutkneupane
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: unslop-ui
Source: https://github.com/achyutkneupane/Blog-Kit/tree/main/.ai/skills/unslop-ui
Command: npx skills add https://github.com/achyutkneupane/Blog-Kit --skill unslop-ui-achyutkneupane

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Websites built by AI models converge on the same recognizable defaults (purple gradients, untouched shadcn themes, cream-plus-serif palettes, hero-plus-three-cards layouts), making them instantly read as machine-generated. This Skill identifies those tells and forces deliberate, project-specific design choices instead of model defaults. ## Core Features & Use Cases - Build Mode Guidance: Establishes a concrete design brief (reference site, color decision, type decision, layout intent) before generating any UI, preventing default-driven output. - Deterministic Audit Scanner: A standalone Python script scans HTML, CSS, JS, TS, Vue, Svelte, and Astro files for ranked tells, reports file and line with fixes, computes a vibe score, and returns an exit code equal to the high-severity count so CI pipelines can gate on it. - Data-Grounded Tell Catalog: Reference documentation ranks each tell by evidence from a 47-subreddit Reddit analysis, including the newer cream-plus-serif-plus-sage tasteful default, and explicitly lists what not to flag. - Use Case: A developer suspects their landing page looks AI-generated, runs the scanner with --severity high, gets file:line findings for the purple gradient and stock shadcn card, then replaces them with deliberate brand choices marked with unslop-ignore where intentional. ## Quick Start Ask the AI to audit your website project for AI-generated design tells and fix the highest-priority findings using the unslop-ui skill.

Frequently Asked Questions about unslop-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scan my website for AI-generated design tells?

Run python3 scripts/devibe_scan.py followed by your project path to get a full report with a vibe score. Add --severity high to show only the strongest signals, or --json for machine-readable output suitable for CI pipelines.

What design patterns does the scanner flag as AI-generated?

It flags untouched shadcn default cards, indigo/violet/purple primary colors, gradient text, purple-to-blue gradients, the cream-plus-serif-plus-sage tasteful default, hero-plus-three-cards layouts, neon glow shadows, emoji-as-icons, and generic fonts like Inter or Geist.

Can I use the scanner in a CI pipeline?

Yes, the scanner's exit code equals the number of high-severity findings, so a CI step fails automatically when strong AI tells are present. Use the --json flag for machine-readable output in automated workflows.

How do I keep an intentional design choice from being flagged?

Add the comment unslop-ignore on any line containing a deliberate choice, such as a genuine brand color that happens to be purple. The scanner skips those lines so the audit stays trustworthy without nagging about real decisions.

What file types does the design scanner support?

The scanner processes .html, .css, .scss, .js, .jsx, .ts, .tsx, .vue, .svelte, and .astro files. It skips dependency and build directories like node_modules, dist, and .next, and ignores minified files.

What are the limitations of automated AI-design detection?

The scanner only catches mechanical tells like colors, fonts, and gradients via regex patterns. It cannot evaluate layout coherence, spacing consistency, text overflow, or alignment, so those layout-quality issues must be checked by eye against the reference catalog.