restyle(ui): Mobbin design language — capsule controls, mono ink CTA, soft float shadows by jackwener · Pull Request #715 · apache/maka

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener · 2026-07-10T20:13:00Z

目标

对整个 app 做 Mobbin 风格的视觉重构：UX、流程、DOM 结构一律不动，只改视觉。

设计提取文档：notes/mobbin-design-language.md — 用 Chrome 对 mobbin.com 实测 getComputedStyle 得出（字体族/类型标尺/洗色/圆角/阴影/动效均为测量值，非目测）。

Mobbin 语言 → maka 落地

维度	Mobbin 实测	maka 落地
控件形状	一切单行控件 = 药丸 (r999)	`--radius-control` 6→999px（capsule）
容器圆角	卡片 16-24	surface 8→12，modal 12→20
阴影	`0 1px 2px @4%` chip / `0 8px 40px @4%` 浮卡	3-5 层堆叠收敛为两档配方
主操作	纯墨药丸 #141414，无品牌色按钮	`--action`/`--control` = 墨/纸对；dark 自动反相为浅色药丸
强调	靠形状与对比，不靠色相	`--nav-active`/`--toast-accent` 并入单色墨族；`--accent` 只留链接/focus ring/运行态
状态色	只给真状态	info/success/destructive 未动（延续 #651 restraint）
Composer	搜索胶囊浮起	composer 增加 0 8px 40px 浮起

Capsule 副作用清理

对全部 60+ 个 --radius-control 调用点做了逐一分类审计：

多行卡片/代码块/textarea/提示条 → surface (12px)
小图标 tile → calc(var(--radius-surface)-6px)；复选框 → calc(-8px) 保持方形
textarea 从共享 input 选择器中拆出单独覆盖
徽章 chips 保持 capsule（Mobbin 的 New/Updated 就是药丸；"never pills" 旧规范随重构退役）

契约同步

radius-converge-contract：pin 999/12/20/999，.enabledEmptyChip 重新归 tier
design-system-governance-406-contract：mono ink CTA 对 + load-tool 卡 → surface
settings-form-a11y-contract：措辞更新（capsule 语言）
docs/design-system.md §1.4 圆角表 + CTA 理由重写

验证

✅ 2297 desktop tests 全绿；dead-css 0
✅ visual smoke 逐面扫过：chat / streaming / skills / settings(外观·模型·记忆) / onboarding / permission dialog / daily review，light + dark
WCAG：墨/纸对 ≥15:1，同时覆盖 4.5:1 文本线与 1.4.11 非文本 3:1 线

🤖 Generated with Claude Code

@4

… soft float shadows Full visual restyle to the Mobbin language (UX/flows/DOM untouched). Extraction doc: notes/mobbin-design-language.md — measured via computed styles on mobbin.com (fonts, type scale, washes, radii, shadows, motion). Token layer (maka-tokens.css): - radius: control 6→999px capsule / surface 8→12 / modal 12→20; tier structure + SELECTOR_TIER map unchanged, values only - shadows: 3-5 layer stacks → Mobbin two-recipe (ring + 0 1px 2px @4% chip; ring + 0 8px 40px @4% float; modal adds one deep layer) - mono CTA: --action/--control/--brand-deep/--nav-active/--toast-accent ride the foreground/background ink pair (dark inverts to light pill — Mobbin dark convention); --accent stays for link/focus-ring/running; status colors untouched (#651 restraint rule) - composer gets the float shadow (Mobbin search-capsule feel) Capsule fallout re-tier (audited every radius-control call site): multi-line cards/code/textarea/note strips → surface; icon tiles → calc(surface-6px); checkboxes → calc(surface-8px) so they stay square; textareas split from shared input selectors; badge chips stay capsule (Mobbin New/Updated chips are pills — "never pills" doctrine retired). Contracts updated with the redesign: radius-converge (999/12/20/999), 406 governance (mono ink CTA pair + load-tool → surface), settings-form-a11y wording; docs/design-system.md §1.4 + CTA rationale. Verification: 2297 desktop tests pass, dead-css 0, visual smoke swept across chat/skills/settings/onboarding/permission/daily-review in light + dark.

jackwener closed this Jul 11, 2026