SoftForge UI Designer — AI agents, skills and MCP
How Claude Code designs with UI Designer: skills, the design loop, the MCP server, the AI panel, proposals, safety and evaluation.
Esta página está em inglês; a tradução está a caminho.
| Product | SoftForge UI Designer (SoftForge.softforge-ui-designer) |
| Document | AI-001 |
| Status | Draft; review decisions D4, D6, D7, D9, D12 applied |
| Date | 2026-10-10 |
| Owner | Arthur de Araújo Farias |
| Parent | SRS-001 (#1), sections 3 (command parity and the CLI) and 16 (AI design) |
| Related | FMT-001 file format (#2) · CLI-001 the ud command (#3) · ARC-001 architecture (#5) · UI-001 editor design (#6) |
This document specifies how AI agents design in UI Designer: the surfaces they use, the Claude Code skills the
extension installs, the loop an agent follows, the ud mcp server, the AI panel inside the editor, model
routing, quick actions, design↔code workflows, the VS Code language model tools, safety, and how all of it is
evaluated. It realises SRS requirements AI-1 to AI-15 and CMD-7 and CMD-9, and it is the “AI-001” that the SRS
cites. Section 3 (skills) is cited by AI-2 and keeps its number.
The audience is the engineers who implement and review the AI features, and the authors of the skill files.
Generated from issue #4 of planning.pb by
scripts/docs-specs.mjs; the board is the source of truth.
Status. Done 2026-10-10. AI-001 complete with D4, D6, D7, D9, D12 applied; the document now lives in the comments of this issue.
- 1. Principles
- 2. SurfacesAn agent reaches a design through one of four surfaces.
- 3. SkillsSkills are folders of Markdown and scripts that Claude Code loads when their description matches the task.
- 4. The design loopEvery skill and the AI panel follow the same loop.
- 5. The MCP serverud mcp runs a Model Context Protocol server (protocol 2025-06-18) over stdio, named ui-designer (CMD-7).
- 6. The AI panelThe panel builds the prompt from parts, in this order, and keeps the total under a budget (default 12 000 tokens before attachments):
- 7. Model routingModels are routed by tier (AI-15).
- 8. Quick actionsQuick actions (AI-10) run on the selection from the context menu, the panel's action row and Ctrl+/ (UI-6).
- 9. Design ↔ code workflowsTrigger: "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.
- 10. Language model tools for VS Code chatThe extension contributes languageModelTools in package.json and registers them with vscode.lm.registerTool (AI-12).
- 11. Safety and privacyA panel turn runs a general agent (Claude Code) inside the user's repository, so the boundary is not "which tools are missing" but "which tools and commands are allowed", and it has to hold against…
- 12. EvaluationCMD-9 is done when the scenario suite passes against ud mcp, run by Claude Code with Figma's skills and with our skills.
- Appendix A. Traceability