review-design

To audit UI components against Figma designs, provide a Figma node ID and component file path. The Skill retrieves design context via a Figma MCP server and produces a structured CSS properties audit covering colors, spacing, typography, borders, and layout with resolved design tokens.

A Figma MCP server retrieves design context including colors, spacing, and typography, then maps those design tokens directly to CSS properties. This mechanism generates a structured audit that highlights visual discrepancies between the Figma design and the implemented component code.

Yes, you can check multiple component variants and states when corresponding design frames exist in Figma. The Skill supports multi-state checks across component trees, reporting token-based resolutions to guide styling improvements for each variant.

To start a design review pass, you need a Figma node ID and the file path to your component code. You also need a connected Figma MCP server to retrieve the design context required for mapping design tokens to CSS properties.

The best way to surface visual discrepancies in spacing and typography is to run a structured audit that maps Figma design tokens to CSS properties. This generates a detailed report comparing colors, spacing, typography, borders, and layout against the original design.

Yes, the design review process works for both individual components and component trees. It retrieves design context via the Figma MCP server and audits visual implementation across the specified component structure, covering colors, spacing, typography, borders, and layout.