spike: hardware/board selection UX playground - #222
Merged
Conversation
Four surfaces from one board-metadata schema: boards catalog (tiers/price/sort), provisioning picker (SoC match), device-card hardware pane (wired-pin callouts), and pin discovery (color x rhythm patterns on free pins). All board drawings are generated SVG from per-pin metadata - no hand-drawn images. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Gate feedback: the pin row is now the layout unit (u = pitch drives pad/cell/font sizes), so every pin holds cells simultaneously - name cell + capability/connection/swatch cells inline, like classic pinout diagrams. Top-edge terminals get band rows with leader lines (QuinLED). New board-pinout section documents the design language (row/cell/rail/ band/leader). Discovery drops motion patterns for solid color codes: color-order pretest (K-R-G-B-K-B-G-R-K, pick what you see) then combinatoric pixel-count x color-set computed from free-pin count. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ge cheat sheet Pin names move inside the board (silkscreen-style) so outside cells share one start edge and align into columns. Order-test sequence is now the palindrome K-R-G-B-W-B-G-R-K: K bounds repeats, W marks center, reads the same either direction, and K/W survive any color-order permutation. DESIGN-LANGUAGE.md added as the vocab cheat sheet. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Anatomy card renders the QuinLED and pins every design-language term (Unit/Row/Cell/Rail/Band/Leader/Pad/Label) to the element it names - measured from the live SVG, not hand-positioned. Pin-identifying codes are now palindromes for the same reason as the order test: data direction is unknown, so a code and its reverse are indistinguishable. Coverage becomes c^ceil(n/2): 20 free pins -> 3 px x 5 colors, X-Y-X. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Off pixels between color digits so runs read unambiguously; no leading/trailing K so short strips (3 LEDs) still show 1-digit codes. A d-digit code occupies 2d-1 physical pixels; K is reserved as the separator so it never collides with a digit color. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
This was referenced Jul 31, 2026
Brings the spike branch up to date with main (225 commits) so the frozen UX-spike artifacts under spikes/hardware-boards/ can land beside the implementation they produced (lp-app/lpa-boards, PRs #228/#231/#236). Clean merge: the branch adds only new files in a directory that does not exist on main. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Yona-Appletree
marked this pull request as ready for review
August 1, 2026 16:49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
UX spike for board selection as a first-class feature (feature note: Planning/lp2025/_features/hardware - selection, pin discovery.md). Raw-HTML playground at
spikes/hardware-boards/index.html, iterated through five revs across two visual gates with Yona.What's in it
BOARDSJSON schema (identity/commerce + per-pinhwblock) drives one SVG renderer across four surfaces: catalog, provisioning picker, device-card hardware pane, pin discovery.u= pitch; pad/cell/font derive from it), so every pin holds annotation cells simultaneously. Top/bottom-edge pins (screw terminals) get band rows with leader lines. Vocabulary inDESIGN-LANGUAGE.md+ an annotated-anatomy figure in the page.Validation
Follow-up
yona-uxskill codifying this spike workflow is being written in a separate session.🤖 Generated with Claude Code