# @layoutdesign/context

Source: https://glimind.com/server/npm%2F-layoutdesign%2Fcontext
Registry id: `npm/-layoutdesign/context`
Status: unknown

## Install

```json
{
  "mcpServers": {
    "layoutdesign-context": {
      "command": "npx",
      "args": [
        "-y",
        "@layoutdesign/context"
      ]
    }
  }
}
```

Claude Code:

```sh
claude mcp add layoutdesign-context -- npx -y @layoutdesign/context
```

## Tools (19)

- `check_compliance`: Validates a code snippet against the design system — flags hardcoded colours, bad spacing, unknown tokens, and unrecognised components.
- `design_in_figma`: Takes a natural language prompt and returns design tokens, component specs, and step-by-step instructions for calling Figma MCP's generate_figma_design.
- `get-live-screenshot`: Returns the screenshot captured with a request (requestId), or a fresh capture of the current page over the socket when Live is running.
- `get-pending-requests`: Free-text changes the user pinned to elements/regions in Live. Reads Live's socket when running; falls back to .layout/live/requests.json otherwise.
- `get-recent-visual-edits`: Recent class/token/inline-style edits. Reads Live's socket when running; falls back to the on-disk .layout/live/recent-edits.json log otherwise.
- `get-selected-element`: Returns the element currently selected in Live. Returns { running: false } if Live isn't running.
- `get_component`: Returns the spec and code example for a named component.
- `get_design_system`: Returns the full layout.md, or a filtered section (colours, typography, spacing, components). Use this before writing any UI.
- `get_tokens`: Returns design tokens in CSS custom properties, W3C DTCG JSON, or Tailwind config format.
- `list-tokens`: Returns the design tokens as a structured catalogue: {cssVar, value, category, mode} grouped into colour, typography, spacing, radius and shadow, with dark-mode
- `list-ui-components`: Lists the pre-built, token-contracted Layout UI components installable from the registry, with an add command and usage/never rules for each.
- `list_components`: Lists all components defined in the active kit, plus auto-detected codebase and Storybook components.
- `lock-file`: Reserves exclusive write access to a file before editing, so Claude and Live don't clobber each other.
- `mark-request`: Reports progress back to Live: mark a request in-progress when starting, done (with an optional note) when finished.
- `preview`: Pushes a component to the local live preview canvas at localhost:4321. Requires the preview server to be running.
- `push_to_figma`: Bridges to the Figma MCP server to create an editable Figma frame from component code. Requires Figma MCP to be configured separately.
- `unlock-file`: Releases a previously-acquired lock.
- `update_tokens`: Updates token values in tokens.css, tokens.json, and layout.md simultaneously, mode-aware (light/dark/all) so dark themes are never clobbered.
- `url_to_figma`: Captures a live website URL as editable Figma frames with auto-layout.

Measured by Glimind (https://glimind.com): MCP handshake + tool list only, no tool is ever called. CC BY 4.0.