AI Design System Auditor

סקיל שעוזר לבדוק עקביות של מערכת עיצוב באמצעות ניתוח קומפוננטות עם AI ומציאת חוסר אחידות בצבעים, טיפוגרפיה ומרווחים.

תחום: עיצוב

מתי להשתמש

כשרוצים לוודא שהעיצוב במוצר עקבי על פני עשרות קומפוננטות, או לפני שדרוג של design tokens.

תגיות: design-system, audit, tokens

SKILL.md

--- name: ai-design-system-auditor description: Audit a design system for inconsistencies in colors, typography, spacing, and component usage --- ## Overview This skill scans React components and reports inconsistencies relative to the design tokens defined in tailwind.config or index.css. ## When to use - Before a major design system version bump - When onboarding new designers/developers - After a design refresh to find stragglers ## How it works 1. Read all files in `src/components/` and `src/pages/` 2. Extract color values (hex, rgb, hsl) and font sizes 3. Compare against design tokens in `tailwind.config.ts` 4. Report mismatches with file/line references ## Example usage ``` Use the ai-design-system-auditor skill to check our app for any hardcoded colors that should be using semantic tokens. ``` ## References - See references/sources.md