cx-audit

DS Adoption Check

Scans a selected Figma frame for Design System adoption gaps, auto-layout issues, and hardcoded values. Produces a categorized report with actionable fix suggestions.

How to trigger

cx-audit

Type this in the Kiro chat with a frame or section selected. Sections are audited frame-by-frame with a combined report.

What it checks

DS Adoption

Identifies elements that look like DS components but aren't instances. Suggests the correct component + variant.

Detects: Buttons, Inputs, Alerts, Checkboxes, Radios, Tabs, Cards

Auto-Layout Issues

Flags frames with multiple children but no auto-layout, fixed sizing where FILL fits, and non-standard spacing values.

Checks: Missing auto-layout, fixed vs FILL, spacing token compliance

Hardcoded Values

Finds colors and spacing that don't match known token values. Reports the nearest token match.

Compares against: Primitives + Tokens collections, spacing scale (4-64px)

Report structure

Section 1: DS Adoption — Element, what it looks like, suggested DS component, component key

Section 2: Auto-Layout — Element, issue description, fix suggestion

Section 3: Hardcoded Values — Element, property, current value, nearest token

Summary — X of Y elements use DS, Z could be replaced, N layout issues, M hardcoded values

Fix options

After the report, the assistant offers:

Fix auto-layout — Applies auto-layout corrections, sets FILL where flagged, adjusts spacing to tokens
Just the report — No changes, use as reference

Note: DS component replacement is NOT done here — that's what cx-rebuild is for. This command only fixes structural issues.

MCP tools used

Figma Console MCP

Selection, frame tree traversal, property reading (fills, layout, sizing), auto-layout application

Docs →

Prerequisites

Figma Desktop with Bridge Plugin running
A frame or section selected

← Back to all flows