What problem does it solve? Translating a screenshot or mockup into working UI code often loses critical details like spacing rhythm, typography roles, and component states. This Skill turns visual references into a structured, evidence-based design system that maps directly onto your repository's existing framework and tokens. ## Core Features & Use Cases - Design System Extraction: Identify layout grids, spacing scales, typography, color roles, radii, shadows, and icon styles from screenshots, separating observed properties from inferred behavior. - Implementation Handoff: Generate a concise specification covering components, responsive behavior, assets, and interaction states using the bundled templates. - Repository-Aware Implementation: Compare the extracted system against the target repository's component and icon libraries, then implement and verify against the reference at desktop and mobile sizes. - Use Case: You receive a Figma export screenshot of a dashboard. Use this Skill to extract its design tokens, map them to your existing component library, and produce an implementation spec your team can build from. ## Quick Start Use the ui-designer skill to extract a design system from the attached screenshot and produce an implementation specification for my repository.
