ConsultUserSketch

Interactive UI layout sketching tool for LLM-assisted design workflows. Propose grid-based layouts, edit them in a native macOS dialog, and get back ASCII, SVG, and text descriptions.

curl -sSL .../install.sh | bash

Features

Interactive Grid Editor

Drag, resize, and rename blocks in a native macOS SwiftUI dialog. Accept, modify, or cancel layouts interactively.

MCP Integration

Expose layout design as MCP tools for Claude and other LLMs. Propose layouts, get templates, and describe designs programmatically.

Multi-Format Rendering

Output layouts as ASCII art, SVG visualizations, or human-readable text descriptions with spatial relationships.

Layout Templates

Five built-in density presets: compact, standard, spacious, detailed, and mobile. Configurable grids from 3x3 to 20x20.

Smart Descriptions

Auto-generated natural language descriptions with spatial positioning, nesting detection, and grid coordinate mapping.

Native macOS UI

Floating borderless dialog window with drag-to-move, corner resize handles, double-click rename, and context menus.

How It Works

MCP Client

Claude or other LLM

→

MCP Server

TypeScript / Node.js

→

SketchCLI

Swift executable

→

SwiftUI Editor

Interactive dialog

Getting Started

Run the installer

The installer checks prerequisites, clones the repo, and builds everything.

curl -sSL https://raw.githubusercontent.com/doublej/ConsultUserSketch/main/install.sh | bash

Configure as MCP server

Add ConsultUserSketch to your Claude MCP configuration. The installer prints the exact path for your system.

{
  "mcpServers": {
    "consult-user-sketch": {
      "command": "node",
      "args": [
        "~/.local/share/consult-user-sketch/mcp-server/dist/index.js"
      ]
    }
  }
}

Propose a layout

Ask Claude to design a UI layout. It will open an interactive editor where you can drag, resize, and arrange blocks on a grid.

MCP Tools

`propose_layout`

Open an interactive editor with initial blocks. User drags, resizes, and arranges. Returns final layout with ASCII, SVG, and summary.

`get_layout_templates`

Get the five built-in density templates with grid dimensions, max blocks, and descriptions for planning layouts.

`describe_layout`

Non-interactive analysis of a layout. Returns human-readable spatial descriptions and ASCII art without opening a dialog.