| name | designer-integration |
| description | Detects the designer@magus plugin and delegates pixel-level design validation. Use when dev:frontend or dev:browser-debugging needs design comparison or AI semantic UI analysis. |
| disable-model-invocation | true |
Designer Plugin Integration
Overview
The designer plugin provides pixel-level design comparison and AI semantic analysis
for UI validation. When installed alongside dev, it enhances frontend workflows with
structured design fidelity checks.
This skill is optional — all dev plugin functionality works without designer installed.
When to Use
Use this skill when:
- Implementing UI components from a design reference (Figma, screenshot)
- Validating that implementation matches design spec
- Running pre-commit design fidelity checks
Detection Pattern
Check if the designer plugin is available before delegating:
designer_available=$(claude /plugin list 2>/dev/null | grep -c "designer" || echo "0")
if [ "$designer_available" -gt "0" ]; then
echo "designer plugin available — can delegate validation"
else
echo "designer plugin not installed — use manual comparison"
fi
Delegation Pattern
When designer is available, delegate pixel-level validation from dev:frontend:
Task(
subagent_type: "designer:design-review",
prompt: "Compare reference design at {REFERENCE_PATH} against implementation at {IMPL_URL}. Viewport: 1440x900."
)
Or use the designer:review command directly:
/designer:review REFERENCE_SOURCE={path} IMPL_SOURCE={url}
Integration Points
| dev Component | Without designer | With designer |
|---|
dev:frontend agent | Manual Chrome MCP screenshots | Delegate to designer:design-review agent |
dev:browser-debugging skill | Manual visual check | designer:design-review agent for diff report |
| Any UI implementation | Describe visual issues | Structured pixel-diff + semantic report |
Output Format
When designer:review succeeds, it produces:
diff.json — Structured report with pixel diff + semantic analysissummary.md — Human-readable summary with severity (PASS/WARN/FAIL/CRITICAL)diff.png — 3-panel composite: reference | implementation | diff overlay
Severity thresholds:
- PASS: 0–0.5% pixel diff
- WARN: 0.5–2.0%
- FAIL: 2.0–10.0%
- CRITICAL: >10.0%
User Notification Template
If designer plugin is NOT installed and user needs design validation:
Design validation features are available with the designer plugin.
Install: /plugin marketplace add designer@magus
Without the designer plugin, you can still:
- Use Chrome MCP screenshot capture for manual visual comparison
- Use Gemini via claudish for AI-based visual analysis
- Compare screenshots manually side-by-side
