UX sprint U1: three directions, IA, screens, flows, components, tokens, strings

Three visual directions (Skärgård, Kvitto, Kalas) as self-contained HTML pages with
every SPEC §13.3 screen in light and dark, Swedish, plus PNG exports and the exporter
script. Direction-independent docs: ia.md, screens.md, flows.md, components.md,
tokens.md (values for all three directions), strings.csv (key,en,sv,notes), and the
comparison with a recommendation in directions/README.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/ux/directions/export-png.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+# Export every phone frame of one direction to <dir>/png/<frame-id>.png at 2x.
+# Usage: docs/ux/directions/export-png.sh docs/ux/directions/<n>-<slug> [frame-id ...]
+# Needs Google Chrome (macOS path below or CHROME=...). The page must implement ?list=1 and ?frame=<id>.
+set -euo pipefail
+dir="$(cd "$1" && pwd)"; shift
+chrome="${CHROME:-/Applications/Google Chrome.app/Contents/MacOS/Google Chrome}"
+page="file://$dir/index.html"
+run() { "$chrome" --headless=new --disable-gpu --hide-scrollbars --no-first-run --virtual-time-budget=10000 "$@" 2>/dev/null; }
+if [ "$#" -gt 0 ]; then ids=("$@"); else
+  ids=()
+  while IFS= read -r line; do ids+=("$line"); done < <(run --dump-dom "$page?list=1" \
+    | sed -n '/<pre id="frame-list">/,/<\/pre>/p' | sed -e 's/<[^>]*>//g' | grep -v '^[[:space:]]*$')
+fi
+[ "${#ids[@]}" -gt 0 ] || { echo "no frames listed by $page?list=1" >&2; exit 1; }
+mkdir -p "$dir/png"
+for id in "${ids[@]}"; do
+  run --window-size=411,891 --force-device-scale-factor=2 --screenshot="$dir/png/$id.png" "$page?frame=$id"
+done
+echo "exported ${#ids[@]} frames to $dir/png"