Skills

Creates accessible color palettes for brands and UIs from a brief or a seed color. Produces primary, secondary, and neutral scales with hex values, suggests semantic tokens (success, warning, error, info), and checks foreground/background pairings against WCAG contrast ratios. Outputs ready-to-use CSS variables or design tokens.

Creates comprehensive design system documentation and component specifications from existing UI patterns or requirements. Generates design tokens, component APIs, usage guidelines, and accessibility specifications. Supports Figma-to-code workflows and produces consistent theming across platforms.

Creates production-grade frontend interfaces with high design quality. Generates complete UI components, pages, and layouts using modern frameworks (React, Vue, Svelte) with Tailwind CSS or CSS-in-JS. Focuses on unique, polished designs that avoid generic AI aesthetics — emphasizing typography, spacing, color harmony, and micro-interactions.

Generates complete, responsive landing pages from a product description or brief. Produces semantic HTML, modern CSS (Tailwind or vanilla), and optional JavaScript for interactions. Follows conversion-optimized layouts with hero sections, features, social proof, pricing, and CTAs.

Facilitates structured brainstorming sessions using proven ideation frameworks — SCAMPER, Six Thinking Hats, How Might We, Crazy Eights, and more. Generates diverse ideas, challenges assumptions, and helps converge on the strongest concepts.