Wireframing

Design web and mobile user interfaces directly on your canvas with the Wireframes extension (spectacle.wireframes), a palette of composable UI primitives structured for real software development.

The stencil palette

The Wireframes extension adds a stencil palette to the canvas. Drag primitives out and arrange them like any other canvas element:

• Inputs & Controls: Buttons, text fields, dropdowns, switches, tabs, and segmented controls.
• Structural Layouts: Responsive columns, cards, modal dialogs, and navigation sidebars.

Select any stencil to edit its properties — label, state, size, placeholder — in the inspector.

AI Wireframe Generation

• Sketch to Wireframe: Draw a rough layout on the canvas and ask Spectacle AI to turn it into clean, aligned UI parts.
• Prompt to Wireframe: Describe a user flow ("a billing portal settings panel with a payment method list") and Spectacle arranges real UI components into a proposal card you review.

MCP access

The Wireframes extension exposes its tools over Spectacle's local MCP socket, so your other MCP clients can read and propose wireframes: spectacle_status, spectacle_search, spectacle_get_context, spectacle_propose, and spectacle_CreateNote. Proposals arrive as approval cards; nothing changes until you apply it.