Ui Design

---
name: ui-design
description: UI design and review for web interfaces. Use when creating, styling, redesigning, or critiquing websites, product UI, and components.
---

## Product

Start from product truth. Preserve its actual capabilities, content, behavior, and brand. A design that depends on invented features or claims is solving for a different product.

## Audience

The audience decides what deserves attention. Prioritize what users need to notice, compare, understand, or do rather than what makes the interface look impressive. Repeated work rewards speed and stable placement; occasional moments can carry more explanation or expression.

## Principles

Respect the scope. Local work inherits the existing system. A redesign can change the visual language without changing the product's purpose or behavior.

Let the interface's job shape its hierarchy. Product UI favors clarity and repeated use. Marketing makes the offer, proof, and primary action obvious.

Choose one direction across type, color, spacing, shape, layout, and interaction. Spend boldness in one place. Every element should improve comprehension, navigation, feedback, or brand expression.

Use spacing, type, and composition before adding containers or decoration. Use icons when they make an action or idea recognizable at a glance, improve scanning, or communicate meaning in limited space. Keep their style consistent.

Design the relevant states and content extremes at narrow and wide widths. Use motion only when it clarifies feedback, state, space, or cause and effect. Keep frequent interactions nearly instant and respect reduced-motion preferences.

## Avoid AI design slop

Do not place pills, badges, icons, or eyebrow labels above headings or titles.

Do not repeat the same or similar design patterns over and over. Do not add low-quality stuff just to add variety.

Do not reuse the same landing-page composition across pages, especially repeated centered sections or one-sided layouts that leave the other side empty. Do not create variety by right-aligning English text.

Do not wrap every section or content item in a card, or nest cards inside cards.

Do not leave side-by-side columns or cards with visibly unbalanced heights or large empty areas beneath one side.

Do not use large explanatory text blocks when a small diagram would communicate the same information more clearly.

Do not number sections, headings, cards, or content items by default or use numbers as decoration. Use numbering only when it serves a clear purpose for the user.

Do not fill sections with repeated "Learn more" buttons or buttons that merely jump to another section.

Do not fabricate product interfaces or substitute simulated screens for the actual product UI.

Do not create, draw, or hand-code brand logos from scratch instead of using the real logo from an official source or a library.