从一个颜色变量，到很多套管理系统

6 月 2 日，我给 yTemplate 做了第一次提交。它是一个 Next.js 的起步模板，README 上写的用途是让新项目跳过搭建，直接开始写功能。现在矩阵里有 8 个 Web 项目是从它起步的，yPulse、组件库 yBlocks、CRM 模板，还有 Agent 的工作区套件 yAgentKit 都在里面。

我做这个模板想要的是，以后不管做哪个领域的管理系统，它们长得一样，用起来也一样。这件事要从最底下一层一层往上搭。

最底下是颜色变量。整个模板只有一个 CSS 文件管颜色，里面有 31 个按用途命名的颜色变量，主色、卡片底色、边框、图表的五种颜色，都在这里定义。组件里只用这些名字，从不直接写一个色值。灰色也做成了参数，色相和浓淡各用一个变量。规范里后来专门写了一句，以后新加的变量只要带灰，都得照这个写法。圆角也一样，从一个基准值算出一整套大小。

往上一层是主题。设置面板里有 6 套现成的主题色，蓝、绿、紫、靛、橙、红，也可以随手填一个十六进制颜色，模板把它换算成 9 个变量。中性色有 5 族，圆角有 4 档，另外还能调对比度、紧凑密度和导航的样式。这些设置要在两个地方生效，一个在页面画出来之前，一个在页面加载完以后，两个文件必须写得一模一样，这条规矩专门写在主题文档里。yPulse 打开时用的是橙色那一套。矩阵里每个项目还各有一个颜色。Tailwind 有 17 个色族，先排一圈，再浅一档排第二圈，按项目在名单里的位置分下去。在 yPulse 的所有页面上，同一个项目永远是同一个颜色。

再往上是组件库。每个项目里有五十来个基础组件，来自三个来源，shadcn、Appica 和 Base UI。规矩是一个位置只用一个来源，要换就在同一次改动里把所有用到它的地方一起换掉。9 月 16 日我统一了输入框的高度，小、中、大三档是 28、32、36 像素，Appica 自己的三档是 32、40、48，下拉框、日期框、时间框都被拉到同一把尺子上。这些组件的上游是 yBlocks，9 月 1 日 yTemplate 整套接过了 yBlocks 的组件库。

组件之上是信息密度高的模块，我拿卡片来练。7 月 10 日，yBlocks 里开了一个卡片画廊，第一张是照着一个深色的用量卡复刻的。现在画廊里有 103 张卡，分在 AI、金融、开发、数据分析等 7 个领域。每一张都记着参考的原设计，也记着它属于哪一种，52 张是复刻，26 张在原设计上做了提升，5 张是改写成另一种语境，20 张是原创。7 月 12 日我写了卡片的设计语言，里面有两条我一直在用，一致性本身就是资产，每张卡只放一个最抢眼的元素。还有一条画线的规矩，实线只画在卡片的外框上，卡片内部的分隔一律用浅色的虚线。

再往上是页面。8 月 9 日我写了第一份页面规范，管数据表格这一类页面。规范里记着它的来由，在有这套组件之前，同样的数据页我已经手搭过十次。现在这套组件有 11 个部件，筛选、排序、分页、视图选项、顶部的指标条、空状态都在里面。之后陆续写了详情页、看板、表单、工作台、设置页，还有反馈、数据请求、图标、键盘这些每一页都要守的规矩，现在加起来 18 份。做一个新页面，先判断它属于哪一类，再读那一类的规范，用现成的部件拼，不许手搭外壳。一种新的页面形状，要等它出现第二次才立规范。

页面之上，是同一份数据的多种看法。8 月 21 日这一天，yBlocks 里的 Tasks 应用做完了 10 种视图，总览、我的工作、列表、看板、表格、时间线、日历、工作量、矩阵和动态。它们共用一个数据源，所有改动都记成一条只往后追加的日志，各个视图从这份日志里算出自己的样子。所以在看板上拖动一张卡，表格和日历里的那一条也跟着动，改动只记在一个地方。

最上面一层，是从一套系统到很多套系统。9 月 10 日，我从 yBlocks 里的 CRM 和日历起了一个 CRM 模板，客户、商机看板、活动、日历、邮件、报表、设置都有，带着同样的 15 份规范。yPulse 是另一套，它的更新日志、项目列表、自动化流程、分发台账和稿件台账都用同一套数据表格组件，项目和稿件的详情是同一套侧边面板，分发台账还有一个看板视图。10 月 5 日，yBlocks 又补了七个领域的设计说明，账单、电商、内容、库存、监控、人事和客服，里面写着这些应用在几种运营视图里共用一个领域模型，客户编号、库存编号是共用的，不是各抄一份。我主业里的管理系统也照这套规范在做。

这样一层压着一层搭上来，换一个领域，我要做的只是写这个领域自己的东西。颜色、主题、组件、卡片、页面版式和视图切换，都已经在下面那几层里定好了。

现在新起一个 Web 项目，第一次提交就带着这 31 个颜色变量、6 套主题色和整套规范。