AI Engineer Summit 2024 • Design Principles

Good Design Hasn't Changed with AI

John Pham from SF Compute explains why the four pillars of design—Speed, Trust, Accessibility, Delight—are more critical than ever in the AI era. When feature parity is commoditized, design becomes your competitive moat.

"In the age of AI, where prompt and vibe coding is a very big thing now, feature parity is no longer a product differentiator. The key differentiator is the very human thing which is everything that is a part of design."

— John Pham, SF Compute

Watch

<400ms

Speed Threshold

Design Pillars

60fps

Frame Rate

TAM Growth

Market Impact

Design is the New Competitive Moat

The fundamental insight: AI has leveled the playing field for feature implementation. Anyone can use Claude Code, Cursor, or Copilot to build functionality. The moat is no longer technical capability—it's taste, care, and attention to detail.

John Pham opens with a provocative thesis: "The principles of good design hasn't really changed." What has changed is that these principles now matter more than ever because they're the only thing differentiating products in an AI-saturated market.

"Design is how people experience your product. This includes every single touch point for your users: all of your UIs, your APIs, your error messages, all of your docs, your emails, your tweets."

— John Pham, SF Compute

The Four Pillars of Design

John introduces a timeless framework that remains unchanged despite AI advances. These four pillars are sequential: Speed wins their first click, Trust keeps them around, Accessibility grows your market, Delight turns users into superfans.

Speed: Wins Their First Click

Speed is about perceived time, not actual time. Most humans can only perceive stuff in under 400 milliseconds. If you can maintain 60fps, everything feels smooth and responsive.

<400ms

Instant perception

60fps

Smooth animations

Core

Web Vitals

"Speed wins their first click. If it's slow, nothing else matters." — John Pham

Trust: Keeps Them Around

Trust is built through conveying state, preventing errors, and setting expectations. Your products should never tell lies. They should care and forgive user mistakes.

Convey state: Always show what's happening

Prevent errors: Guide users away from mistakes

Set expectations: Be honest about timing

"We made a deliberate revenue trade-off to not accept certain customers because it would hurt long-term trust." — John Pham on SF Compute's pricing strategy

Accessibility: Grows Your Total Addressable Market

Accessibility isn't a "nice to have"—it's a business multiplier. Screen readers, motion preferences, semantic HTML—these expand your market, not shrink it.

Screen reader compatibility

Respect prefers-reduced-motion

Semantic HTML with proper labels

Form autocomplete attributes

"I don't think vomiting or the number of people who vomit during your product experience is a KPI that you want to increase." — John Pham on motion sickness

Delight: Turns Users into Super Fans

Delight is care, rewards, and story. It's the thoughtful details that make users tweet about your product, share screenshots, and become advocates.

Show care: Attention to detail matters

User rewards: Celebrate successes

Story: Create narrative around experience

"We made our SSN collection—the most boring, high-friction thing—delightful with a 14KB fog animation using just CSS transforms." — John Pham

Technical Examples from SF Compute

John shares concrete examples from SF Compute's product, showing how the four pillars translate to real implementation. These aren't abstract concepts—they're battle-tested patterns.

Example 1: SSN Collection Made Delightful

Challenge: US export laws require collecting SSN and address—high friction, boring, security-sensitive.

Solution: A 14KB fog animation using a single transparent PNG with CSS transforms. The fog density is controlled by opacity and layer count, creating a beautiful visual effect without WebGL or canvas.

14KB

Single PNG file

CSS

Transforms only

No WebGL

Browser primitives

"Every additional megabyte you ship to the client, there's a bunch of studies out there saying, hey, like this e-commerce website increase revenue by x% by dropping their pages bundle size."

— John Pham

Example 2: GPU Habitat Dashboard

Challenge: Show live GPU availability and state without heavy frameworks.

Solution: Live camera feed into "GPU habitat" using stacked divs (not WebGL/canvas). Video panning/zooming using browser primitives. Loading state showing "GPU to tensor core" animation.

Stacked divs for video effects

Browser-native video controls

Transparent state management

Flexible unit input (hours, days, weeks)

"We're saving users money by finding better pricing—revenue trade-off for long-term trust." — John Pham on proactive pricing optimization

Example 3: Trust-Building Onboarding

SF Compute's onboarding uses multiple trust-building techniques:

Expectation Setting

"This will take 3 steps and under a minute" - clear timeline

Progress Indicators

Gamification creates endowment effect

Time Zone Clarity

"This is in your time zone" - no confusion

Scheduling Defaults

Opt-in complexity, reduces friction

Notable Quotes

"Design is also owned by everyone. If you're building and shipping a product for people to use, you are part of the design process."

— John Pham

"We're not maximizing revenue because we think we should actually show care for our users and by showing care we actually increase revenue on the long-term horizon."

— John Pham