用途:让 DatoCMS 插件的界面看起来和用起来都像 DatoCMS 后台原生界面。适用于视觉贴合、结构、密度、样式调整,不用于接线 hook 或搭建脚手架。可处理配置页原生化、侧边栏面板重设样式、用原生 CSS 实现原生页面外观、收紧弹窗间距与层级、挑选匹配 CMS UI 的 datocms-react-ui 组件。
使用方式:第一步静默判断上下文,识别目标是已有插件、全新脚手架还是单一界面,识别界面类型(配置页、页面、侧边栏面板、完整侧边栏、弹窗、outlet、inspector、asset source),检查项目是否使用 datocms-react-ui,判断改动类型(视觉、布局、控件选择、主题、密度),并读取最小范围源码。第二步选择实现路径,优先用公开组件路径(Canvas、表单包装、标准字段、按钮、分区、工具栏、侧边栏面板、下拉、spinner、VerticalSplit 等);公开包缺少所需布局时再用原生 React + CSS 兜底,禁止导入 CMS 私有样式或类名,改用插件本地 CSS 与 Canvas 变量重建。第三步按需加载最小参考资料,避免加载整个 bundle。第四步构建原生风格 UI:先匹配 DatoCMS 密度,使用 Canvas 主题变量而非硬编码品牌色,偏好 1px 边框、3-5px 圆角、克制阴影,保持页面宽度、工具栏高度、分区间距与表单节奏接近 CMS,每屏一个主操作,破坏性操作隔离,标签在控件上方、提示在下方,优先分区/工具栏/侧边栏/表格而非装饰性卡片,避免 hero 区块、KPI 网格、超大圆角、重渐变。第五步验证:运行现有构建脚本(如 npm run build、pnpm build),并列出一项手动 UI 检查(如配置页看间距与主操作位置、页面看工具栏节奏与滚动、侧边栏面板看密度与折叠行为、弹窗看焦点与操作层级、outlet 看与周边 CMS UI 的贴合度、asset source 看搜索与结果节奏、inspector/完整侧边栏看 noAutoResizer 与双栏行为)。
适用场景:已有或新建 DatoCMS 插件的界面美化与原生适配。限制:不负责新建脚手架、feature/hook 接线、插件参数或界面行为逻辑,这些应分别交给 datocms-plugin-scaffold、datocms-plugin-builder;独立于插件 UI 的 CMA 用法与前端站点集成分别属于 datocms-cma、datocms-frontend-integrations。其他未提供的细节暂未提供。