pxcook可通过组件识别模式、json导出+哈希比对、sketch插件预处理及相似组件推荐四种方式实现重复ui元素的自动识别与归类。
如果您在使用 PxCook 进行设计稿解析时，希望自动识别视觉稿中重复出现的 UI 元素（如多个相同的 Button、SearchBar、Card 等），以减少人工标注与组件归类工作，则需依赖其内置的智能组件识别能力。PxCook 本身不直接提供“重复元素检测”独立功能，但可通过其组件化识别机制，结合设计稿结构特征，实现相同组件的批量识别与归类。以下是实现该目标的多种可行路径：
一、利用 PxCook 的“组件识别”模式自动聚类相同元素
PxCook 在导入 Sketch 或 PSD 文件后，会基于图层命名规范、视觉相似度及结构一致性，对 UI 元素进行初步组件聚类。当多个图层具备高度一致的尺寸、颜色、字体、圆角、阴影等属性，且命名符合常见组件关键词（如“btn-primary”“search-bar”“tab-item”）时，系统将自动将其归为同一组件类型，并在右侧“组件面板”中合并显示。
1、确保设计稿中重复元素使用统一图层命名，例如全部命名为“Button/Primary”或“SearchBar/V1”；
2、导入文件后，点击右侧面板顶部的「组件识别」按钮，启用智能识别模式；
3、等待识别完成，观察「组件列表」中是否出现多个实例计数（如“Button/Primary × 8”）；
4、点击该组件条目，所有匹配图层将在画布中高亮闪现，验证识别准确性。
二、通过导出 JSON 结构 + 外部脚本比对哈希值识别重复
当 PxCook 默认识别未覆盖全部重复场景（如命名不规范、微调样式差异），可借助其导出的结构化数据进行二次分析。PxCook 支持导出包含图层层级、样式、文本、尺寸等字段的 JSON 文件，通过对关键字段生成视觉指纹（如 base64 编码的 SVG 快照或 CSS 属性 MD5 哈希），即可精准定位完全一致或高度近似的重复元素。
1、在 PxCook 中完成设计稿加载，点击菜单栏「文件 → 导出 → 导出为 JSON」；
2、使用 Python 脚本读取 JSON，提取每个图层的 width、height、fill、fontSize、borderRadius、text、type 等字段；
3、对每组字段拼接后计算MD5 哈希值，将相同哈希值的图层归为一组；
4、输出含图层 ID、位置、所属页面及重复次数的 CSV 报表，供设计师快速定位冗余图层。
三、结合 Sketch 插件预处理，标准化图层后再导入 PxCook
在导入 PxCook 前，若设计稿中存在大量未命名、嵌套过深或样式分散的重复元素，可先用 Sketch 插件（如 “Rename It”、“Anima” 或 “Craft Plugin”）批量重命名、扁平化图层并统一填充逻辑。经标准化处理后的 Sketch 文件，能显著提升 PxCook 组件识别的召回率与准确率，使相同 UI 元素更易被聚类为单一组件。
1、在 Sketch 中安装并启动「Rename It」插件；
2、选中全部疑似重复的图层（如所有主按钮），执行批量重命名规则：{type}/{state}（例：“Button/Default”）；
3、运行「Flatten Layers」操作，移除无意义的嵌套组，确保样式属性直接挂载于图层；
4、保存 Sketch 文件，重新导入 PxCook，此时组件识别面板将显示更清晰的重复实例汇总。
四、启用 PxCook 的「相似组件推荐」辅助人工确认
对于无法全自动归类的边界案例（如仅图标不同但布局一致的 TabBar 项），PxCook 提供交互式相似组件推荐功能。当用户手动选中某一图层后，系统会在侧边栏实时列出视觉相似度 Top 5 的其他图层，并标注差异字段（如 iconPath、textValue）。该功能虽非全自动，但可大幅压缩人工比对耗时，实现半自动化重复识别。
1、在画布中单击任一目标图层（如某个导航图标）；
2、查看右侧「相似组件」面板，确认推荐列表中是否包含预期的重复项；
3、勾选多个推荐项，点击「批量标记为同一组件」，完成归类；
4、重复操作，覆盖全部高频复用模块（如列表项、卡片容器、弹窗标题栏）。
