analyze_ui
Identify UI components and colors from screenshots or mockups, then match them against your design system tokens to find gaps and inconsistencies.
Instructions
Analyze UI elements and colors against the design system. Describe the components you see and the colors used — get back which components are in the system, which colors match existing tokens (using perceptual color distance), and what gaps exist. Useful for reverse-engineering a screenshot or mockup into system terms.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| colors | No | Comma-separated hex colors observed in the UI, e.g. '#3B82F6, #EF4444, #F3F4F6, #1F2937' | |
| components | Yes | Comma-separated list of UI components visible, e.g. 'button, card, text-input, badge, avatar' | |
| description | No | Optional description of the UI being analyzed, e.g. 'Dashboard with sidebar navigation and data cards' |