Fig. 00 — Gathering
Condensing your library.
Quiet field notes about capture, design memory, and making references useful to the agents beside you.
01Build a UI state reference checklist for one task: empty, loading, success, error and recovery. Record what you saw and what still needs testing.
Read article
02Record how a layout changes with viewport width. Use a responsive behaviour note with capture conditions, observed transitions and explicit unknowns.
Read article
03Turn a UI motion reference into a usable note: trigger, starting state, transition, end state, interruptions and a reduced-motion alternative.
Read article
04Annotate a design reference with a precise target, an observation, an interpretation and a proposal. Includes a worked example and a correction method.
Read article
05Compare competing interfaces on the same task. Keep source-linked observations, unknowns and design hypotheses separate from actual usability findings.
Read article
06Learn what a visual reference library contains, how it differs from a moodboard, and how to build one you can retrieve from later.
Read article
07A lightweight system for organizing design inspiration by future decisions, with fewer tags, useful notes, and a review habit.
Read article
08A practical Chrome workflow for saving website inspiration with its source, rationale, capture state, and a retrievable label.
Read article
09Compare moodboards and visual reference libraries by purpose, lifespan, structure, and the design decisions each one supports.
Read article
10Understand what a link, screenshot, preview, and durable capture preserve—and choose the lightest format that supports your design decision.
Read article
11Convert a pile of visual references into a focused design brief with sourced principles, constraints, decisions, and explicit unknowns.
Read article
12Give coding agents focused visual evidence, explicit constraints, source-linked decisions, and a runnable acceptance check instead of a vague style prompt.
Read article
13A source-aware method for turning repeated visual decisions into candidate design tokens without pretending screenshots contain exact systems.
Read article
14Preserve where a design reference came from, what was captured, and how your notes derive from it so evidence remains useful and auditable.
Read article
15Understand what local-first means for a visual reference library, including control, offline access, sync, deletion, backups, and private-source boundaries.
Read article