Design Elite Product Experiences

This skill provides Apple-level product design guidance - visual systems, UX flows, accessibility, proprietary visual language, design tokens, prototyping, and handoff. It covers Figma, design systems, typography, color, spacing, motion design, and cognitive design principles. It's built around Jony Ive/Apple's 10 design principles (radical simplicity, material honesty, restraint as a decision, systemic coherence, details matter, function defines form, durability, accessibility as default not an add-on, continuity across screens, delightful surprise) and cognitive design rules (zero cognitive load, clear affordances, immediate feedback, error-preventing design). It provides a complete design-system folder structure (tokens for colors/typography/spacing/shadows/motion/radius, atomic components, UX patterns for onboarding/empty-states/loading/errors, and guidelines for voice-tone/imagery/accessibility), a worked design-tokens JSON example, a six-stage UX flow structure (entry point, context, action, feedback, outcome, next step), an elite five-minute onboarding sequence, empty-state copywriting guidance, voice UI principles and response scripting, a five-step constructive critique framework (observation, principle, impact, alternative, trade-off), and a UI critique checklist (visual hierarchy, WCAG AA 4.5:1 contrast, 44x44px touch targets, interactive states, responsiveness, accessibility, perceived performance).

Use it when you need specialized product design assistance: creating a design system, defining a visual language, reviewing UX, auditing accessibility, generating design tokens, defining product branding, or critiquing a UI.

Do not use it for tasks unrelated to product design, when a simpler and more specific tool can handle the request, or when the user needs general-purpose assistance without design domain expertise. Treat its output as design guidance to review and adapt to your project's context, not a substitute for environment-specific validation, user testing, or expert design review.

Input: a product design task (design system, UX flow, onboarding, UI critique, visual identity). Output: structured design deliverables - token sets, UX flow maps, critique reports, or design system documentation - via slash commands like /design-critique, /design-tokens, /ux-flow, /voice-ux, /onboarding, /design-system, /accessibility, and /visual-identity.

{
  "color": { "brand": { "primary": "#6C63FF", "accent": "#FF6B6B" } },
  "typography": { "h1": { "size": "36px", "weight": "700", "line": "1.2" } },
  "spacing": { "xs": "4px", "md": "16px", "xl": "32px" }
}

References a design tool stack - Figma (UI design, prototyping, handoff), FigJam (user journeys, workshops), Zeroheight (design system docs), Lottie (animation export), Mobbin and Screenlane (UI pattern reference) - and a five-day design sprint process (understand, diverge, decide, prototype, test). Chains with analytics-product, growth-engine, monetization, and product-inventor skills.

Product designers and design-minded product teams building design systems, UX flows, onboarding sequences, or voice UI who want an Apple-caliber, principle-driven framework with concrete tokens and checklists rather than generic design advice.