• Building web components, pages, or full applications
• Creating landing pages, dashboards, or marketing pages
• Designing React, Vue, or native HTML/CSS interfaces
• Beautifying or redesigning existing web UIs
• Creating posters, materials, or visual design elements (for web use)
• Any frontend project requiring high design quality and unique aesthetics

• Question: What problem does this interface solve?
• Users: Who will use it? In what context?
• Goals: What tasks do users need to complete?

• Minimalism: Extreme restraint, ample white space, precise typography
• Maximalist Chaos: Dense layouts, overlapping elements, visual impact
• Retro-futurism: 80s neon colors, grids, synthwave style
• Organic/Natural: Flowing shapes, natural tones, soft curves
• Luxurious/Exquisite: Elegant fonts, gold accents, fine details
• Playful/Toy-like: Bright colors, rounded corners, fun animations
• Editorial/Magazine Style: Bold typography, grid systems, black and white focused
• Rugged/Primitive: Monochrome, hard edges, pragmatism
• Art Deco/Geometric: Symmetric patterns, geometric shapes, high contrast
• Soft/Pastel: Gentle colors, gradients, dreamy feel
• Industrial/Pragmatic: System fonts, monochrome, function-first
• Neumorphism: Soft shadows, embossed effects, subtle depth
• Glass Morphism: Blurred backgrounds, transparency, light feel

• Which framework to use? (React, Vue, native HTML/CSS)
• Performance requirements? (Animation complexity, file size)
• Accessibility requirements? (ARIA labels, keyboard navigation, color contrast)
• Browser compatibility?

• Memorable point: What makes it unforgettable?
• Uniqueness: Which detail will users remember?
• Surprise: Where will users be impressed?

• ✅ Choose unique and distinctive fonts
• ✅ Use eye-catching fonts for headings, readable fonts for body text
• ✅ Try unexpected font pairings
• ✅ Use font variations (font-weight, font-style) to create hierarchy
• ✅ Precisely control letter-spacing and line-height

• ❌ Use generic fonts: Arial, Helvetica, Inter, Roboto, system fonts
• ❌ Use the same font and size for all text
• ❌ Ignore font loading performance (use font-display: swap)

• Google Fonts (choose niche, unique fonts)
• Custom fonts (if the project allows)

/* Minimalist editorial style */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Modern tech style */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;

/* Elegant luxurious style */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;

• ✅ Use CSS variables for consistency
• ✅ Combine primary color + striking accent color
• ✅ Consider color psychology (blue=trust, red=urgency, green=success)
• ✅ Use gradients to create depth (but tastefully)
• ✅ Maintain color contrast (WCAG AA standard: at least 4.5:1)

• ❌ Clichéd color schemes: white background + purple gradient
• ❌ Too many colors (3-5 primary colors are sufficient)
• ❌ Ignore accessibility

:root {
  /* Minimalist black and white */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #ff3366;

  /* Retro-futurism */
  --color-primary: #1a1a2e;
  --color-secondary: #16213e;
  --color-accent: #00fff5;
  --color-highlight: #ff006e;

  /* Natural organic */
  --color-primary: #2d6a4f;
  --color-secondary: #52b788;
  --color-accent: #ffc857;
}

• ✅ Prioritize CSS animations (better performance)
• ✅ Design page load animations (first impression)
• ✅ Use

  animation-delay

  to achieve sequential element display
• ✅ Add subtle transitions for hover states
• ✅ Scroll-triggered animations (Intersection Observer)
• ✅ For React, use Framer Motion or React Spring

• ❌ Overuse animations (every element moving)
• ❌ Animation duration too long (> 500ms will make people impatient)
• ❌ Ignore

  prefers-reduced-motion

  media query

/* Page load - elements fade in one by one */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

• ✅ Try asymmetric layouts
• ✅ Use overlapping elements to create depth
• ✅ Diagonal flow to guide the eye
• ✅ Break grid elements (but purposefully)
• ✅ Generous white space or carefully controlled density
• ✅ Use Grid and Flexbox to create complex layouts

• ❌ Center-align all elements
• ❌ Uniformly distributed grids (boring)
• ❌ Ignore responsive design

/* Asymmetric grid */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

/* Overlap effect */
.overlap-container {
  position: relative;
}

.overlap-item {
  position: absolute;
  z-index: 2;
  transform: translate(-20%, -20%);
}

/* Diagonal flow */
.diagonal-section {
  transform: skewY(-3deg);
  padding: 100px 0;
}

.diagonal-section > * {
  transform: skewY(3deg);
}

• ✅ Gradient grids
• ✅ Noise textures
• ✅ Geometric patterns
• ✅ Layered transparency
• ✅ Dramatic shadows
• ✅ Decorative borders
• ✅ Custom cursors (if suitable for the style)
• ✅ Grain overlay effects

• ❌ Solid color backgrounds (unless minimalist style)
• ❌ Low-quality or irrelevant stock images
• ❌ Overuse shadows (box-shadow pollution)

/* Gradient grid background */
.gradient-grid {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}

/* Noise texture */
.noise-texture {
  position: relative;
}

.noise-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glass morphism effect */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

• ❌ Overused fonts: Inter, Roboto, Arial, system fonts
• ❌ Clichéd color schemes: white background + purple gradient
• ❌ Predictable layout patterns (centered card grids)
• ❌ One-size-fits-all designs lacking context-specific features

• ✅ Choose different fonts for each project
• ✅ Alternate between light/dark themes
• ✅ Try different layout structures
• ✅ Add unique brand elements and personality

• Numerous animations and transitions
• Multiple layered elements
• Complex interaction states
• Detailed visual effects (particles, gradients, textures)

// Example: Complex animated card
<motion.div
  initial={{ opacity: 0, scale: 0.8, rotateX: -15 }}
  animate={{ opacity: 1, scale: 1, rotateX: 0 }}
  whileHover={{
    scale: 1.05,
    rotateY: 5,
    boxShadow: "0 25px 50px rgba(0,0,0,0.2)"
  }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 20
  }}
>
  {/* Complex content */}
</motion.div>

• Restrained animations (only at critical moments)
• Precise spacing and typography
• Subtle transition effects
• Focus on details rather than quantity

/* Example: Exquisite minimalism */
.minimal-card {
  padding: 60px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  transition: border-color 0.3s ease;
}

.minimal-card:hover {
  border-color: rgba(0,0,0,0.2);
}

.minimal-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

• Read the user's request and extract key information
• Determine the project type (component, page, full application)
• Identify the tech stack (React, Vue, native HTML/CSS)

• Answer the 4 questions in the design thinking process
• Choose a clear aesthetic direction
• Visualize the final result in your mind

• Choose frameworks and tools
• Decide on animation libraries (Framer Motion, CSS, React Spring)
• Determine font sources

• Write semantic HTML structure
• Implement CSS styles (using CSS variables)
• Add interactions and animations
• Ensure responsive design

• Adjust spacing and typography
• Optimize animation timings
• Test on different screen sizes
• Ensure accessibility (ARIA, keyboard navigation)

• Purpose: Showcase product value and attract user sign-ups
• Style: Modern tech + editorial style, using Space Grotesk font, black and white + blue accents
• Layout: Asymmetric, hero section occupies 70% of the screen, diagonal flow
• Differentiation: Unique font pairing, bold typography hierarchy

• Hero section uses large-size headings (4-6rem)
• Scroll-triggered fade-in animations
• Glass morphism CTA buttons
• Responsive grid for feature display

• Purpose: Clearly display data and support quick decision-making
• Style: Pragmatic + exquisite, using IBM Plex Sans, dark theme
• Layout: Grid system, card-based layout, data visualization priority
• Differentiation: Subtle animation transitions, hover to show detailed information

• Dark background to reduce eye strain
• Cards use soft shadows and borders
• Charts use striking accent colors
• Skeleton screens for loading states

• Purpose: Reusable, customizable button system
• Style: Flexible, supports multiple variants
• Technology: Use styled-components or CSS modules
• Differentiation: Unique hover effects and loading states

• Primary, secondary, text button variants
• Size variants (small, medium, large)
• Loading and disabled states
• Smooth transition animations

• ✅ Semantic HTML (

  <header>

  ,

  <nav>

  ,

  <main>

  ,

  <article>

  )
• ✅ BEM naming convention or CSS Modules
• ✅ CSS variables for colors and spacing
• ✅ Mobile-first responsive design
• ✅ Accessibility (ARIA labels, keyboard navigation)
• ✅ Performance optimization (image lazy loading, font optimization)

• ❌ Inline styles (except for dynamic values)
• ❌ Unnecessary

  !important

• ❌ Hard-coded color values (use CSS variables)
• ❌ Unoptimized images
• ❌ Meaningless class names (

  .box1

  ,

  .container2

  )

• Fonts: Google Fonts, Font Squirrel
• Colors: Coolors.co, Adobe Color
• Animations: Framer Motion (React), Anime.js, GreenSock
• Icons: Heroicons, Lucide, Phosphor Icons
• CSS Frameworks: Tailwind CSS (custom configuration), styled-components

• ❌ Bootstrap, Material-UI (prone to generic appearance)
• ❌ Default Tailwind CSS configuration (needs customization)

• Chose a unique font combination (not Inter/Roboto/Arial)
• Color scheme has a clear aesthetic direction
• At least 1-2 carefully designed animations
• Layout is not a simple centered grid
• Has unique visual details (backgrounds, textures, shadows)
• Responsive design looks good on mobile and desktop
• Accessibility standards are met (contrast, ARIA)
• Code is clear and maintainable
• Performance is good (no janky animations, fast loading)

Creative interpretation is key. Don't ask users "What color do you want?"; instead, make bold design decisions based on context. Every design should be unique. Alternate between light/dark themes, fonts, and aesthetic styles across different projects.

Strive for excellence, not perfection. A design with strong personality is better than a "safe" but mediocre one. Dare to experiment and surprise users.