ux-ui-maxpro 是一套用于精确复刻参考 UI 的方法手册，面向 snapcn 技术栈（Next.js App Router + Tailwind v4 + token 驱动的 app/globals.css，遵循 DESIGN.md 规则），但方法本身与具体技术栈无关。核心规则是“先测量再动手”：不能直接照参考图写代码，而要先把参考写成具体规格，再依据规格编码，避免出现“差不多”的近似结果和编造内容。
主要能力与流程：
-
从参考提取规格：把截图当设计系统阅读，记下结构（顶栏、侧栏、内容区的宽高等，顶栏是否有边框/阴影/模糊）、栅格（最宽断点列数、间距及 4→3→2→1 的降级方式，瀑布流还需记录卡片高度差异）、卡片（圆角、表面色、边框、阴影、叠加元素尺寸与内缩）、字体（各文本角色的字号、字重、颜色）、胶囊控件（高度、水平内边距、间距、激活/非激活处理）、颜色（采样精确的表面灰与强调色）。
-
每个元素映射到真实数据：不使用看起来真实的假数字；若没有诚实的等价数据则删除该元素，并补充参考中缺失的可访问性标识（如 aria-label、aria-pressed）。
-
通过 token 而非十六进制值设置样式：新表面需在 app/globals.css 中新增语义 token，在 :root 与 .dark 同时添加，并在 @theme inline 注册；确需偏离 DESIGN.md 时补充简短的修正说明。
-
瀑布流方案：默认用 CSS columns（columns-N、子项 break-inside-avoid mb-*），保证零布局偏移与稳定 key；仅当行优先顺序为硬性要求时才用 JS 平衡列。媒体比例统一时可用索引/别名的稳定函数分配卡片形状，避免过滤或重排时形状变化。
-
重媒体网格：100 个以上播放器/视频不能一次性挂载，用 IntersectionObserver（rootMargin: "200px 0px"）懒挂载，挂载前保留占位，滚出屏幕时暂停播放，并保持 key 稳定。
-
叠加验证：在参考的精确断点截图，以约 50% 不透明度叠加或并排比对每个测量值，逐断点确认列数变化，切换明暗主题确认 token 正确，检查键盘焦点与 ARIA，确认未改动的同级页面保持一致。
限制：资料未提供具体安装命令、收费方式、支持平台或性能数据；该方法要求开发者能测量参考并维护设计系统 token，不适合无法获取参考截图或实时站点的场景。