Nox-Lumen Mfgfigma-design-review
Capabilities
Compare Figma specs with implemented UI, emitting structured compliance reports.
Layers
| Layer | Checks |
|---|---|
| Tokens | Colors, typography, radii, spacing, elevation |
| Pixels | Screenshot deltas, drift %, positional offsets |
| Semantics | Component trees, hierarchies, interactive states |
Outputs
Compliance packets include:
- Token alignment percentage
- Pixel variance percentage
- Semantic drift list
- Severity-classified defect register
- Optional before/after frames (combine with
html-reportdashboards)
When to use
| Scenario | Notes |
|---|---|
| Hand-off QA | Automated pass before dev sign-off |
| Regression radar | Catch accidental UI regressions |
| Design-system audits | Confirm pages honor shared tokens |
Out of scope: editing Figma files, generating UI code, or tooling for Sketch/XD.
Invocation
Examples:
- "Run Figma fidelity review"
- "Compare design vs. frontend"
- "Token sweep"
- "Pixel diff QA"
- "Design walk-through"
Pairings
| Pair | Scenario |
|---|---|
| gstack-browser | Scripted captures of live pages |
| html-report | Executive dashboards |