Design Brief Library · Paced Render

THE BRIEF
MACHINE.

A curated library of six design briefs for the moments interface design matters most — error recovery, first use, loading, empty state, AI uncertainty, destructive action. The brief renders at reading pace.

6 hand-written briefs Paced character render Vanilla JS [ INTERACTIVE ]
At a glance 30-second read

What it is

A curated library of six design briefs for the interface moments most apps skip — error recovery, first use, loading, empty state, AI uncertainty, destructive action. Each brief renders at reading pace to slow the designer down at the moment of decision.

Maps to

Design Engineer · Product UI Engineer · Frontend (AI products) · Design Operations

Skills demonstrated

  • Domain knowledge of high-stakes UX moments (the briefs themselves)
  • Paced character render with adaptive pause on punctuation
  • Library architecture ready to plug into an LLM later
Vanilla JS CSS SessionStorage
// The Brief

Most brief generators produce long lists. This one produces five sections: core tension, interaction approach, motion language, constraints, first sketch. Enough to think from.

Six briefs cover Error Recovery, First Use, Loading State, Empty State, AI Uncertainty, and Destructive Action. Hand-written, not AI-generated.

⌘ ↵ to generate 0 / 400
// pick a sample · 6 in the library
// BRIEF #042 [ GENERATING ]