mcpField
D
datocms-plugin-design-system

datocms-plugin-design-system

github.com/datocms设计与 UI3111 次安装5 天前更新
代码仓库

关于 datocms-plugin-design-system

帮助开发者让 DatoCMS 插件界面贴合 CMS 的视觉规范。它指导如何在 `datocms-react-ui` 组件与本地 React/CSS 之间选择，并涵盖常见插件界面及针对性验证。

主要功能

  1. 01指导配置页、页面、侧边栏和模态框设计
  2. 02适用时优先使用 `datocms-react-ui` 公共组件
  3. 03组件不足时采用本地 React 和 CSS
  4. 04遵循 CMS 的间距、密度、字体和主题变量
  5. 05按需查阅参考资料并进行界面检查

适用场景

  1. 01调整插件配置页以匹配 DatoCMS
  2. 02修改侧边栏面板或模态框的布局与密度
  3. 03使用现有界面组件构建插件页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/datocms/agent-skills --skill datocms-plugin-design-system

安装后在 Claude Code 中输入/datocms-plugin-design-system确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
datocms-react-ui-bridge.md
forms-and-controls.md
foundations.md
layouts.md
navigation-feedback-and-data-display.md
plugin-surfaces.md
raw-css-fallbacks.md
source-map.md

详细介绍

DatoCMS 插件设计系统

让插件 UI 融入原生界面。用于视觉适配、结构、密度和样式，不用于连接钩子或搭建脚手架。

负责：

  • 让配置界面融入原生界面
  • 重新设计侧边栏面板，使其与控制面板风格一致
  • 使用原生 CSS 实现原生页面外观
  • 优化模态框的间距和层级
  • 选择与 CMS UI 风格一致的 datocms-react-ui 组件

第 1 步：静默识别上下文

  1. 确定目标：现有插件、从零搭建的脚手架、单个界面。
  2. 确定界面：配置界面、页面、侧边栏面板、完整侧边栏、模态框、出口、检查器、资源来源。
  3. 检查项目是否使用 datocms-react-ui。
  4. 确定更改类型：视觉、布局、控件选择、主题、密度。
  5. 阅读最小范围的代码：界面入口、要重新设计的组件、本地 CSS，以及必要时的 package.json。

仅在仓库情况不明确时提问。

第 2 步：选择实现路径

选择能保持原生体验的最精简路径。

A. 优先使用公开组件

当 datocms-react-ui 提供所需控件时使用。

优先用于：

  • Canvas
  • 表单包装器、分组设置
  • 标准字段、按钮、按钮组
  • 分区、工具栏、页眉结构
  • 侧边栏面板、下拉菜单、加载指示器
  • 可用时使用 VerticalSplit
B. 回退到原生 React + CSS

当公开包缺少所需布局，或需要精确还原 CMS 组合方式时使用。

适用于：

  • 需要采用 CMS 间距的页面外壳
  • 列表／表格包装器、摘要行
  • 空状态、信息块
  • UI 包缺少基础组件时的分栏布局
  • 需要主题变量的特定界面包装器

不要导入 CMS 的私有样式或类名。使用 Canvas 变量，通过插件本地 CSS 重新实现。

第 3 步：加载最少的参考资料

始终先查看：

  • references/foundations.md
  • references/datocms-react-ui-bridge.md

仅当公开文档和插件代码不足以解决问题时，才加载 references/source-map.md。

然后加载与修改相关的参考资料：

  • 布局／页面 → references/layouts.md
  • 表单／设置／控件 → references/forms-and-controls.md
  • 标签页／下拉菜单／表格／通知 → references/navigation-feedback-and-data-display.md
  • 特定钩子的界面形态 → references/plugin-surfaces.md
  • 原生 CSS → references/raw-css-fallbacks.md

小规模的样式调整无需加载整套资料。

第 4 步：构建原生风格的 UI

准则：

  • 在设计布局前，先匹配 DatoCMS 的界面密度。
  • 使用 <Canvas> 主题变量，不要硬编码品牌颜色。
  • 在 CMS 使用边框时，优先采用 1px 边框、3-5px 圆角和轻微阴影。
  • 页面宽度、工具栏高度、分区间距和表单节奏应尽量贴近 CMS。
  • 每个分区／屏幕只设置一个主要操作。
  • 将破坏性操作隔离开。
  • 标签置于控件上方，提示置于下方，错误信息保持简洁。
  • 优先使用分区／工具栏／侧边栏／表格，而非装饰性卡片。
  • 避免使用主视觉区块、KPI 网格、装饰性文案、过大的圆角、浓重渐变和填充性控制面板内容。
  • 自定义 CSS 应保持本地化，并由变量驱动。
  • 如果公开组件接近需求但不够完整，可在其周围进行组合。

对于“原生” UI，按以下顺序优化：

  1. 结构
  2. 间距
  3. 字体排版
  4. 颜色／主题
  5. 控件选择
  6. 微交互

第 5 步：验证

运行最精简且有用的验证：

  • 现有构建脚本（npm run build、pnpm build）

指定一项手动 UI 检查：

  • 配置界面 → 间距、分区分组、主要操作的位置
  • 页面 → 工具栏／页眉节奏、滚动行为
  • 侧边栏面板 → 密度、折叠／展开行为
  • 模态框 → 焦点、宽度、操作层级
  • 出口 → 与周围 CMS UI 的行内适配
  • 资源来源 → 搜索／结果节奏、尺寸
  • 检查器／完整侧边栏 → noAutoResizer、双栏行为

跨技能分流

  • 新插件／项目／文件夹 → datocms-plugin-scaffold
  • 现有插件的功能／钩子／参数／界面行为 → datocms-plugin-builder
  • 混合任务很常见：
    • 本技能用于构建原生 DatoCMS UI
    • scaffold／builder 用于钩子／设置
  • 插件 UI 之外的独立 CMA → datocms-cma
  • 前端网站集成 → datocms-frontend-integrations

评论

支持 Markdown