brain/docs/adr/ADR-006-a4-design-tooling-boundaries.md

ADR-006: A4 design-tooling boundaries

• Status: Accepted
• Date: 2026-05-17
• Amended: 2026-05-17 — Decision item 4 added (Universal Icons icon-path boundary).
• Deciders: Дмитрий

Context

The A4 «Дизайн» map section adds three tools to the existing FD #30 / UPM #31 / 21st #32: Figma MCP (#44), Universal Icons MCP (#45), Design plugin (#46). Two overlaps with Frontend Design (#30) were identified during selection and must be closed by explicit rule, not left implicit. Figma MCP install is deferred (no Figma account yet); the boundary still applies the moment it is connected.

Decision

1. Figma MCP — extract-only. Figma MCP is used solely for design-data and design-token reads (e.g. get_variable_defs). Its design-to-code generation capability is NOT used. Frontend Design (#30) remains the sole UI solver (PSR_v1 R10.2 — external plugins are read-only for decisions). Figma MCP output is material for FD/Claude, never a substitute solver.
2. Design plugin a11y is design-level, pre-code. The Design plugin's Accessibility Audit operates at design-critique level. Pa11y remains the single source of truth for technical a11y (CLAUDE.md §5 п.3, PSR_v1 R8 — Pa11y wins on conflict). FD continues to cover a11y-principles during design. Three tiers, no override.
3. Design plugin critique runs in R2 phase 1. The Design plugin's Design Critique runs in the research / pre-code planning phase, not the phase-8 review. Phase-8 review stays with the PSR_v1 R5 aspect-split (FD owns the UI/UX aspect) plus the Superpowers review skills. The Design plugin does not replace superpowers:requesting-code-review.
4. Universal Icons MCP raw-SVG is for non-Lucide collections only (amendment 2026-05-17). Lucide is the project's branded icon set (CTO-19), rendered via the lucide-vue-next component package plus the custom Vuetify IconSet mapping in app/resources/js/plugins/vuetify.ts (103-entry map). For any Lucide icon that component path is canonical. Universal Icons MCP get_icon raw-SVG output is used only for collections lucide-vue-next does not provide (Heroicons, Tabler, Phosphor, etc.), and the SVG is wrapped into a Vue component — never inlined to bypass the icon system. ADR-006 originally regulated #45 only against 21st logo_search; this item closes the previously unregulated #45 ↔ lucide-vue-next boundary.

Consequences

• A Figma MCP code-generation call is a process violation (CLAUDE.md §5 п.6).
• Universal Icons (#45) covers UI icons; 21st logo_search covers brand logos — distinct, both retained.
• Pulling a Lucide icon as raw SVG via Universal Icons MCP, instead of lucide-vue-next, is a process violation (CLAUDE.md §5 п.6 — two tools on one task).
• These boundaries are mirrored as PSR_v1 R10.1 rows + R6/R10/R14 notes; the Decision-4 icon-path boundary is mirrored in CLAUDE.md §3.3 #45 and Tooling §4.20.

Enforcement

None — role boundaries, verified by code review, not by a regex gate.