Component Family Consistency 关注的是一个产品中所有交互组件——按钮、输入框、选择框、复选框、单选按钮、胶囊、徽章、标签、日历、日期选择器、滑块、开关——是否属于同一个视觉家族。它们应共享共同的设计基因，用户看到任一组件时都应感到它与其他组件同属一个产品。若组件被孤立设计、不共享令牌，产品就会像由零件拼装而成，而非整体构建。
一、先复用再新建。在创建任何组件之前，先审计已存在的内容：新造组件意味着多一个需要维护、需要保持圆角/高度/状态/动效一致的家族成员。顺序是：已有能完成此事的组件就直接用；若几乎合适，用参数或变体扩展它，而不是克隆——一个灵活的 Button 胜过并存的 PrimaryButton、BigButton 和 CtaButton；代码库中有接近的可以泛化的实现，就把硬编码部分参数化并提升为共享组件；只有在既无现成、也无法合理泛化时才新建，并按共享 DNA 构建。并行的重复实现（三个近似按钮、两个不同圆角的卡片）正是设计系统漂移的根源。反过来，一个视觉处理独立出现两三次就值得提炼为共享组件或令牌；不同设计时代的页面冲突时，应向最新组件迁移。资料提到 dembrandt 引擎可选的 get_findings 可对真实提取结果做设计系统 lint，报告一致性与重复问题，compute_drift 可对两次提取的漂移打分，用于审计现有产品。
二、共享 DNA。包括：圆角令牌（--radius-base 8px 用于按钮/输入/选择，--radius-sm 4px 用于复选框/小徽章，--radius-lg 12px 用于卡片/弹窗，--radius-full 9999px 用于胶囊/标签/头像芯片）；同一表单中按钮与输入框须同圆角；嵌套圆角保持同心，外圆角等于内圆角加间距，并用 calc() 派生而非硬编码。边框样式遵循两步规则，最多两种宽度（如 1px 和 4px），避免递增刻度；静止态输入框与选择框边框一致，聚焦用 --border-color-focus，错误用 --border-color-error。间距与高度方面，同一视觉尺度共享高度和内边距令牌（md/sm/lg 三档），高度与文字内边距用 rem，边框和阴影用 px；并排的按钮与输入框必须等高，高度要显式设定而非由内边距派生，且以 min-height 设定。
三、一行由一个类拥有。用单一共享类声明盒子、内容槽和全部状态，实例只能改颜色；变体不得改动盒子；状态只在类上编辑，避免某个兄弟实例后来单独改悬停、焦点环或过渡导致行分裂。无边框变体也应保留透明边框以保持内部尺寸一致。
四、图标视觉重心并非居中。align-items: center 居中的是图标盒子，而非盒内图形，因此需按形状给每个图标单独的偏移，不宜共用一个微调值。资料给出用 PIL 对 alpha 通道求质心并计算 offset_px 的测量方法，并指出模糊处理通常不改变结果、颜色不移动质心。
五、其他细节：button 在浏览器中默认 cursor: default，需在类中声明指针光标并用 grep 核实框架 preflight。控件边对边相连时，家族圆角应用于整组而非每个子项，并合并相邻边框避免 2px 接缝。控件展开时（下拉、多选、日期选择器、组合框）与面板视为一条缝，展开态保持同一圆角与边框。引入共享类时要注意层叠层级（放入框架的组件层、写长属性而非简写）并消费已有令牌而非复制字面值。最后强调测量而非推理：在无头浏览器中以真实编译样式表、两种视口宽度渲染并读取每个控件的实际高度与样式。
该资料同时提供品牌 UI 生成与 extract-design 相关交叉引用，具体集成方式暂未提供。