Analyzes Figma designs to ensure code implementation readiness and consistency with the Nexus design system.
The Figma Design Analyzer is a specialized skill designed to bridge the gap between UI design and frontend development. It audits Figma components by extracting metadata, properties, and variables directly from Figma URLs and comparing them against established project conventions, such as the Nexus token system and shadcn mappings. By identifying naming mismatches, missing states, and invalid token usage, it provides developers with a clear, prioritized report of issues that need to be resolved before or during code implementation, ensuring perfect design-to-code parity.
主要功能
01Mapping and divergence checking for shadcn-based component architectures.
02Automated extraction of Figma component properties and layer hierarchies via MCP.
03Categorized reporting of issues by severity, distinguishing between build-breaking and quality issues.
04Real-time validation of design tokens against the Nexus semantic CSS system.
050 GitHub stars
06Verification of component states, including hover, focus, active, and disabled.
使用场景
01Validating that Figma designs strictly adhere to a project's specific semantic token naming conventions.
02Streamlining the design-to-code workflow by identifying AI-readiness issues in Figma layers.
03Auditing design handoffs to ensure components are ready for frontend development.
