菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/MadAppGang/magus --skill designer-integration命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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 |
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.
Use this skill when:
Check if the designer plugin is available before delegating:
# Check designer plugin availability
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
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:
# Pixel-diff comparison
/designer:review REFERENCE_SOURCE={path} IMPL_SOURCE={url}
| 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 |
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 overlaySeverity thresholds:
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