Design fidelity
A mockup rarely maps one-to-one onto DMS blocks. Rather than guess how faithful you want the result, an agent following the dms-best-practices skill asks you — once for the whole screen, then once per component that differs visibly.
To see the comparison interface, open the Cards and Compact sketch example. Its demonstration data illustrates choosing a variant, not the quality of a model's design interpretation.
One framing question
Before it builds anything, the agent asks how faithful the result should be:
| Choice | What happens |
|---|---|
| Pixel perfect | The agent reproduces the design, building custom blocks where no DMS block matches. |
| DMS equivalents | The agent maps every component onto its closest DMS block without asking again, except for a component that no block or composition covers. |
| Component by component (recommended) | The agent walks through the components that differ and lets you decide each one. |
Component by component
For each component of the mockup, the agent finds the closest DMS block, through its options or a composition of blocks. Differences the theme absorbs — colors, spacing, radius, fonts — never trigger a question. For a visible difference — a different layout, a missing element, another kind of chart — the agent runs the path before any custom block:
It searches the catalog
The agent looks for the block, its options or a composition of blocks that comes closest to the component.
It shows the comparison
The agent calls PreviewBlocks with the DMS block and your mockup as reference. An attachment appears in the conversation; click it to see the real block, rendered with your theme, next to your design. Another tab shows a sketch of the custom block it would build, and further tabs can show the DMS block with other options.
Without a preview tool, the agent writes a short table, with a markup snippet of the custom option when it is hard to picture:
| Your design | DMS block | Visible difference |
|---|---|---|
| Revenue tile with an inline bar chart | KpiCard with a sparkline | A line instead of bars under the figure |
It asks
The agent asks one closed question, with buttons in the dms-ai chat:
- Keep the DMS block
- Adjust it through its options
- Build a custom block
It builds what you chose
A custom block, when you choose one, follows the best practices: only that block is custom, it carries .meta(), and the rest of the page stays DMS blocks.
Preview blocks yourself
Use the component catalog to compare blocks before you design around them. Many pages offer a live preview with controls; blocks that need backend data or page context also explain what the preview cannot show. To preview a whole tree, open the block preview page of a local DMS.
Next steps
Best practices
The rules every DMS page follows, and that the dms-best-practices skill makes agents follow — pages as backend blocks, custom only for the missing block, metadata on every custom block, and a custom block proposed rather than built silently.
Block preview page
The hidden /dms-preview page renders any tree of registered DMS blocks from a URL or a postMessage — what powers the live previews of these docs.