ui-designer

Design system extraction analyzes reference UI images to identify and document color palettes, typography, spacing, and component styles. This Skill processes screenshots or mockups to automatically generate design system documentation with color codes, font specifications, and layout rules ready for implementation.

Yes. This Skill converts reference UI images into implementation-ready prompts that include theme specifications, component variants, and dark-mode options. The output is formatted for direct use in development environments to reproduce the reference design's visual and interaction patterns.

Outputs include color palettes, typography rules, spacing systems, component styles, animation specifications, and dark-mode variants delivered as markdown documentation and UI implementation prompts. You also receive PRD content and multiple design variations (mobile and web) assembled into executable UI specifications.

Provide reference UI images and your project concept. The Skill extracts design patterns, generates comprehensive design system documentation, and produces PRD content describing the visual system, components, and interaction guidelines derived from the reference aesthetics.

Yes. The Skill processes UI screenshots from mobile and web contexts, extracting design systems applicable to both. It generates separate design variations for each platform and produces consolidated UX prompts that maintain consistency across mobile and web implementations.

The Skill identifies and documents design patterns across multiple reference images, extracting the dominant visual system. If inconsistencies exist, the output includes the primary design system with documented variations, enabling you to choose which patterns to standardize in your implementation.