product-designer

Scan this repo's existing tokens, components, and patterns; write the design system to docs/design.md; add the design-first fenced block to CLAUDE.md.

Senior product designer for any product, any stack. Invoke for ANY change that touches the visual, interactive, structural, or strategic layer — new screens, redesigns, design system work, token / color / spacing / font / icon changes, animations and loading states, forms and modals, UX audits, accessibility fixes, feature scoping, product strategy. Manages docs/design.md and a CLAUDE.md design-first block in the host repo so the design system persists across sessions. Stack-agnostic — reads conventions from the target repo at runtime. Keywords: design, UI, UX, screen, component, layout, style, animation, icon, button, card, badge, input, form, modal, flow, navigation, design system, token, color, spacing, typography, accessibility.

AI Design Lifecycle (AIDLC) — designs AI-powered product experiences covering strategy, research, UX patterns (conversational UI, copilots, prompts, suggestions), interaction design (streaming, multi-turn, regeneration), states and edge cases (loading, hallucination, rate limiting), safety and ethics (bias, consent, transparency), personalization (adaptive UI, recommendations), and emerging patterns (agents, generative UI, multimodal, RAG). Use when designing any AI/ML feature, chatbot, copilot, recommendation system, generative AI interface, or AI-assisted workflow. Triggers on: AI, ML, LLM, chatbot, copilot, conversational UI, prompt, generative AI, recommendation, suggestion, streaming response, hallucination, AI safety, AI ethics, bias, content moderation, AI onboarding, human-in-the-loop, regenerate, AI agent, multimodal, RAG, prompt engineering, AI personalization, adaptive UI.

Business knowledge for product designers covering business fundamentals, product metrics, growth & monetization, stakeholder communication, and industry domain expertise. Use when making product decisions that involve business models, revenue, pricing, KPIs, funnels, retention, growth loops, conversion optimization, churn, upselling, executive communication, OKRs, ROI, business cases, market analysis, competitive intelligence, regulatory compliance, or customer segmentation. Triggers on: business model, revenue, pricing, unit economics, CAC, LTV, churn, TAM, SAM, SOM, KPI, funnel, cohort, retention, DAU, MAU, north star metric, product-market fit, growth loop, conversion, onboarding optimization, upsell, cross-sell, pricing page, business case, ROI, OKR, budget, risk, trade-off, opportunity sizing, GDPR, compliance, competitive intelligence, market research, go-to-market.

Specialized design covering mobile, web, and emerging disciplines. Use when designing for iOS or Android (HIG, Material Design, touch gestures, tab bars, bottom sheets, notifications, onboarding, app icons), web specializations (above-the-fold, form design, data tables, dashboards, e-commerce, checkout, content layouts), or emerging areas (Design Ops, inclusive design, ethical design, dark pattern avoidance, sustainable design, service design, design thinking facilitation). Triggers on: iOS design, HIG, Material Design, Android design, touch gesture, swipe, tab bar, bottom sheet, push notification, mobile onboarding, app icon, above the fold, hero section, form design, multi-step form, data table, dashboard design, e-commerce, product page, checkout, article layout, Design Ops, inclusive design, ethical design, dark pattern, sustainable design, service design, service blueprint, design thinking, facilitation.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Micro-interactions and animation — covers Saffer's Trigger-Rules-Feedback-Loops framework, signature moments, scoring, motion principles, animation patterns, advanced techniques, and performance. Use when designing or auditing microinteractions, implementing loading animations, hover effects, button feedback, page transitions, scroll animations, pull-to-refresh, swipe gestures, toggles, modals, or toasts. Also covers physics-based motion, spring animations, Lottie, SVG animation, morphing, easing curves, orchestration, and 60fps performance with prefers-reduced-motion support. Triggers on: microinteraction, animation, motion, easing, spring physics, timing, duration, loading spinner, skeleton screen, hover effect, button press, page transition, scroll animation, parallax, pull-to-refresh, swipe gesture, toggle switch, modal animation, toast, Lottie, SVG animation, morphing, reduced motion, 60fps, orchestration, state transition.