Works with Claude Code, Cursor & Windsurf
Taste & Craft
Taste is having opinions.
Good design comes from strong preferences, not safe defaults. What do you love? What do you hate? Answers shape everything. AI has no taste because it has no opinions.
Collect references obsessively.
Screenshot everything you admire. Build a library of UI moments that made you feel something. Steal like an artist. Your taste is the sum of your influences.
Define your product's vibe.
Is it playful or serious? Dense or spacious? Warm or clinical? Fast or deliberate? Pick adjectives and commit. Consistency comes from knowing what you're going for.
Handcrafted details compound.
One custom animation is nice. Ten small considered touches create magic. The difference between good and great is accumulated craft in places users barely notice consciously.
Constraints breed taste.
Limit your palette, your typefaces, your animation curves. Working within tight constraints forces creative solutions and creates cohesion AI can't replicate.
Prioritize feel over features.
How something feels matters more than what it does. A simple app that feels delightful beats a powerful one that feels dead. Invest in the intangibles. In product UI, "feel" shifts from emotional impact to responsiveness and flow—a fast, smooth interaction loop is the feel. On marketing pages, feel is more about mood, storytelling, and first impressions.
Micro-interactions & Animation
Animation is personality.
How things move reveals product character. Snappy and precise feels professional. Bouncy and playful feels friendly. Slow and elegant feels premium. Choose deliberately.
Use spring physics over bezier curves.
CSS ease-in-out feels mechanical. Spring animations (stiffness, damping, mass) feel organic. Libraries like Framer Motion make this easy. Springs respond to interruption naturally.
Stagger list reveals.
When multiple items appear, stagger them slightly (30-50ms delay each). Everything appearing at once feels like a page load. Staggered reveals feel orchestrated.
Design exits as carefully as entrances.
Most developers animate things in but let them disappear instantly. Exit animations should be faster than entrances but still present. Instant removal feels broken.
Motion should carry meaning.
Elements should move toward where they came from or where they're going. A modal sliding up should slide down to dismiss. Spatial consistency helps users build mental models.
Respect reduced motion preferences.
Some users get motion sick. Check prefers-reduced-motion and provide alternatives. Usually instant transitions work. Accessibility is part of craft.
Every interactive element needs hover feedback.
Buttons, links, cards, icons. If it's clickable, it should respond to hover. Doesn't need to be dramatic—subtle opacity, color shift, or tiny scale change works.
Choreograph loading states.
Don't just show a spinner. Fade content out, show progress, fade new content in. Treat loading as a transition between two states, not an interruption.
Scale animation to context.
Marketing pages can afford dramatic scroll-triggered reveals and narrative motion. Product UI needs animation that serves the workflow—state transitions, loading feedback, and spatial orientation. If a user sees it 50 times a day, it should be invisible by the 5th.
Color & Contrast
Monochromatic with subtle accents.
Monochromatic schemes with one or two subtle accent colors feel polished. Muted, earthy, and neutral tones signal intention.
Avoid bright, bold gradients.
High contrast, overly bright colors and colorful gradients (especially purple ones) scream AI-generated.
Never pure black or pure white.
Pure #000000 and #FFFFFF look unconsidered and harm readability. Use slightly muted versions. Never pair pure white text on pure black or vice versa.
Borders, Shadows & Spacing
Shadows should whisper, not shout.
Subtle shadows (2px blur, 1px Y-axis, 5% opacity #111111) add gentle separation. Large drop shadows and dramatic hover lift effects look AI-generated.
Pair subtle borders with subtle shadows.
12% opacity borders combined with minimal shadows create refined separation. But sometimes whitespace alone is enough. Don't add both when one suffices.
Commit to density or space.
Go heavily one direction: dense, information-rich UIs or spacious, breathing layouts. AI hovers in the middle. Picking a side helps you stand out. Marketing pages almost always want space—room to breathe sells confidence. Product UI depends on the use case: dashboards and data tools lean dense, onboarding and settings lean spacious. The worst outcome is being neither.
Border Radius
Border radius sets the tone.
Radius influences product feel. Uniform radius on everything looks lazy. Be intentional. Consider context, adjacent elements, and desired personality.
Capsule buttons need the full package.
Pill-shaped buttons can look premium or overly casual. They only work when paired with proper text sizing, button dimensions, colors, and restrained hover effects.
Visual Imperfection
Asymmetric layouts—in the right context.
Marketing and landing pages benefit from asymmetry: offset elements, varied column widths, uneven whitespace. It creates visual interest and stands out. But in-product UI, predictability is a feature. Users need efficiency, not surprises. Stick to established patterns—standard grids, consistent navigation, uniform components. Master the basics with beautiful, minimal execution. Exceptions: empty states, onboarding flows, and marketing-like moments inside your product (upgrade prompts, feature announcements) can break the mold.
Optical over mathematical alignment.
Align by eye, not numbers. A circle needs different padding than a square.
Handcrafted details.
Custom icons, unique illustrations. Things that clearly took human time.
Avoid stock patterns.
Generic hero sections, three-column grids, testimonial carousels scream template.
Subtle texture.
Noise, grain, paper textures (used sparingly) add warmth flat design lacks.
Imperfect shapes.
Slightly irregular borders, hand-drawn strokes. Perfect geometry feels cold.
Hover & Interactive States
Hover isn't lift-and-shadow.
Raising elements with heavy shadows is the AI default. Try subtle 1px movements, opacity shifts on borders, or changing icon color alone.
Subtle movements signal craft.
A 1px shift up or down, a border opacity change, or an icon transitioning color. Small details that feel intentional without screaming for attention.
Use pressed states sparingly.
Scale-down effects on press can add delight in B2C products. Avoid in B2B where restraint feels more professional.
Focus states: visible but not overpowering.
Subtlety feels intentional. Focus indicators should clarify what's active without dominating the interface. Custom rings beat browser defaults.
Layer disabled state opacity.
Reduce opacity at different amounts for icons, text, containers, and borders. Change the cursor too. Generic 50% opacity on everything looks lazy.
Loading & Feedback
Spinners for under 3 seconds.
Quick interactions deserve quick feedback. Spinners work well for sub-3-second waits. Pair with custom easing for a considered feel.
Progress bars for longer waits.
Over 3 seconds, show progress. Circular outline progress, segmented bars, or custom designs beat generic linear bars.
Skeleton UI with purpose.
Skeleton screens are great for layout-heavy loads. Don't over-design them. They should hint at structure, not become the feature.
Interaction Personality
Unique microinteractions.
Don't use default hover states. Design interactions specific to your product.
Playful easter eggs.
Hidden interactions, personality in 404 pages. Surprises feel human.
Imperfect timing.
Varied durations, organic easing, micro-delays that mimic hesitation.
Contextual feedback.
Error messages with personality. Success states that celebrate. Loading that entertains.
Progressive disclosure with character.
Reveal complexity gradually with crafted, not mechanical, transitions.
Considered sound design.
Audio feedback adds dimension when custom and intentional.
Content Authenticity
Real data, not lorem ipsum.
Design with actual content. Placeholder text creates placeholder thinking.
Genuine photography.
Real team photos, real product shots. Imperfect lighting is fine.
Written, not generated copy.
UI copy should sound like a person, not a content matrix.
Specific, odd numbers.
"127 customers" feels real. "100+ customers" feels rounded for effect.
Testimonials with voice.
Real quotes have verbal tics, incomplete thoughts, personality.
Dates and context.
Timestamps, version numbers. Evidence of ongoing human attention.
Typography Humanity
Typeface with personality.
Inter and SF Pro are everywhere. Consider fonts with more character for headlines.
Explore type foundries.
Don't default to Google Fonts. PangramPangram, Displaay, and Grillitype offer distinctive options. Paid fonts instantly elevate from AI-generated to carefully considered.
Pair two fonts, maybe three.
A display font for headlines, a readable body font, and occasionally a third for specific uses. Use minimal weights. Regular and medium often suffice.
Use OpenType features.
Many fonts have alternate characters and stylistic sets. Tools like Universal Sans let you customize character sets for exact personality.
Uppercase at small sizes only.
All-caps works for small buttons and section headers. Large all-caps feels aggressive. Headlines usually work better in sentence case.
Adjust tracking by size.
Tighten letter-spacing as text size increases. Loosen it for small all-caps to let letters breathe.
Varied hierarchy.
Not every heading needs the same scale. Some sections deserve more presence.
Manual kerning for headlines.
Large text shows spacing issues. Adjusting signals craft.
Comfortable line lengths.
45-75 characters because humans read better that way.
Use text-pretty.
Avoid orphans and awkward line breaks. CSS
text-wrap: prettyprevents single words on their own line.Typographic details.
Proper quotes, em dashes, ligatures. Details that show care.
System fonts feel native.
Don't overlook system font stacks. They make products feel native to the device (iOS vs Android, Mac vs Windows). Sometimes that's exactly what you want.
Buy a single weight.
A unique typeface elevates everything. You don't need the full family. A single weight (like Semibold) can cost $20-30 and instantly separates you from AI defaults.
Monospace for data and details.
Monospace fonts work for numbers, small section headers, and giving a financial or scientific feel. Find a typeface with matching Sans and Mono versions (like Roobert by Displaay) for extra cohesion.
Two typefaces, three max.
Stick to two fonts. Maybe three if you need a display font for headings or a monospace for details. Beyond three looks messy and uncared for.
Iconography
Never mix icon packs.
Pick one icon library and stick with it. Use different variants within the same pack for interactions: stroke for default, duotone on hover, solid for active/selected.
Keep icons between 10px and 32px.
Below 10px icons become illegible. Above 32px, consider illustrations or abstracted UI instead of just scaling up icons.
Trust the icon grid.
Quality icon packs are designed on consistent grids. If you stick to one pack, icons should already be optically balanced. No need to resize individually.
Match icon stroke to font weight.
Icon stroke width should feel related to the font weight nearby. Thin icons with bold text (or vice versa) creates visual tension.
Animate icons selectively.
Subtle icon animations add personality, but good animated packs are rare. Build simple morphing animations yourself for key interactions, use static variants from your icon pack elsewhere.
Choose icon packs carefully.
Lucide is basic and overused by AI. Phosphor is better. Hugeicons is better still. Custom icons are rarely needed unless you're a large company or want extreme polish (see ElevenLabs for inspiration).
Layout & Structure
Design for each viewport.
Each screen size should feel custom-designed for that viewport. Different layouts for mobile vs desktop, not just scaled versions.
Narrow columns are valid.
A narrow central column for blog content often beats full-width. Full-width layouts are an AI favorite. Question them. This especially applies to marketing content pages (pricing, blog, about). Product interfaces often need wider layouts to accommodate side panels, tables, and toolbars—don't force a narrow reading column on a workspace.
12-column grids as foundation.
Grid systems help when you're not confident with wild layouts. Master the basics (simple layouts, beautiful colors, good fonts, strong copy) before revolutionizing structure.
Break the grid for delight.
Small graphical elements or interactions that escape the grid add human touch. AI almost never does this.
Sticky elements without blur.
Sticky headers and sidebars can keep key actions available. But background blur on sticky sections is an AI giveaway. Just because you can blur doesn't mean you should.
Avoid scroll hijacking.
Scroll-snap and parallax usually cause confusion before clarity. Scroll-triggered animations work only when used sparingly and with purpose.
Component Design
Cards are easy to overdo.
Not everything needs a card. Avoid cards inside cards inside cards. Sometimes inline content with a card appearing on hover feels more refined.
Design card interiors intentionally.
Whitespace, layout, subtle icons, hover-only actions. Cards deserve interior design, not just a border and shadow.
Validate forms inline at input.
Inline validation at the moment of input beats on-submit errors. Explore floating, top-aligned, and inline labels. Always use placeholders.
Tooltips can hide personality.
Use tooltips to reduce on-screen clutter and progressively disclose info. They're also great for hidden easter eggs and personality.
Choose controls by context.
Tabs, segmented controls, dropdowns. Experiment with all. What works on desktop may need a different pattern on mobile.
Empty states should direct action.
Never leave empty states blank. Guide users toward what to do next. Add personality through copywriting or illustration. Empty states are one of the biggest opportunities in product UI and one of the most neglected—they're the first thing a new user sees in each section. Marketing pages rarely have them, but product interfaces are full of them.
Design toasts with care.
Capsule-shaped, icon, brief text, dismiss button, smooth animation. Good error copy that doesn't confuse. Toasts are overlooked. Don't overlook them.
Modals are design opportunities.
Almost always treated as afterthoughts. Subtle enter/exit animations and considered layouts make modals feel crafted.
Anti-Patterns
No template sections.
Hero + subhead + CTA. Three feature cards. FAQ accordion. Find different structures. This applies strongly to marketing pages, where template structures are instantly recognizable. In product UI, familiar patterns are a feature—users expect standard navigation, consistent card layouts, and predictable form structures. The craft is in execution quality, not structural novelty.
Use icon states intentionally.
Different states deserve different visual weight. Use stroke icons at lower opacity for default states, duotone on hover to show interactivity, and solid when active. This creates hierarchy without adding clutter.
Transform, don't swap.
When icons change state, morph them rather than crossfading. A hamburger that rotates into an X feels considered. A play button that becomes pause feels intentional. These micro-interactions signal craft.
No gradient buttons without reason.
Gradients for decoration feel like a preset.
Don't let frameworks show.
Default Bootstrap, Material UI, or Tailwind components are instantly recognizable. Customize colors, spacing, border radius, and shadows until no one can guess what you built it with.
Avoid AI-generated imagery.
People spot it. Weird hands undermine authenticity.
No lazy dark mode.
Inverting colors feels automated. True dark mode is designed. Never use pure black (#000000). It's too harsh and creates excessive contrast. Aim for dark grays like #1a1a1a or #18181b. Reduce white text to 90-93% opacity for comfortable reading.
Marketing & Landing Pages
First impression is everything.
You have seconds. Hero sections, scroll pacing, and narrative flow matter more than component consistency. The page is a story—build tension, deliver value, earn the click.
Brand expression lives here.
This is where custom illustrations, bold typography, experimental layouts, and personality flourish. Be brave. Marketing pages are the place to take creative risks that would be distracting in a product.
CTAs should feel inevitable, not pushy.
The page should build a case so well that the button feels like a natural next step, not a sales tactic. If the CTA feels like it's shouting, the page above it didn't do its job.
Performance is invisible design.
Core Web Vitals affect SEO and first impressions. Lazy-load below the fold, optimize images, defer non-critical scripts. A slow marketing page undermines every design choice above it.
In-App Product UI
Consistency beats novelty.
Users build muscle memory. Surprise them with quality, not unfamiliar patterns. Save creative risk for marketing-like moments inside the product (upgrade prompts, feature announcements, onboarding).
Design for the 100th session, not the 1st.
First impressions matter, but daily-use interfaces need to avoid fatigue. Subtle, functional, calm. The best product UI disappears—users think about their work, not the interface.
States are the real design work.
Loading, empty, error, partial, offline, permission-denied. These states are where most product UI falls apart—and where craft compounds. Design every state, not just the happy path.
Power users are watching.
Keyboard shortcuts, bulk actions, density toggles. Respecting advanced users signals that a human who uses tools designed this. Efficiency features are a form of craft.
Data is content.
Tables, charts, lists—these aren't afterthoughts. Typography, alignment, and whitespace within data-heavy views is where product UI earns its craft. Treat data display with the same care as a marketing hero section.
jamesfrewin.com