Integrate Storybook and portable UI design workflow

openspec/schemas/wealth-ledger-sdd/templates/design.md

@@ -14,6 +14,39 @@
 
 <!-- Key design decisions with rationale and alternatives considered -->
 
+## UI/UX Applicability and Package
+
+<!-- Select new/changed, reuse, or N/A with a concrete reason. For N/A remove
+     the remaining package fields. Unchanged UI does not need a new mockup. -->
+
+**Applicability and scope:**
+
+**Package revision:**
+
+<!-- Describe affected screens, applicable states, interactions and responsive
+     behavior inline. For reuse identify the exact immutable archived package,
+     using its store ID and path from the canonical OpenSpec root, the reused
+     portion and differences. A mutable catalog URL is not identity. -->
+
+**Screens, states and interactions:**
+
+**Responsive behavior:**
+
+**Reused source and differences:**
+
+<!-- Inline Markdown is the default portable material. Only when necessary,
+     list local PNG/SVG exports under visuals/ with the fields below; otherwise
+     remove this table and state that the package is fully inline. SVG must be
+     self-contained: no scripts, handlers or external assets/fonts. -->
+
+| Material ID | Relative path | Screen/state and purpose | SHA-256 |
+| --- | --- | --- | --- |
+| <!-- id --> | <!-- visuals/file.png --> | <!-- purpose --> | <!-- file digest --> |
+
+<!-- One approval covers this entire Design package. File digests bind bytes;
+     they do not prove approval. Do not self-hash Design. Materials must remain
+     accessible across sessions and archive without external accounts. -->
+
 ## Delivery Map
 
 | Area | Status | Architectural outcome or N/A reason |