保存全局设计规则与页面差异
Persist a master design system with page-specific overrides
共享规则集中维护,页面只保存差异;读取时明确覆盖、继承和文件缺失的处理。
以下文件、覆盖规则和输出是本站编写的教学材料,不是上游运行结果或模型实测结果。
使用场景
你要实现结账页。项目已有共享字体、文字颜色和按钮间距,但结账页的按钮需要更大的内边距。希望下次会话仍能找到共享规则和这个例外,而不是从多份完整副本中猜哪一份有效。
教学项目根目录下有两个文件。design-system/shop/MASTER.md 保存共享规则:
button.padding=12px
text.color=#0F172A
body.font_size=16px
design-system/shop/pages/checkout.md 只保存结账页差异:
button.padding=16px
教学约定:按完整字段名覆盖,页面中具名字段优先,未提及字段继承主文件。该规则用于补全示例的合并语义,不表示上游已经规定了这种实现。
具体做法
- 确认项目根目录和当前页面名
checkout,先读取主文件;主文件缺失时报告无法取得共享基线,停止据此生成设计。 - 查找该页面的差异文件。文件不存在时只使用主文件;存在但无法读取时报告错误,不把读取失败当作没有例外。
- 按上述字段级约定合并:只替换页面明确列出的字段,其余字段保留主文件值。
- 列出最终有效规则及各值来源,再据此实现页面。共享规则更新时修改主文件,页面差异文件只维护仍然需要的例外。
反例
使用上述同一组文件实现结账页:
把 MASTER.md 的全部内容复制到 checkout.md,以后每个页面各自修改。实现时只读取 checkout.md,没有写出的共享字段自行选择,不记录值来自哪里。
完整副本会让共享字段在多个文件中独立变化;只读页面文件又会把未列出的字段误当作没有规则。
改进写法
实现 checkout 页面。路径均相对于项目根目录。
读取 design-system/shop/MASTER.md,再查找 design-system/shop/pages/checkout.md。
教学合并规则:页面具名字段覆盖同名主字段;未提及字段继承主文件。
页面文件不存在时只用主文件;主文件缺失或现有文件无法读取时报告缺失/读取错误,不猜默认值。
先输出最终 button.padding、text.color、body.font_size 及各自来源,再按这些规则实现。
不要向页面差异文件复制全部共享字段。
套用时替换项目目录、页面名和你要维护的字段,同时写明自己的覆盖约定。给定材料的示意结果是:
| 字段 | 最终值 | 来源 |
|---|---|---|
button.padding |
16px |
页面文件 |
text.color |
#0F172A |
主文件 |
body.font_size |
16px |
主文件 |
为什么这样改
主文件保存一份共享基线,页面文件只表达例外。明确覆盖粒度后,执行者知道什么被替换、什么继续继承;列出来源则让下次会话可以重建同样的有效规则,而不是凭页面外观猜数值。
如何验证
根据上述文件手工核对三个最终值。移除页面文件后,应得到主文件的 12px、#0F172A、16px;只修改主文件的文字颜色后,结账页应继承新颜色,按钮仍为 16px。主文件缺失时必须报告无法取得基线。
如果已经生成页面代码,再检查实际样式是否采用这些有效值。读取文件和列出规则,只证明资料已被正确合并,不能替代运行时样式检查。
适用边界
上游提出主文件加页面覆盖,但没有完整规定字段级合并或整体替换语义,使用前必须明确约定。重复字段、删除字段等情况应由项目规则另行定义。保存文件不会保证后续会话主动读取它,也不会自动验证颜色、间距或可访问性是否合适。
原文与版本
- nextlevelbuilder/ui-ux-pro-max-skill · Persist Design System (Master + Overrides Pattern) and context-aware retrieval
查看此版本的文件09170eec67ee