SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsimpeccable

impeccable

Frontend & websites

View repository

Updated 10-15 18:46

About this skill

Impeccable — A high-quality frontend design toolkit

Based on the Impeccable project, helping generateunique, production-gradefrontend interface designs, avoiding generic AI aesthetics.

Design context (required reading before starting)

Design skills produce generic output when there is no project context.Before starting any design work, you must confirm the design context.

Required context：

  • Target audience: Who uses this product? In what situations?
  • Use cases: What tasks do they need to complete?
  • Brand personality/tone: What feeling should the interface evoke?

CRITICAL: Context cannot be inferred by reading the codebase. Code only tells you what was built, not who it was built for or how it should feel.

Collection order：

  1. If the current instructions already contain a Design Context section, use it directly
  2. Read the .impeccable.md file in the project root
  3. If neither exists,you must first run the context collection process → Read teach-impeccable.md

Core aesthetic principles

Design direction

Choose a bold aesthetic direction. Bold maximalism and restrained minimalism are both fine—the key isintentionality, not intensity.

  • Purpose: What problem does it solve? Who is using it?
  • Tone: Pick one extreme: minimalism, maximalist chaos, retro-futurism, organic natural, luxurious refinement, toy-like playfulness, magazine editorial, brutalism, art deco, soft pastels, industrial utilitarian...
  • Constraints: Technical requirements (framework, performance, accessibility)
  • Differentiation: What is the one thing people will remember?

The implemented code must be: production-grade and usable · visually stunning and memorable · a unified style with a clear aesthetic point of view · every detail carefully polished.

The AI Slop Test

If you showed this interface to someone and said "this was made by AI," would they immediately believe it? If so, that is the problem. A unique interface should make people ask "how was this made?" rather than "which AI made this?"

DO / DON'T quick reference

Dimension ✅ DO ❌ DON'T Read in depth
Typography Distinctive display type + refined body type; modular scale; clamp() fluid sizing Inter/Roboto/Arial/Open Sans; monospace as "technical feel"; large icons above headings + rounded corners typography.md
Color oklch/color-mix/light-dark; neutral tones tinted toward the brand color Pure black #000 / pure white #fff; AI palettes (cyan + dark, purple-blue gradients, neon accents); default dark + glow color-and-contrast.md
Space Varying spacing creates rhythm; clamp() fluid spacing Everything is a card / cards inside cards; hero metric templates; center everything spatial-design.md
Motion State-change motion; exponential easing (ease-out-quart/expo) Animated layout properties; bounce/elastic easing motion-design.md
Interaction Progressive disclosure; educational empty states Repeated information; every button set as primary interaction-design.md
Responsive Container queries @container Hiding key features on mobile responsive-design.md
Copywriting Every word has value in its existence Repeat information the user can already see ux-writing.md
Details Intentional decoration reinforces the brand Frosted glass abuse; rounded corners + generic shadows; meaningless sparklines —

Implementation Principles

  • Implementation complexity matches the aesthetic vision
  • Make unexpected creative choices, never converge
  • Every design should be different: vary light and dark themes, different fonts, different aesthetics
  • AI is capable of extraordinary creative work—do not hold back

Scenario-Based Capability Navigation

When you identify that the user's need belongs to one of the following scenarios,read the corresponding reference fileto obtain detailed workflows and instructions.

🎨 Visual Style Adjustment

Scenario When to Use Reference File
Enhance Visual Impact The design looks flat, safe, and lacks personality bolder.md
Reduce Visual Aggressiveness The design is too bold, harsh, or unsettling quieter.md
Strategically Add Color The interface is monotonous, gray, and lacks color expression colorize.md
Extraordinary Visual Effects Needs cool implementations such as shaders, scroll-driven, 60fps, etc. overdrive.md

📐 Layout and Typography

Scenario When to Use Reference File
Fix Layout and Spacing Layout is wrong, spacing is inconsistent, visual hierarchy is weak arrange.md
Improve Typography Poor font choices, unclear hierarchy, imbalanced sizes typeset.md
Responsive Adaptation Needs adaptation across devices and screen sizes adapt.md

✨ Motion and Experience

Scenario When to Use Reference File
Add Motion and Micro-interactions The interface needs animations, transitions, and hover effects animate.md
Add Delight and Personality The interface functions correctly but lacks soul and memorable points delight.md
New User Onboarding Design Needs design for onboarding flows, empty states, and first-time experiences onboard.md

🔍 Quality Assurance

Scenario When to Use Reference File
Comprehensive Technical Review Needs a11y/performance/responsive/anti-pattern checks audit.md
UX Design Review Needs assessment of visual hierarchy/information architecture/cognitive load critique.md
Final Launch Polish Final pre-release check of alignment, spacing, and consistency polish.md
Production Hardening Error handling, i18n, overflow, edge cases harden.md
Frontend Performance Optimization Slow loading, rendering jank, oversized bundle optimize.md

🏗 Design Systematization

Scenario When to Use Reference File
Extract Design System Needs to extract components, tokens, and reusable patterns extract.md
Standardize to Design System The interface deviates from design system standards and needs correction normalize.md
Simplify to the Essence The interface is too complex and needs simplification and noise reduction distill.md
Improve UX copy Copy is unclear, error messages are unfriendly clarify.md

🔧 Project Setup

Scenario When to use Reference file
Initialize design context When using impeccable for the first time in a project, design context needs to be collected teach-impeccable.md

In-depth design domain reference

When in-depth theoretical and practical guidance in a design domain is needed, read the following reference files:

Domain Reference file
Typography system typography.md
Color and contrast color-and-contrast.md
Spatial design spatial-design.md
Motion design motion-design.md
Interaction design interaction-design.md
Responsive design responsive-design.md
UX copy ux-writing.md
Heuristic scoring heuristics-scoring.md
User personas personas.md
Cognitive load cognitive-load.md

Source