ui-design

Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.

Skills (9)

layout-grid — Define responsive layout grid systems with columns, gutters, margins, and breakpoints.
color-system — Build a comprehensive color system with palette generation and accessibility compliance.
typography-scale — Create a modular typography scale with size, weight, and line-height relationships.
responsive-design — Design adaptive layouts and interactions across all screen sizes and inputs.
visual-hierarchy — Establish clear visual hierarchy through size, weight, color, spacing, and position.
spacing-system — Create a consistent spacing system based on a base unit with application rules.
dark-mode-design — Design effective dark mode interfaces with proper color adaptation and contrast.
illustration-style — Define an illustration style guide with visual language and usage rules.
data-visualization — Design clear, accessible data visualizations with appropriate chart selection.

/design-screen — Design a complete screen layout from a description or requirements.
/color-palette — Generate a full color palette with semantic mapping and accessibility checks.
/type-system — Create a complete typography system from brand fonts or requirements.
/responsive-audit — Audit a design for responsive behavior across breakpoints.