用途:Operator's Notebook 是一套完整的设计规范(design register),用于构建信息密集、可快速扫读并决策的内部仪表盘,例如运营、财务、内容审核后台,读取 PostHog/Metabase/数仓的内部 BI 控制台,以及 CRUD 密集的运营工具、多租户后台。它面向 Next.js + Tailwind v4 + shadcn/ui 应用,用于把默认 shadcn 的“通用 SaaS 观感”迁移为统一的编辑式视觉语言。
主要能力:提供完整的 OKLCH 令牌契约(h~250、--radius: 0.25rem、无暗色漂移);三字体栈(Bricolage Grotesque 展示 + 正文字体 + Sometype Mono 数字);调校过的 shadcn/ui 组件变体(无阴影、无大圆角、透明描边、ring-1 聚焦);共享原语 PageHeader、StatCard、SectionLabel、EmptyState;布局外壳(60 宽发丝侧边栏、墨点激活态、纯 CSS 移动端滑入);图表排版契约(recharts 常量);以及不触碰数据流的迁移手册。
使用方式:按迁移清单分阶段执行——先重写 globals.css 为 OKLCH 契约并接入三字体,再替换 shadcn/ui 原语、创建共享原语与图表排版文件、重写侧边栏/头部/移动导航与根布局,随后逐路由替换卡片、统计网格、分隔线与颜色字面量,最后用 grep 校验并运行 pnpm typecheck && pnpm lint && pnpm build。
限制:不适用于消费者营销站点、移动优先应用,以及需要独特强调色系统的品牌型产品面;该规范仅将强调色保留给“激活”状态。默认仅支持亮色模式,除非明确要求。禁止使用原始 Tailwind 颜色字面量、渐变文字、弹跳缓动、布局属性动画、玻璃拟态等。具体收费、价格与平台支持情况暂未提供。