From cedf30ba30920a2d6fdc9191750ec692a2e80c7d Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Tue, 19 May 2026 14:41:22 -0700 Subject: [PATCH] feat(skills): design picker UI (Phase 1 templates index + Phase 2 fine-tune) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit design-picker.html is the picker shell — a single HTML file with two phases. Phase 1 (templates index): editorial-catalog layout (Source Serif 4 italic + Hanken Grotesk on warm-tinted OKLCH neutrals). Sticky compact palette bar at the top. 3-up specimen grid where each card renders the template's design.html cover via client-side token substitution + blob URL. Roman-numeral folio markers, hairline rules. Phase 2 (fine-tune): sidebar with palette / typography / corners / density / depth / motion / background shader sections. Right pane shows the chosen template's design.html in an iframe with --primary / --secondary / --tertiary / --accent / --tp-* tokens injected on every control change. Shader background uses three.js (postprocessing EffectComposer with optional HalftonePass). Surface example card reacts only to corners/density/depth picks — does not leak to other surfaces. Per-swatch text color computed from luminance so palette previews stay legible. Motion change re-runs hero entrance animation and scrolls the iframe preview to the top. Phase 1 palette pick carried forward into Phase 2. --- .../hyperframes/templates/design-picker.html | 6540 ++++++++++++++++- 1 file changed, 6165 insertions(+), 375 deletions(-) diff --git a/skills/hyperframes/templates/design-picker.html b/skills/hyperframes/templates/design-picker.html index 6cb6f0878..97b420c0c 100644 --- a/skills/hyperframes/templates/design-picker.html +++ b/skills/hyperframes/templates/design-picker.html @@ -3,8 +3,18 @@ + Design your visual direction + +
-
1. Direction
+
1. Template
2. Fine-tune
+ +
- -
-
-

Pick a direction

-

- Each option is a complete visual identity. Pick one, then fine-tune. -

-
-
Palette
-
-
- -
+ +
+
+
+ i. +

Palette

+
+
    +
    + +
    +
      +
      +
      - -
      + +
      -
      ◐
      -
      Theme
      +
      ◈
      +
      Living Background
      -
      -
      - -
      -
      -
      ▦
      -
      Structure
      -
      +
      +
      +
      -
      @@ -686,7 +1764,7 @@

      Pick a direction

      ◉
      Color
      -
      +
      @@ -707,7 +1785,7 @@

      Pick a direction

      -
      ≡
      +
      ▦
      Density
      @@ -732,17 +1810,62 @@

      Pick a direction

      Pick a structure to preview
      + +
      - -
      - design.md - — edit, then copy + DESIGN.html + — copy and paste back to your agent
      @@ -763,9 +1886,57 @@

      Pick a direction

      + + +