Better Design

Preview a Design System

preview-design-system

Read-onlyIdempotent

Renders a token-true HTML preview of a design system from the catalog, letting users see palette, typography, and components before installing it.

Instructions

Show the user a visual preview of a design system from the catalog (use the id from 'find-design-system'). Returns a token-true HTML preview: palette, typography, buttons, card, input, badge, plus a link to the full live showcase. Use this when the user wants to SEE a design system before installing it.

Input Schema

Name	Required	Description	Default
`context`	No	Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result.
`designSystemId`	Yes	Design system id from find-design-system, e.g. 'linear', 'editorial-warm'.

Output Schema

Name	Required	Description
`name`	Yes	Display name of the design system or project.
`step`	No	Current generation step, while generating.
`status`	Yes	completed \| error \| pending \| generating \| selected
`shotUrl`	No	Real screenshot of the showcase page for the self-contained preview widget.
`viewUrl`	No	Owner-facing Better Design page (the human 'Open' link). May require login.
`tokensCss`	Yes	CSS custom-property stylesheet for the system's tokens.
`previewUrl`	No	Public, cookieless showcase URL used to generate preview assets. Falls back to viewUrl.
`installNote`	No	Important install flavor or fallback note for clients that read only structuredContent.
`installedTo`	No	The project folder this server installed the design system into. Build there; run no setup command.
`localInstall`	No	True when this server runs on the user's machine and installs the design system itself: call get-design-system-kit again with install: true.
`installCommand`	No	shadcn install command, when complete.
`installLibrary`	No	Actual component library flavor installed by installCommand.
`newProjectCommand`	No	Creates a Vite + React + TypeScript project with Tailwind v4, the @/* alias and components.json, for when there is no project yet. Run it, then run installCommand inside the new my-app folder.

Schema Changelog

Changes observed during successful MCP inspections.

First observedv0.1.0Oct 25, 2026

TDQS

A4.1/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnly/idempotent/non-destructive, so the safety profile is covered. The description adds value by disclosing what the preview renders (token-true HTML with palette, typography, buttons, card, input, badge) and that it includes a link to the full live showcase — behavior an agent needs to set user expectations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences, front-loaded with the action and result, then the usage condition. Slight redundancy with the schema's id guidance, but no wasted prose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Output schema exists, so return-value documentation isn't required, and annotations cover the safety profile. The description covers prerequisite, purpose, and when to call; it could say more about what the user-facing rendering actually does (e.g., how the preview is surfaced), but the essentials are present.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3. The description's 'use the id from find-design-system' merely restates what the designSystemId schema description already says, and it says nothing about the optional 'context' parameter.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Specific verb+resource: 'Show the user a visual preview of a design system from the catalog', and it names the sibling that supplies the id ('find-design-system'). It also distinguishes itself from adjacent siblings like get-design-system-kit and install flows by framing the action as a pre-install visual check.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

States the triggering condition explicitly ('when the user wants to SEE a design system before installing it') and names the prerequisite sibling for obtaining the id. No explicit when-not guidance, but the 'before installing' framing implicitly excludes post-install use cases.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server