Product-Designer-Agent

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.

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.

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.

Technical and tool skills for product designers covering design tools, front-end knowledge, design-dev collaboration, and emerging technologies. Use when working with Figma, Sketch, Adobe XD, Framer, ProtoPie, or After Effects. Also for front-end topics (HTML/CSS, flexbox, grid, CSS animations, JavaScript, React/Vue/Angular, design-to-code handoff, DevTools), design-dev collaboration (Git, Figma API, design tokens, Storybook, component libraries, design QA), or emerging tech (AR/VR, voice interfaces, AI/ML features, gesture control). Triggers on: Figma, Sketch, Adobe XD, Framer, ProtoPie, After Effects, design tool, HTML, CSS, flexbox, grid, responsive, CSS animation, JavaScript, React, Vue, Angular, design handoff, DevTools, Git, Figma API, Storybook, component library, design QA, AR design, VR design, voice interface, AI feature design, gesture control.

UX design covering interaction design, wireframing, prototyping, usability, accessibility, and responsive design. Use when designing user flows, task flows, state design, edge cases, progressive disclosure, affordances, feedback, or microcopy. Also for wireframing, interactive prototypes, WCAG compliance, keyboard navigation, screen readers, color contrast, focus management, cognitive load, error prevention, or responsive and adaptive design (mobile-first, breakpoints, touch targets, platform patterns). Triggers on: user flow, task flow, state design, empty state, edge case, progressive disclosure, affordance, feedback, microcopy, wireframe, prototype, WCAG, accessibility, keyboard navigation, screen reader, color contrast, focus, inclusive design, cognitive load, error handling, mobile-first, breakpoints, touch target, responsive layout, iOS, Android, cross-device.

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.

Product design planning and strategy skill covering product strategy, information architecture, and project planning. Use when defining problems, assessing opportunities, prioritizing features, planning roadmaps, defining success metrics, designing value propositions, structuring content or navigation, designing search or taxonomy systems, scoping design work, facilitating design sprints or workshops, or assessing design risks. Triggers on: problem definition, opportunity assessment, feature prioritization, RICE, MoSCoW, Kano, roadmap, KPIs, success metrics, value proposition, information architecture, site map, content strategy, taxonomy, navigation design, search design, mental model, design scoping, design sprint, workshop facilitation, risk assessment, resource planning.

UX research and discovery skill covering user research methods and research synthesis. Use when planning or conducting user research, usability testing, A/B testing, survey design, persona development, journey mapping, empathy mapping, competitive analysis, ethnographic research, or analytics interpretation. Also use when synthesizing research findings via affinity mapping, insight generation, stakeholder interviews, jobs-to-be-done framework, or heuristic evaluation. Triggers on: user research, usability test, interview guide, research plan, persona, journey map, empathy map, competitive analysis, A/B test, survey, analytics, affinity map, insight synthesis, heuristic evaluation, JTBD.

Visual design and branding skill covering brand expression, design systems, and visual refinement. Use when creating or evaluating brand systems, style guides, design language, tone and voice, or marketing design. Also use when building component libraries, defining design tokens, creating pattern libraries, writing design system documentation, managing design system versioning, or establishing governance. Also use for visual refinement including pixel perfection, optical alignment, consistency auditing, or polish and craft. Triggers on: brand system, visual identity, style guide, design language, design principles, tone and voice, marketing design, landing page, component library, design tokens, pattern library, design system documentation, versioning, governance, pixel perfect, optical alignment, consistency audit, polish, craft, visual refinement, design system, brand expression, brand guide.

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns with Tailwind CSS. Also use when migrating from Tailwind v3 to v4, setting up dark mode theming with native CSS, building responsive components, or implementing design tokens with CSS-first configuration.