impeccable-design

Audit UI implementations for design system alignment and AI slop patterns.

1|Updated May 21, 2026
One-click install
npx skills add https://github.com/hiddink-ai/hiddink-harness --skill impeccable-design-hiddink-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: impeccable-design
Source: https://github.com/hiddink-ai/hiddink-harness/tree/main/templates/skills/impeccable-design
Command: npx skills add https://github.com/hiddink-ai/hiddink-harness --skill impeccable-design-hiddink-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates generic, low-quality AI-generated interface patterns by enforcing a rigorous, intentional design language focused on typography, color, motion, and layout.

Core Features & Use Cases

  • Design Auditing: Systematically evaluates interfaces for hierarchy, clarity, and intentionality using a multi-dimensional lens.
  • AI Slop Detection: Identifies and removes common AI-generated design flaws like generic font choices, pure-black backgrounds, and decorative-only animations.
  • Use Case: Before shipping a new dashboard, use this skill to audit the component library for design system alignment, color harmony, and UX writing consistency.

Quick Start

Run the impeccable-design skill to audit the current UI implementation and provide a report on design quality and slop patterns.

Frequently Asked Questions about impeccable-design

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

FAQPage Schema
How do I audit my UI for generic AI design patterns before shipping?

To audit your UI for generic AI design patterns, you can run a systematic evaluation checking interface hierarchy, clarity, and intentionality. This process identifies flaws like decorative-only animations and pure-black backgrounds to ensure production-grade design quality.

Why does my AI-generated interface look generic and lack professional polish?

AI-generated interfaces look generic without intentional constraints on typography, color, and motion. Applying a rigorous design language with specific rules for UI hierarchy and OKLCH color strategy eliminates these low-quality patterns.

What is the 100/300/500ms motion rule in UX design?

The 100/300/500ms motion rule is a specific timing constraint enforcing professional motion design in user interfaces. It ensures animations are intentional and eliminates decorative-only movements that degrade user experience.

How do I apply OKLCH color strategy to my component library?

Applying an OKLCH color strategy to a component library involves enforcing specific color constraints to maintain harmony and professional standards across your UI. This systematic approach eliminates inconsistent color choices and ensures visual cohesion.

Can I use this UI design audit on an existing dashboard component library?

Yes, you can use this UI design audit on an existing dashboard component library. It systematically evaluates your current implementation for design system alignment, color harmony, and UX writing consistency before you ship.

What are the limitations of using automated design constraints for UX refinement?

Automated design constraints for UX refinement require strict adherence to predefined rules like the OKLCH color strategy and motion timings. Limitations arise if your existing codebase heavily relies on generic patterns needing manual refactoring to meet these standards.