Agentic UX Design - Relationship-Centric Interfaces
Design AI-first interfaces that build ongoing relationships through memory, trust evolution, and collaborative planning, not just isolated screen interactions
What this skill does
# Agentic UX Design - Relationship-Centric Interfaces ## Overview **The paradigm shift from screen-centric to relationship-centric design.** Traditional UX optimizes individual screens and isolated interactions. Agentic UX designs for ongoing relationships where systems learn, remember, and evolve alongside users across sessions, devices, and contexts. **Core principle:** Every interaction builds on learned preferences and user history. Systems don't just respond—they develop understanding that compounds over time. **Announce at start:** "I'm using the Relationship Design skill to create an agentic, memory-aware interface that builds long-term relationships with users." ## When to Use Use this skill when: - Designing AI-powered applications, chatbots, or agent systems - Building interfaces with repeated user interactions over time - Creating systems that should learn from user behavior - Rethinking traditional dashboards or SaaS products for the AI era - Users complain about "starting over" every session - You need to measure relationship quality, not just conversion rates - Designing for trust evolution from transparency to autonomy - Building collaborative planning features (human + AI co-creation) **When NOT to use:** - Simple one-time transactions with no user accounts - Static content websites with no personalization needs - Systems where memory/learning creates privacy concerns - Interfaces where consistency > adaptation (e.g., medical equipment) ## The Five Pillars of Agentic UX ### 1. Memory Revolution: From Static Preferences to Contextual Intelligence **Old model:** Store static preferences (theme: dark, language: EN) **New model:** Maintain dynamic, evolving relationship models **Design for:** - **Behavioral patterns:** Not just "user clicked X" but "user spends 20 min frustrated searching for Y on Tuesday evenings" - **Emotional context:** Recognize frustration, urgency, exploration, decision-making modes - **Temporal evolution:** How preferences change over weeks/months - **Cross-session continuity:** Seamless continuation across devices and time **Key question:** What would this experience look like if it remembered everything and got better over time? ### 2. Trust as a Design Material: The Three-Stage Evolution Design interfaces that earn autonomy through graduated trust: **Stage 1: Transparency Phase** - Show all reasoning, decision processes, confidence levels - Explain why the system suggests actions - Reveal data sources and logic paths - User wants to see everything **Stage 2: Selective Disclosure Phase** - Show reasoning only for important/uncertain decisions - Quiet confidence for routine actions - System learns when to show work vs. act confidently - User trusts but verifies **Stage 3: Autonomous Action Phase** - Act independently with subtle confirmation patterns - Clear escalation paths for mistakes - User delegates entire decision categories - Trust through consistent, aligned behavior **Design patterns:** - Progressive disclosure controls (let users adjust transparency level) - Confidence indicators (system certainty visualization) - Trust recovery protocols (clear undo/correction paths) - Explain-on-hover for autonomous actions **Key question:** How might users develop trust with this system gradually? ### 3. Relationship-Centric Architecture **Design ongoing partnerships, not isolated transactions.** **From:** User logs in → completes task → logs out → system forgets **To:** System maintains continuous awareness of: - User's ongoing goals and projects - Communication preferences and patterns - Learning from what works for this individual - Relationship depth over time **Implementation patterns:** - **Memory visualization:** Show what system remembers (preferences, goals, patterns) - **Context indicators:** Subtle cues showing how past interactions influence current suggestions - **Forgetting controls:** User agency over what gets remembered vs. forgotten - **Relationship timeline:** Visual representation of how the relationship evolved **Key question:** What goals are users really trying to achieve, and how could an agentic system help them get there more effectively? ### 4. Systems That Plan Their Own Path **From:** Design every possible user path explicitly **To:** Design goal-alignment mechanisms where system dynamically constructs paths **Agentic systems:** - Maintain awareness of underlying user objectives - Adapt interaction patterns based on what works - Learn from imperfect demonstrations and natural language feedback - Construct custom workflows for individual users **Design for:** - **Goal continuity:** Persistent awareness of user objectives across sessions - **Proactive nudging:** Gentle next-step suggestions without intrusion - **Collaborative planning:** Human + AI jointly developing approaches - **Adaptive interfaces:** UI elements that evolve based on usage patterns **Key question:** Can the system help users achieve goals they haven't fully articulated yet? ### 5. New Success Metrics: Beyond Conversion Rates Traditional UX metrics (session duration, conversion rates, clicks) miss the point for agentic experiences. **Measure instead:** **Relationship Quality** - Trust scores and delegation comfort - User confidence in system decisions - How often users second-guess the system - Comfort with autonomous actions **Compounding Value** - Experience improvement over time - Increasingly complex problems solved - Better outcomes through accumulated understanding - Month 6 vs. Month 1 comparison **Context Accuracy** - System understanding of intent and preferences - Alignment with user values and goals - Situational needs recognition - Prediction accuracy for important decisions **Democratic Alignment** - Alignment with broader human values - Socially acceptable behavior boundaries - Ethical decision-making - Collective constitutional principles **Key question:** How do we know if the relationship is getting better, not just more frequent? ## The Relationship Design Process ### Phase 1: Understand the Relationship Context Ask these questions: 1. **Relationship duration:** How long do users typically engage? (days, months, years?) 2. **Interaction frequency:** Daily? Weekly? Sporadic? 3. **Goal complexity:** Simple tasks or evolving, complex objectives? 4. **Trust requirements:** What level of autonomy makes sense? 5. **Memory sensitivity:** What should system remember vs. forget? 6. **Personalization depth:** How much should experience adapt? ### Phase 2: Map Trust Evolution For your specific use case: 1. **Define transparency needs:** What must always be explained? 2. **Identify routine actions:** What can become autonomous over time? 3. **Design trust indicators:** How will users see system confidence? 4. **Create recovery paths:** What happens when system makes mistakes? 5. **Plan trust checkpoints:** How do users adjust autonomy levels? ### Phase 3: Design Memory Architecture 1. **Behavioral data:** What patterns matter? 2. **Preference evolution:** What changes over time? 3. **Context signals:** What indicates user's current state/goal? 4. **Memory controls:** How do users manage what's remembered? 5. **Cross-session continuity:** How does system maintain context? ### Phase 4: Build Collaborative Planning Patterns 1. **Goal capture:** How does system learn user objectives? 2. **Proactive suggestions:** When/how does system offer help? 3. **Co-creation interface:** How do human + AI work together? 4. **Adaptive UI:** What interface elements should evolve? 5. **Learning feedback:** How do users correct system understanding? ### Phase 5: Define Success Metrics Choose 2-3 metrics from each category: - Relationship Quality indicators - Compounding Value measures - Context Accuracy signals - Democratic Alignment guardrails Track these over weeks/months, not just sessions. ## Design Patterns Library ### Memory-Aware Interface Components **Contextual Timelin
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.