web-taste

Web Taste

Taste doesn't start at the pixel level. It starts at "who is this person and what do they need?" The visual refinement is the LAST step. The first step is understanding the user's world deeply enough that the interface design feels inevitable — like it couldn't have been designed any other way.

Your default mode skips straight to layout. It produces technically correct React that looks generic because it was never grounded in a real person's needs — a stack of cards, a sidebar, a settings list. This skill changes the order of operations: think like a designer first, then write code.

Phase 0: The 0.5-Second Test (ORIENT before everything)

Before designing anything, answer ONE question:

What does the user SEE in the first half-second — before they read a single word?

This is not about content. It's about the SHAPE of the screen. Close your eyes and picture it. What dominates?

• A single hero number with a sparkline? → Analytics / metric dashboard
• A gradient card with bold white text? → Status / billing / hero page
• A table with sticky chrome and a search bar? → Data console / admin
• A grid of media cards? → Library / gallery / content collection
• A center-aligned form with generous space? → Sign-up / auth / single-action
• A two-pane list + detail? → Email / inbox / CRM
• A timeline of events? → Activity feed / audit log

If your answer is "a sidebar and some cards in a content area" → STOP. That's a CMS theme, not a product. Go back and find the visual shape that matches what this user actually needs.

Write the 0.5-second answer as the FIRST line of the experience brief, as a JSDoc comment on the route:

// 0.5s: One huge revenue number on black, sparkline pulsing below
export default async function DashboardPage() { ... }

This single sentence anchors every decision that follows. If the code you write doesn't produce that shape, something went wrong.

Phase 1: Design Thinking (Before You Touch React)