designer-integration
OfficialValidate UI against design specs
AuthorMadAppGang
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates pixel-level design validation for UI components, ensuring that the implemented code precisely matches the intended design specifications and reducing manual review time.
Core Features & Use Cases
- Pixel-Level Comparison: Compares UI implementation against design references (e.g., Figma, screenshots) to detect visual discrepancies.
- Automated Validation: Integrates with frontend development and browser debugging workflows for pre-commit or on-demand design fidelity checks.
- Use Case: After a developer implements a new button component based on a Figma design, this skill can automatically run a comparison to ensure the button's size, color, and spacing are pixel-perfect.
Quick Start
Delegate pixel-level validation from dev:frontend by comparing the reference design at {REFERENCE_PATH} against the implementation at {IMPL_URL}.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: designer-integration Download link: https://github.com/MadAppGang/magus/archive/main.zip#designer-integration Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.