A skill that stops AI from building bad, generic-looking user interfaces.
It grounds every UI prompt in actual UX laws and real-world interaction patterns—so you get clean, predictable, human-friendly designs instead of purple gradients, glowing buttons, and silent form failures.
Install it using skills.sh:
npx skills add PRZ3L3W/uxMost AI tools default to high-contrast aesthetics over actual usability. They build flash over function, forget loading and error states, and use buzzwords no real human wants to read.
This skill forces the AI to check every interface against classic UX principles (Jakob’s Law, Hick’s Law, Fitts’s Law) and build like a senior frontend developer.
- No generic "AI look": Bans purple/blue hero gradients, glassmorphism, neon glows, and fake tech buzzwords.
- Component-level errors: If one API call fails, only that card shows an error and retry button. The rest of the page stays working.
- Real feedback loops: Forms validate inline as you type, submit buttons show progress, and errors explain what failed and how to fix it.
- Smart loading states: Spinners don't flash for 0.2-second loads, and file uploads get real progress bars instead of endless spinning.
Use it anytime you're:
- Building new pages, apps, or components from scratch
- Adding forms, loading screens, or success messages
- Asking an AI to review an existing interface for usability bugs
You can invoke it explicitly in your prompt or let your editor pull it in whenever you're touching UI code.
| Focus Area | How the AI handles it |
|---|---|
| Layout | Keeps predictable conventions (logo top-left, cart top-right, standard navigation). |
| Loading | Matches the indicator to the wait time (nothing for <1s, inline spinners for 1-5s, skeletons/progress bars for long tasks). |
| Errors | Clear messaging with next steps. No silent drops, no raw database dumps. |
| Forms | Inline validation on field blur, forgiving with input formats (like phone numbers), clear password requirements. |
| Visuals | One accent color, restrained typography, flat surfaces, and clear content written like a human. |
To test the skill in a practical scenario, DeepSeek V4 Flash Max was prompted to generate a complete landing and booking page for a local car repair shop—first without the skill, and then with the skill enabled.
| Feature / Aspect | Without UX Skill | With UX Skill (PRZ3L3W/ux) |
|---|---|---|
| Visual Aesthetics | Generic dark mode, heavy purple/cyan gradients, glowing buttons, and unnecessary glassmorphism. | Clean, high-contrast typography, high readability, professional color palette suited for auto repair. |
| Hero & Copywriting | Buzzword-heavy headlines ("Revolutionizing Automotive Synergy"). | Clear value proposition, immediate phone/address access, and straightforward booking action. |
| Booking Form | Single generic submit button, no inline error handling, silent failure on invalid input format. | Field-level inline validation, phone number formatting, clear date/time selection, and loading state feedback. |
| Information Hierarchy | Decorative elements take precedence over critical details like operating hours and location. | Essential business info (hours, address, services, pricing) formatted predictably using standard patterns. |
| Error & State Handling | Generic global overlay error or blank screen when submitting incomplete forms. | Isolated component errors with descriptive user-facing explanations and retry triggers. |
Site without the prompt (a lot of AI signs, bugged navbar, not mobile responsive):
Site with the prompt (much less signs of AI, information already at the navbar and hero, better UX):
You can download and inspect the raw HTML/CSS/JS output generated in both test runs to evaluate the code quality, state handling, and layout structure directly here.