Design & UX

Lay out a screen with disciplined spacing, sizing, and grids — every value on one base unit (8px/4px scale), content aligned to a grid, proximity and whitespace doing the grouping, and space establishing visual hierarchy. Replaces arbitrary pixel values and ad-hoc alignment with a system. Also carries the spatial visual-hierarchy/alignment/composition fundamentals. Trigger when asked to design or critique a layout, set spacing/padding/margins, build a spacing scale or design tokens, choose or...

Choose and design UI icons that are understood, not just decorative — universal metaphors, one consistent style, text/accessible labels where meaning isn't obvious, legible at small sizes, and adequate touch targets. Replaces ambiguous icon-only buttons and mixed icon styles with a system. Trigger when asked to add or pick icons, design an icon set, decide filled vs outlined, label icons, fix inconsistent/ambiguous iconography, or choose between a system library (SF Symbols/Material) and cust...

Design or critique a product's color palette and system — base hue, harmony, neutrals, semantic colors, tonal scales, and tokens. Applies the always-true core and gates context-dependent decisions (dark mode, brand expressiveness, accessibility trade-offs). Trigger when creating a color palette, choosing UI colors, building a color system, setting up color tokens, or reviewing a palette for issues.

Design or critique a user-onboarding flow — the first-run experience that gets users to value fast. Gates context-dependent choices (onboarding method, progressive profiling, product tours) and applies the always-true core. Trigger when designing welcome screens, first-run experiences, product tours, activation flows, or when onboarding drop-off needs improving.

Design or critique an offboarding flow — canceling a subscription, unsubscribing, or deleting an account. Leads with the ethical stance (leaving must be easy and respectful — hiding the exit is a dark pattern), applies the always-true core (findable exit, preserve goodwill, prevent accidental destruction, explain consequences, ask feedback respectfully, offer genuine alternatives, close with a recovery path) and gates the retention levers (incentive offers, value reminders, confirmation frict...

Design or critique how a product prevents, surfaces, and recovers from errors — input/validation errors, system & network failures, AI/prediction failures, destructive actions, and 404/dead-end pages. Leads with prevention (most errors are designable away), applies the always-true core (validate without interrupting, write recoverable messages, give a safety net, never dead-end) and gates context-dependent levers (confirm vs. undo, validation timing, humor, degradation, transparency vs. secur...

Design or critique a checkout, cart, payment, or booking flow — the path from "ready to buy" to "order confirmed." Applies the conversion-protecting core (guest checkout, transparent cost summary, inline validation, processing feedback, confirmation) and gates context-dependent levers (name fields, payment-method count, single- vs. multi-step, booking date pickers, promo-code prominence) with trade-offs. Trigger when designing or reviewing a checkout page, shopping cart, payment form, card-en...

Design or critique tooltips and contextual hints — decide when a tooltip clarifies vs. when it's a crutch for unclear design, and apply placement, styling, and brevity rules. Trigger when the user asks to design or review tooltips, hover hints, info icons, contextual help bubbles, or asks whether something needs a tooltip.

Design or critique data tables and lists — scannable structure, alignment rules (left for text, right for numbers), sorting/filtering, row interactions, and the right list type for the content. Trigger when the user asks to design or review a data table, data grid, admin table, list view, email/feed list, or asks how to present tabular or structured data.

Design or critique selection controls — pick the right control (checkbox, radio button, toggle switch, dropdown, slider, picker) for the choice being made, and apply labeling, alignment, and state best practices. Trigger when the user asks to design or review checkboxes, radio buttons, toggles/switches, dropdowns, sliders, range filters, or any "which control should I use" question.

Design or critique search experiences — search input, auto-suggest, results page, filtering/sorting, and zero-results recovery. Matches search features to how users actually seek (known-item vs. exploratory) and gates levers like rich suggestions, filter layout, and chips. Trigger when the user asks to design or review search, a search bar, autocomplete/auto-suggest, search results, filters, sorting, or a "no results" page.

Design or critique notifications — pick the right type (badge, banner, snackbar, toast, alert, push) for the message's urgency, and respect user attention with timing, frequency, and opt-out controls. Trigger when the user asks to design or review notifications, toasts, snackbars, badges, banners, alerts, push notifications, or a notification strategy.

Design or critique navigation systems — match the nav pattern (top bar, sidebar, tabs, hamburger, mega menu, bottom nav) to the information architecture, and apply wayfinding, header, breadcrumb, and pagination best practices. Trigger when the user asks to design or review navigation, menus, navbars, sidebars, tabs, breadcrumbs, headers, pagination, or asks "how should users move around" a site or app.

Design or critique modals, dialogs, alerts, popovers, and bottom sheets — gate WHEN interrupting users is justified, then apply dismissal, title/button, and focus best practices. Trigger when the user asks to design or review a modal, dialog, popup, overlay, confirmation, alert, permission request, lightbox, or bottom sheet — or asks whether something should be a modal at all.

Design or critique UI menus — pick the right menu type (dropdown, cascading, contextual, single/multi-select, search, inline) for the action set, and apply item ordering, grouping, labeling, and state best practices. Trigger when the user asks to design or review a menu, dropdown, context/right-click menu, overflow (⋮) menu, or asks how to organize actions into a menu.

Design or critique loading states and progress indicators — match the feedback type (spinner, text, determinate bar, skeleton, progress tracker) to the wait duration and task structure, and manage perceived performance. Trigger when the user asks to design or review loaders, spinners, loading states, skeleton screens, progress bars, progress trackers, steppers, or multi-step flow progress.

Design or critique forms and input fields — field selection, labels, layout, validation, error states, and submission. Applies the always-true core (minimal fields, one column, labels outside inputs, inline validation) and gates levers like multi-step splitting, floating labels, and smart defaults. Trigger when the user asks to design, build, or review a form, signup/checkout/survey fields, input validation, or error messages.

Design or critique UI cards — one-topic, scannable cards with clear hierarchy, the right container style (elevated, outlined, flat), and restrained shadows. Trigger when the user asks to design or review cards, card layouts, card grids, content tiles, user/profile cards, or a browse view built from cards.

Design or critique UI buttons — pick the right button type for the action's importance, apply sizing/label/state best practices, and gate stylistic levers like shape, shadows, FABs, and icon-only buttons. Trigger when the user asks to design, choose, style, or review buttons, CTAs, button labels, button hierarchy, or button states.

Run a structured mobile-responsiveness audit on a design, screen, or component — viewport adaptation and reflow, orientation, touch-target size and spacing, thumb reachability, mobile input ergonomics, gesture safety, and mobile readability/content priority. Produces a severity-rated issue list with concrete fixes. Use when reviewing whether a UI works on phones/tablets, or as a validation step after generating mobile or responsive UI.

Audit interface copy — labels, buttons, errors, empty states, tooltips, notifications, form hints — against UX-writing standards. Produces a severity-rated issue list with concrete rewrites. Use when reviewing UI copy for clarity, tone, and consistency, or as a validation step on any generated screen.

Run a structured information architecture audit on a sitemap, navigation tree, category structure, menu labels, or multi-screen product. Produces a severity-rated issue list with concrete fixes — catches scheme/task mismatches, narrow-and-deep hierarchies, low-information-scent labels, inconsistent labeling systems, single-path findability, and dead-end pages. Use when auditing IA, site structure, categories, taxonomy, or labels, or as a validation step after generating navigation or any mult...

Run a structured usability audit of any UI against Nielsen's 10 heuristics. Produces a severity-rated, prioritized issue list — each finding tagged with the violated heuristic and a concrete fix. Use when auditing a screen, flow, or component for usability problems, or as a validation step after generating UI.

Audit a UI, flow, or copy for dark (deceptive) patterns — design that manipulates users into unintended actions. Produces a prioritized findings list naming each pattern, its intent, severity, and an honest-design fix. Use when reviewing conversion flows, checkouts, paywalls, sign-ups, or cancellation flows for ethical design issues.