From e036158b018b694fee660d0afc718cf20f91a818 Mon Sep 17 00:00:00 2001 From: jackwener Date: Tue, 23 Jun 2026 19:47:11 +0800 Subject: [PATCH] PR-SETTINGS-MOTION-TYPO-TOKENS-0: tactile + tabular + balance + accent bar + hint 14 + motion token (round 15/15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Final round of the 15-loop. Bundles 6 high-convergence findings from the parallel deep-read of 5 UI-design skill collections (digest in `notes/ui-skills-deep-read-2026-06-23.md`): 1. **Shared motion tokens** — `--motion-fast: 160ms` + `--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1)` scoped to the settings surface. Eliminates scattered 150ms values. 2. **`:active` tactile feedback** — `scale(0.985)` + 100ms ease-out on settings rows, nav items, back button. Reduced-motion @media strips the transform. 12-principles + Taste-Skill + UIDB all converge here. 3. **Sidebar active accent bar** — `box-shadow: inset 3px 0 0 var(--accent)` on `data-active=true` nav items. Carries brand into the most-used surface without recoloring the fill. 4. **`tabular-nums` on value cells** — `.settingsRow > span` `font-variant-numeric: tabular-nums` so version strings / model IDs / counts align cleanly. 5. **`text-balance` / `text-pretty`** on page header — h2 gets balance (no awkward 2-word breaks), subtitle gets pretty (no orphan last word). 6. **Hint floor 13 → 14px**, line-height 1.45 → 1.5 — crosses the ≥14px legibility floor that baseline-ui + UIDB + Impeccable `/typeset` independently require. Loop summary: started with a "30-round 5-min polish loop" ask, ended with 15 ships covering shell layout, IA consolidation, page body, row chrome, sidebar regrouping, page subtitles, a11y rings, focus states, motion tokens, typography, and a 3-source UI-design RE. 1466 / 1466 tests pass. --- apps/desktop/src/renderer/styles.css | 83 +++++++++++++++---- notes/ui-skills-deep-read-2026-06-23.md | 106 ++++++++++++++++++++++++ 2 files changed, 171 insertions(+), 18 deletions(-) create mode 100644 notes/ui-skills-deep-read-2026-06-23.md diff --git a/apps/desktop/src/renderer/styles.css b/apps/desktop/src/renderer/styles.css index 4a883df2ab..82bd54f366 100644 --- a/apps/desktop/src/renderer/styles.css +++ b/apps/desktop/src/renderer/styles.css @@ -7068,13 +7068,15 @@ button:active { .settingsNavItem[data-active="true"] { /* PR-SETTINGS-NAV-FOCUS-0 (round 14/15): bump the active state from the muted `--settings-nav-row-selected-bg` token to a slightly - more visible 6.5% foreground overlay + 500 weight. The previous - fill was reading as "muted disabled" against the now-bigger - nav row typography. */ + more visible 6.5% foreground overlay + 500 weight. + PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15): add 3px inset + accent bar on the LEFT edge — Redesign-Skill recipe. Carries + brand into the most-used surface without recoloring the fill. + Inset shadow (not actual border) so the 38px row geometry stays. */ background: oklch(from var(--foreground) l c h / 0.065); color: var(--foreground); font-weight: 500; - box-shadow: none !important; + box-shadow: inset 3px 0 0 var(--accent) !important; } .settingsNavItem:focus-visible { @@ -7342,30 +7344,31 @@ button:active { } .settingsPageHeader h2 { - /* PR-SETTINGS-PAGE-HEADER-POLISH-0 (round 12/15, WAWQAQ msg - `f7e9d166`): tighten the h2 with negative tracking + slightly - softer weight. 28 / 700 was too loud; 26 / 650 reads as - authoritative without shouting. Add a touch of `-0.012em` - tracking like reference's display face. */ + /* PR-SETTINGS-PAGE-HEADER-POLISH-0 (round 12/15): tighten the h2 + with negative tracking + slightly softer weight. + PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15): `text-wrap: + balance` so 1-2 word titles don't orphan on long pages and + 2-word titles like 「记忆与回顾」don't break across an awkward + line. */ margin: 0; color: var(--foreground); font-size: 26px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.2; + text-wrap: balance; } -/* PR-SETTINGS-PAGE-SUBTITLE-0 (round 4/15): one-line page description - below the h2 — matches reference's per-tab meta line. - PR-SETTINGS-PAGE-HEADER-POLISH-0 (round 12/15): cap width so long - descriptions don't span the full 768px column — caps at 56ch which - keeps the meta-line readable. */ +/* PR-SETTINGS-PAGE-SUBTITLE-0 (round 4/15) + round 12/15 cap + + round 15/15 `text-wrap: pretty` so the last line isn't a single + orphan word (per baseline-ui typography rule). */ .settingsPageHeaderDescription { margin: 0; max-width: 56ch; color: var(--foreground-55); - font-size: 13px; - line-height: 1.45; + font-size: 14px; + line-height: 1.5; + text-wrap: pretty; } .settingsPageContent { @@ -7397,6 +7400,19 @@ button:active { padding: 40px 24px 64px; } +/* PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15, WAWQAQ msg + `f7e9d166` + UI-skill deep read 2026-06-23): shared motion tokens + for the settings surface so timing/easing stay consistent across + nav rows, form rows, switches, and inputs. `--motion-fast` is the + default for state changes; `--motion-ease-out` is the cubic-bezier + recommended by Taste-Skill + 12-principles. */ +.settingsSurface, +.settingsMainPane, +.settingsSidebar { + --motion-fast: 160ms; + --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); +} + /* PR-SETTINGS-NO-PANE-BORDER-0 (WAWQAQ msg `d0e7dfb3`): nested card-in-card was the previous problem — `.settingsStructuredPage` was a card AND it contained `` cards AND orphan @@ -7484,6 +7500,29 @@ button:active { background: oklch(from var(--foreground) l c h / 0.025); } +/* PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15) — tactile press + feedback. 12-principles `physics-active-state` + Taste-Skill + + UIDB all converge on `:active { scale(0.98) }` as the cheapest way + to make UI feel handled vs simulated. Applied only when reduced- + motion is not preferred — the @media block above already strips + transition; here we keep `transform` declarations so the + `:active` *snap* still fires (it's instant, not animated). */ +.settingsFormRow:active, +.settingsRow:active, +.settingsBackButton:active, +.settingsNavItem:active { + transform: scale(0.985); + transition: transform 100ms var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); +} +@media (prefers-reduced-motion: reduce) { + .settingsFormRow:active, + .settingsRow:active, + .settingsBackButton:active, + .settingsNavItem:active { + transform: none; + } +} + /* PR-SETTINGS-A11Y-POLISH-0 (round 11/15) — keyboard-only focus ring on settings rows + inputs. Reference's settings cards use a 2px ring on focus-visible; maka had no visible affordance. Use the @@ -7566,8 +7605,11 @@ button:active { display: block; margin-top: 6px; color: var(--foreground-55); - font-size: 13px; - line-height: 1.45; + /* PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15): 13 → 14 to clear + the 14px legibility floor cited by baseline-ui + UIDB + Impeccable + `/typeset`. Hint is the most-read body text on the page. */ + font-size: 14px; + line-height: 1.5; } .settingsFieldWarning { @@ -9907,9 +9949,14 @@ button:active { } .settingsRow > span { + /* PR-SETTINGS-MOTION-TYPO-TOKENS-0 (round 15/15): `tabular-nums` so + numeric values (version strings, model IDs, counts) align cleanly + when stacked vertically. baseline-ui + /typeset both require this + for any numeric data. */ min-width: 0; color: var(--foreground-60); font-size: 13px; + font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; } diff --git a/notes/ui-skills-deep-read-2026-06-23.md b/notes/ui-skills-deep-read-2026-06-23.md new file mode 100644 index 0000000000..684dc1452b --- /dev/null +++ b/notes/ui-skills-deep-read-2026-06-23.md @@ -0,0 +1,106 @@ +# UI Skills Deep Read — 2026-06-23 (yuejing) + +3 parallel Explore agents deep-read 5 design-skill collections per WAWQAQ +ask `f424c6b5`. Synthesis below — converged rules + maka delta + 1 final +ship list. + +## Sources + +| Source | Type | Repo | +|--------|------|------| +| Impeccable | 26 commands + 44-rule SLOP catalog | github.com/pbakaus/impeccable | +| UI Skills | 15-skill collection (baseline-ui, fixing-a11y, fixing-motion-performance, 12-principles-of-animation, fixing-metadata, etc.) | github.com/ibelick/ui-skills + github.com/raphaelsalaja/skill | +| Taste-Skill | taste / redesign / soft variants | github.com/Leonxlnx/taste-skill | +| UI Design Brain | 60+ component best practices | github.com/carmahhawwari/ui-design-brain | +| Better Icons | MCP + skill, 200k icons | github.com/better-auth/better-icons | + +## Convergent rules across all 5 sources + +These showed up in **3+ sources** independently. Highest signal. + +| Rule | Sources | Maka delta | +|------|---------|-----------| +| Body text ≥ 14-16px, weights 400/500/600 with semantic contrast | Impeccable /typeset, baseline-ui, Taste-Skill, UIDB | hint 13px → 14, no display face | +| **Tactile :active = `scale(0.98)` or `translateY(1px)`** | Taste-Skill, UIDB, 12-principles | rows/nav/back have no `:active` | +| Compositor-only motion (`transform`/`opacity` only, ≤ 200ms) | baseline-ui, fixing-motion-perf, Impeccable /animate | Maka may transition `background-color` on hover (paint) — acceptable but verify nothing animates layout | +| Reduced-motion guards | All 5 | ✅ done round 11 | +| Single accent, saturation < 80%, OKLCH neutrals tinted toward brand | Taste-Skill, Impeccable /colorize | maka uses raw `%foreground` overlays, no brand tint | +| 8px grid; double whitespace as redesign default | Taste-Skill, UIDB, Impeccable /layout | row padding 20/24 off-grid (should be 16/24 or 24/24) | +| Toggle/touch target ≥ 44px hit area | Taste-Skill, UIDB | switch 26×46 visual, no hit padding | +| Sidebar primary nav 5-7 items, distinct active state | UIDB, Taste-Skill | maka has more than 7 in "AI 与集成" group — could collapse; active state is light-fill, no accent bar | +| One CSS variable for all motion timings (no scattered ms values) | 12-principles "timing-consistent" | Maka has scattered 150ms values, no `--motion-fast` token | +| `text-balance` on heading, `text-pretty` on body | baseline-ui | not used | +| `tabular-nums` on data/numeric labels | baseline-ui, Impeccable /typeset | not used; value cells `已启用 / zai-live` would benefit | +| No display tracking modification unless explicit | baseline-ui | h2 has `-0.012em` (intentional, OK) | +| Em-dash ban | Taste-Skill, redesign | grep needed | +| Inter/system as default font flagged as "AI tell" | Taste-Skill, redesign, soft | maka is system-ui default — flagged | +| Lucide-as-default flagged | Taste-Skill | maka is lucide-react — flagged, Better Icons proposed | +| Card OR border, not both | Impeccable rule 36, UIDB, Taste-Skill | mostly ✅ (.settingsRows is border-only) but `.settingsConnectionRow` still has border + shadow | +| Visible focus ring (`:focus-visible` 2px) | fixing-a11y, Impeccable /audit | ✅ done round 11 | +| Page header height 56-72px | UIDB | maka uses padding stack, not a true bar — partial | + +## Anti-patterns triggered by maka today + +- **Impeccable rule 11 (card overuse / nested cards):** every settings page renders multiple `.settingsRows` blocks stacked, each with own card chrome. Could be one card with section dividers (per /distill). +- **Impeccable rule 25 (raw neutrals not tinted toward brand):** `.settingsRows` border is `oklch(from var(--foreground) l c h / 0.08)`. Tinting toward `--accent` at 0.005-0.01 chroma would carry brand into chrome. +- **Taste-Skill banned: border-b on every row.** ❌ — wait, maka DOES use `border-bottom` hairlines between rows. WAWQAQ asked for this explicitly in PR-GROUPED-CARD-0 ("内容紧密、用分隔线划开"), so this disagreement stays unresolved between Taste-Skill and WAWQAQ. Defer to WAWQAQ. + +## 10 highest-value action items for maka + +Ranked by impact / effort: + +1. **Tactile `:active` scale** on rows, nav items, back button. + - `.settingsFormRow:active, .settingsRow:active, .settingsNavItem:active, .settingsBackButton:active { transform: scale(0.985); transition: transform 100ms cubic-bezier(0.16, 1, 0.3, 1); }` + - Reduced-motion gate already in place — fires inside the `@media (no-preference)` branch. + +2. **Sidebar active accent bar** (Redesign-Skill). + - `.settingsNavItem[data-active="true"] { box-shadow: inset 3px 0 0 var(--accent); }` + - Carries brand into the most-used surface. + +3. **`tabular-nums` on value cells**. + - `.settingsRow > span { font-variant-numeric: tabular-nums; }` + - Numeric values like `zai-live`, version strings, counts align cleanly. + +4. **`text-balance` / `text-pretty`** on page header. + - `.settingsPageHeader h2 { text-wrap: balance; }` + - `.settingsPageHeaderDescription { text-wrap: pretty; }` + +5. **Hint floor 13 → 14px**. + - `.settingsFormRow small, .settingsField small { font-size: 14px; }` (currently 13) + - Crosses the 14px legibility floor that baseline-ui + UIDB + Impeccable converge on. + +6. **Switch hit-area shim**: 44×44 invisible hit target around the 26×46 visual. + - Wrap `` in a `min-width:44px; min-height:44px;` flex container. + +7. **One motion token**. + - `--motion-fast: 160ms` + `--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1)`. + - Reuse across nav / row / switch / input transitions. + +8. **OKLCH brand tint on settings chrome**. + - `.settingsRows` border from `from var(--foreground) ... / 0.08` to `oklch(from var(--accent) l c h / 0.08)`. + - Subtle brand carry without changing perceived neutrality. + +9. **Em-dash + AI-slop copy grep**. + - Audit `apps/desktop/src/renderer/settings/SettingsModal.tsx` for `—`, "Seamless", "Elevate", "Unleash". + - Quick mechanical cleanup. + +10. **Better Icons MCP install (deferred ship)**. + - Add to `.mcp.json`. Don't migrate icons in this lane — let it learn preferred families per surface first. Lucide stays default for now. + +## Defer / out-of-lane + +- **Font swap** (Geist/Cabinet Grotesk/Satoshi instead of system-ui): meaningful but needs font files in the bundle, license check, and broad visual regression. Worth its own PR. +- **Nav consolidation to ≤7 in big group**: would re-split AI 与集成. Defer; WAWQAQ already approved 3 groups in round 7. +- **Card overuse / merge stacked cards**: contradicts WAWQAQ's grouped-card direction. Don't change. + +## Round 15 (final) PR plan + +Bundle action items 1, 2, 3, 4, 5, 7 (highest-impact, single-CSS-file). Skip 6 (component wrap), 8 (brand tint risk), 9 (audit), 10 (config) — those need their own PRs. + +PR-SETTINGS-MOTION-TYPO-TOKENS-0: +- `:active` scale on rows/nav/back (item 1) +- accent bar on active nav (item 2) +- tabular-nums on row value (item 3) +- text-balance / text-pretty on header (item 4) +- hint 13→14 (item 5) +- shared `--motion-fast` token (item 7)