The AI panel

• Select a frame and press CtrlAltI
• Type what you want and send it
• Watch the steps and the changes on the canvas
• Switch the proposal bar between Before, After and Split
• Accept keeps it as one undo step

Claude Code as the backend#

The panel runs Claude Code on your machine, inside your repository, with your own Claude account: one claude process per turn, which designs through ud like any other agent. With ud.ai.backend set to vscode-lm, the panel uses a language model offered by another VS Code extension instead (ud.ai.lm.*).

Work is routed by tier: Design (default opus) for new screens and larger changes, Assistant (default sonnet) for edits and reviews, Quick (default haiku) for most quick actions. Change them with ud.ai.models.design, ud.ai.models.assistant and ud.ai.models.quick; ud.ai.limits.* caps each tier’s time, turns and created layers. UI Designer: AI Settings (the gear of the Claude view) opens all the ud.ai.* settings.

Asking#

Open the panel with CtrlAltI, the sparkle button in the tool bar, or UI Designer: Ask Claude…. It opens the Claude view in the secondary side bar. Type what you want: “Design a sign-up screen in the same style as Login”, “Make a dark mode variant of this card”. The selection is attached as context (chips above the prompt) and you can add files. Conversations are kept per design and listed in the header; UI Designer: New AI Conversation starts a fresh one.

While Claude works, the panel shows each step (the tool it ran, such as use_figma or get_screenshot, with a summary), and the canvas shows its changes as they are made.

Reviewing a proposal#

By default an answer is a proposal, not a change to your design:

• The proposal bar on the canvas switches between Before, After and Split.
• Added, changed and removed layers are outlined on the canvas; the panel lists every change, grouped by frame, with Before and After thumbnails.
• The other panels are read-only while you review.
• Accept applies the whole proposal as one undo step; Discard drops it. Type a follow-up to refine it first.

The setting ud.ai.applyDirectly applies each turn directly, still as one undo step.

Quick actions and workflows#

• UI Designer: Claude Quick Action… and the Claude entries of Quick actions (Ctrl/) run focused tasks on the selection: rename layers, fill with realistic content, translate, generate variants, suggest auto layout, write component descriptions and generate alt text.
• Generate from a description: describe a screen in the panel; the Design tier builds it with the variables, styles and components the design already has.
• From code: UI Designer: Design from Code with Claude… designs a component or page from its source file; Design from Requirement… designs a screen for a requirement of a Project Board planning file.
• To code: UI Designer: Implement with Claude turns the selected frames into code in your workspace.
• Review: UI Designer: Review Design with Claude checks the selection for design-system consistency, accessibility, hierarchy and spacing, and leaves its findings as comments with an Apply fix button.
• UI Designer: Show AI Run Log opens the transcript of a run (kept ud.ai.keepRunLogs days).

Stopping#

UI Designer: Stop Claude stops the panel’s run. UI Designer: Stop Agent (CtrlShiftEscape) stops every agent editing the design at once, the panel’s and those working through ud in a terminal; the status bar shows who is editing, with the same Stop.

What Claude may read#

The panel’s agent never reads .env*, *.pem or id_* files; add patterns with ud.ai.denyRead. Project hints for every prompt go in ud.ai.instructions or a .design-ai.md next to the design.