DatoCMS Plugin Design System

Make plugin UI native. Use for visual fit, structure, density, styling. Not for wiring hooks or scaffolding.

Owns:

• Make config screen native
• Restyle sidebar panel to match dashboard
• Use raw CSS for native page look
• Tighten modal spacing/hierarchy
• Pick datocms-react-ui components matching CMS UI

Step 1: Detect context silently

1. Identify target: existing plugin, greenfield scaffold, single surface.
2. Identify surface: config screen, page, sidebar panel, full sidebar, modal, outlet, inspector, asset source.
3. Check if project uses datocms-react-ui.
4. Identify change type: visual, layout, control selection, theme, density.
5. Read smallest slice: surface entrypoint, component being restyled, local CSS, package.json if needed.