9. Design ↔ code workflows

9.1 From code (AI-7)#

Trigger: “Design from Code…” on a file in the Explorer, the AI panel with a file attached, or Claude Code with the ui-designer-from-code skill.

1. The agent reads the component and what it uses (Read, Grep, Glob; allowed in the panel).
2. It maps code components to design components through the code map (get_code_connect_map) and search_design_system; it finds the font and tokens in the repository.
3. If the page is running (a dev-server URL in the prompt, 0.8), it captures it as a reference frame beside the build. In a terminal session that is generate_figma_design (EXP-6). In the panel the agent cannot call it (network, refused under --proposal, §5.1): the panel itself offers “Capture page…” before the run, which the user confirms with the URL in view, and the capture is attached as an image.
4. It builds the frames with the design loop (§4), compares with the capture or an attached screenshot, fixes, and deletes the capture.
5. The proposal shows the new frames; the summary lists code components without a design counterpart.

9.2 To code (AI-8)#

Trigger: “Implement with Claude” on a frame or component, or Claude Code with ui-designer-to-code.

1. get_design_context (with clientFrameworks/clientLanguages from the repository), get_variable_defs, the code map, and the project’s conventions (CLAUDE.md, existing components).
2. Missing code-map entries are proposed (get_code_connect_suggestions) and, on confirmation, written (add_code_connect_map).
3. Code is written in a scratch copy, never in the workspace directly (AI-14): the panel creates a git worktree of the repository in the run folder (or, outside git, a copy of the target folder) and runs Claude there with --allowedTools "mcp__ui-designer__*,Read,Grep,Glob,Edit,Write", Bash still disallowed, the same settings override (Read deny rules, hooks off) and ud mcp --allow list as §6.3, Edit/Write confined to the scratch copy by a deny rule on every other path. Type checks and tests are not run by the agent in the panel; the user runs them.
4. When the run ends, the panel lists the changed files and opens VS Code’s diff editor per file. Apply copies the changes into the workspace with a WorkspaceEdit (undoable in each editor); Discard deletes the scratch copy. Code-map entries written in step 2 are part of the design proposal and follow its Accept/Discard.

In a terminal session the user’s own Claude Code permissions apply instead; the skill still asks the agent to show the diff before writing.

9.3 Review (AI-9)#

Trigger: “Review Design” on a frame, page or flow, or Claude Code with ui-designer-review.

1. get_metadata, ud system, get_screenshot, ud_lint, the review scripts.
2. Each finding becomes a comment (ud_run comment.add with node, category, severity) in the proposal.
3. Fixes for mechanical findings are prepared as separate use_figma calls with the description fix: <finding id>, so the change list can group them.
4. The panel shows findings in a list beside the comments, each with its fix (if any). Accept offers “comments only” or “comments and selected fixes”.