diff --git a/commands/figma-design-reviewer.md b/commands/figma-design-reviewer.md new file mode 100644 index 0000000..a28e9f3 --- /dev/null +++ b/commands/figma-design-reviewer.md @@ -0,0 +1,44 @@ +Perform a Figma-to-code design audit for: $ARGUMENTS + + + + + + + + + + +## What to do + +**Step 1 — Fetch Figma design tokens** +Make a GET request to: +https://api.figma.com/v1/files/$FIGMA_FILE_KEY/styles +with header: X-Figma-Token: $FIGMA_API_TOKEN + +Extract all: + +- Colors and their hex values +- Text styles (font family, size, weight, line height) +- Effect styles (shadows, blurs) +- Grid styles + +**Step 2 — Fetch the specific component from Figma** +Search for a component named $ARGUMENTS in the Figma file and extract its exact visual properties. + +**Step 3 — Audit the code** +Compare the extracted Figma values against the actual implementation in the codebase. Check: + +- Every color matches a Figma color style +- Every font matches a Figma text style +- Spacing values are consistent with Figma layout +- Component structure mirrors the Figma component hierarchy + +**Step 4 — Report** +Output: + +- Figma design tokens found +- Exact mismatches between Figma and code with file, line number, Figma value vs actual value +- Missing tokens that should be added to your config +- Design system compliance score out of 100 +- Save the full report as docs/design-audit-$ARGUMENTS.md in the project root.