Anti-Generic UI Design: Remove the AI-Generated Look
Builds or fixes interfaces with a committed visual direction and real tokens, and strips out the patterns that make UI look AI-generated.
Before & after
Same prompt, same agent — the only difference is the skill.
A good analytics dashboard should show your key metrics prominently and make it easy to drill down into the data. You'll want to use clear labels and logical organization. Consider using a color scheme that matches your brand. Charts should be easy to read and interactive if possible. You might include filters so users can look at different time periods or segments. It's good to have a consistent layout so the dashboard feels unified. You could add some charts with gradients or glassmorphism effects for a modern look. Make sure the design isn't too cluttered and there's good use of whitespace. Would you like suggestions on which charts work best for different metrics?
DASHBOARD DESIGN (Taste judgment applied) VISUAL STRATEGY RULES REJECT gradient overlays (signals generic AI default) REJECT glassmorphism/blur on controls (signals 2024 AI trends) USE restrained monochrome base with one accent color for callouts only Typography: System font, generous line height, hierarchy via weight not size Spacing: 8px grid, consistent margins, whitespace breathing room LAYOUT (Client Dashboard, Monthly) Header: Key stat (MRR growth +12% YoY) left-aligned sans-serif, no card wrapper Revenue trend: Line chart, no fill, light stroke, 12-month window (2 cols wide) Churn by cohort: Labeled bars, light gray inactive, dark accent for recent (2 cols wide) Unit economics: Table, subtotal rows bold, 1px lines only (full width) Conversion funnel: Waterfall chart, same accent per stage, percentages called out (2 cols) COLOR PALETTE (no gradients anywhere) Background: Off-white #f9f8f7 Text/elements: Dark gray #6b7280 Accent callout: Navy #1f2937 (KPI only) Secondary: Muted blue #7c8ba3 (light touch) Alert: Red #dc2626 (churn/risk only) INTERACTION (learned, not default) Hover: Soft shadow on card, opacity emphasis on data point Tooltip: Plain text, no animation, 200ms delay Drill-down: Click bar, inline expansion (not modal) RESULT: Human-designed aesthetic, zero AI tells
About this skill
You asked for a landing page and got the same one everyone gets: a purple-to-blue gradient, a centered headline with a little "New" pill, three feature cards with an icon in a rounded square, and fade-up animations on every section. It works, but anyone can tell a model made it. This skill makes Claude commit to a visual direction before writing any code, and then remove the specific patterns that give AI-made UI away.
What it does
- Writes a three-line direction brief (subject, reference world, signature move) before any styling, so the design has a point of view instead of falling back on defaults
- Sets real design tokens: a tinted neutral ramp, one accent with a usage budget, a type pairing and scale, one radius, and one choice between borders and shadows
- Audits pasted code or screenshots against a named list of AI-generated tells and ranks the fixes by how much they help
- Replaces template layouts (centered hero, 3-up icon cards, four identical KPI tiles) with hierarchy that fits the content
- Treats copy and data as design: no "Supercharge your workflow", no made-up metrics, and sample data with realistic shapes
- Keeps contrast, focus states, and readable line lengths intact while it restyles
What you get
For new builds, you get a short direction brief, a token block, and working code that uses them. For existing UI, you get a ranked list of the tells it found with targeted fixes or a diff.
Best for
Indie hackers, vibe coders, and developers without a designer who ship React/Tailwind or plain HTML/CSS and want their product to look intentionally designed, not generated.
SKILL.md preview
---
name: anti-generic-ui-design
description: Designs and restyles interfaces so they look intentionally designed, not AI-generated. It writes a short direction brief, sets concrete tokens (tinted neutrals, one budgeted accent, a type pairing and scale, one surface system), then audits the result against a named list of AI-generated tells and fixes them. Use when the user says "this looks like every AI site", "make it look less generic", "my UI keeps coming out purple gradients and glass cards", "design this so it doesn't look templated", "give this dashboard some taste", "review my landing page design", "why does my site look cheap", or "restyle this component so it looks designed".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.