深色底与霓虹点缀
背景用 oklch(0.15 0.03 211),仅用强调色点亮关键数字与激活态,杜绝大面积高饱和。
每一张卡都对应一个可验收的界面目标,而不是形容词堆砌。
背景用 oklch(0.15 0.03 211),仅用强调色点亮关键数字与激活态,杜绝大面积高饱和。
折线主色停留在青蓝族,网格线透明度 ≤18%,避免暗底上的眩光与残影。
每条推荐附「为什么给你」标签,命中率与召回率同时展示,避免黑箱焦虑。
命令面板 ⌘K 直达任意模块,键盘可达率 100%,鼠标只是可选项。
帖子、Issue、模型卡共用一套卡片骨架,时间线与点赞态统一用暖橙强调。
OLED 深色可省电 18%~28%,但纯黑会拖影,用 0.15 明度而非 0 作为底色。
左右联动滚动,滑动右侧说明时左侧截图同步高亮对应区域。
底色 0.15、卡片 0.21、悬浮 0.25,用明度差替代描边堆叠,暗环境下层次依旧清楚。
超出部分按 2s 窗口聚合,滚动时补帧,保证 60fps 与内存占用低于 90MB。
每张推荐卡展示命中原因与置信度(0~1),低于 0.62 自动降权,避免噪声打扰。
焦点样式 2px 强调色 + 3px offset,正文对比度 ≥4.5:1,图标附带 aria-hidden。
每条都给出可直接写进设计规范的做法与阈值,照着做就能少踩坑。
OLED 上纯黑会造成滚动拖影与边缘晕圈。主背景取 oklch(0.15 0.03 211),卡片 oklch(0.21 0.045 211),保持 0.06 的明度差即可分层。
暖橙 oklch(0.78 0.14 31) 仅用于主按钮、激活态、关键数字与细高亮线;整屏占比超过 15% 就会让暗色界面变得廉价刺眼。
正文用 oklch(0.94 0.02 211),次要文字用 oklch(0.62 0.03 211) 但字号不低于 0.82rem;小字若低于 4.5:1 必须提亮一档。
折线 1.5~2px,网格线透明度 ≤18%,最多 4 条主序列;超过 4 条改用分面小图,避免暗底上颜色互相吞噬。
图表、图片统一 loading="lazy",图片容器锁定宽高比(16/10 或 4/3)配合 object-fit:cover,把首屏 LCP 控制在 2.5s 内、CLS 低于 0.05。
在 prefers-reduced-motion: reduce 下关闭数字滚动与位移动画;并提供「跟随系统」的明暗切换入口,默认仍落在暗黑模式。
面向技术爱好者的更新节奏,每条都标注可验证的改动量。
来自真实使用场景的反馈,附带具体改动前后的数值。
「以前凌晨排查模型漂移要来回切三个页面,现在暗黑模式的单屏可视化就够,定位一次异常从 11 分钟缩到 3 分钟。」

「推荐位给出理由这一点很关键,团队新人不再盲信排序结果,接手的心理成本明显降低。」

「社区互动区像有人陪着你写代码,问题发出去平均不到十分钟就有回应,深夜也不冷清。」

以下为设计稿验收口径,可逐条对照实现。
留下联系方式,我们会寄出一份 6 页的接入清单:配色令牌、图表参数、推荐解释位与移动端验收表,全部可直接落到你的 AI 平台。