> For the complete documentation index, see [llms.txt](https://docs.arkosdevs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.arkosdevs.com/ai-agents/agent-catalog/prism.md).

# Prism

### The User Experience Alchemist

Prism serves as your user experience alchemist, transforming interfaces into intuitive, accessible, and engaging experiences that delight users across all platforms and devices. This autonomous UX specialist analyzes user behavior, implements design best practices, and continuously optimizes interfaces for maximum usability and satisfaction.

### User-Centric Design Intelligence

**Behavioral Analysis**: Prism analyzes user interactions, navigation patterns, engagement metrics, and conversion funnels to understand how users actually interact with your applications. The agent identifies pain points, optimization opportunities, and areas where user experience can be enhanced.

**Accessibility Excellence**: The agent ensures all interfaces meet WCAG guidelines and accessibility best practices automatically. Prism implements proper color contrast, keyboard navigation, screen reader compatibility, and other accessibility features while maintaining visual appeal and functionality.

**Performance-Focused UX**: Prism optimizes user interfaces for performance including lazy loading, efficient animations, optimized images, and fast loading times. The agent ensures that great design never compromises application performance.

### Advanced Interface Optimization

```css
/* Prism-generated comprehensive design system (CSS) */

/* ==================================================
   ARKOS Design System - Generated by Prism
   Accessible, performant, and responsive components
   ================================================== */

:root {
  /* Color System - WCAG AA Compliant */
  --color-primary: #4c6ef5;
  --color-primary-hover: #364fc7;
  --color-primary-active: #5c7cfa;
  --color-primary-light: #e7f5ff;
  
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;
  --color-secondary-light: #f8f9fa;
  
  --color-success: #51cf66;
  --color-warning: #ffd43b;
  --color-error: #ff6b6b;
  --color-info: #339af0;
  
  /* Neutral Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Typography Scale */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  /* Spacing System */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #5c7cfa;
    --color-primary-hover: #748ffc;
    --color-primary-active: #4c6ef5;
    --color-primary-light: #1e1f30;
    
    --color-gray-50: #111827;
    --color-gray-100: #1f2937;
    --color-gray-200: #374151;
    --color-gray-300: #4b5563;
    --color-gray-400: #6b7280;
    --color-gray-500: #9ca3af;
    --color-gray-600: #d1d5db;
    --color-gray-700: #e5e7eb;
    --color-gray-800: #f3f4f6;
    --color-gray-900: #f9fafb;
  }
}

/* Base Reset and Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Interactive Button Component */
.btn {
  /* Base button styles with accessibility considerations */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  
  min-height: 44px; /* WCAG touch target size */
  padding: var(--spacing-3) var(--spacing-6);
  
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  
  cursor: pointer;
  transition: all var(--transition-fast);
  
  /* Focus management for accessibility */
  outline: none;
  position: relative;
}

.btn:focus-visible {
  /* High-visibility focus indicator */
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
}

/* Primary Button Variant */
.btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary Button Variant */
.btn--secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

/* Responsive Card Component */
.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.card__content {
  padding: var(--spacing-6);
}

.card__footer {
  padding: var(--spacing-6);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

/* Responsive Grid System */
.grid {
  display: grid;
  gap: var(--spacing-6);
  width: 100%;
}

.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive breakpoints */
@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  
  .card {
    margin: var(--spacing-4);
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .btn:hover {
    transform: none;
  }
  
  .card:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .btn {
    border-width: 3px;
  }
  
  .card {
    border-width: 2px;
  }
}

/* Focus Management */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip Link for Keyboard Navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 9999;
}

.skip-link:focus {
  top: 6px;
}

/* Loading States */
.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Form Controls */
.form-control {
  width: 100%;
  min-height: 44px; /* Touch target size */
  padding: var(--spacing-3) var(--spacing-4);
  font-family: inherit;
  font-size: var(--font-size-base);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: white;
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
}

.form-control:invalid {
  border-color: var(--color-error);
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-700);
}

/* Error and Success States */
.error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
}

.success {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }

.hidden { display: none; }
.visible { display: block; }

@media (max-width: 768px) {
  .hidden-mobile { display: none; }
  .visible-mobile { display: block; }
}
```

### Responsive Design Excellence

**Multi-Device Optimization**: Prism creates interfaces that work seamlessly across all devices and screen sizes. The agent implements responsive design patterns, optimizes touch interactions for mobile devices, and ensures consistent experiences across platforms.

**Progressive Enhancement**: Interfaces are built with progressive enhancement principles, ensuring core functionality works on all devices while enhanced features are available on capable devices.

**Performance Optimization**: Responsive design includes performance considerations such as adaptive image loading, efficient CSS delivery, and optimized JavaScript execution for different device capabilities.

### Design System Management

**Comprehensive Design Systems**: Prism creates and maintains sophisticated design systems including color palettes, typography scales, component libraries, spacing systems, and interaction patterns. These systems ensure consistency across all interfaces while enabling efficient scaling.

**Component Libraries**: Reusable component libraries accelerate development while maintaining design consistency. Components include accessibility features, performance optimizations, and responsive behavior by default.

**Design Token Management**: Systematic management of design tokens enables consistent styling across platforms and facilitates easy theme updates and brand evolution.

### Conversion Optimization

**User Flow Analysis**: Prism analyzes user flows to identify opportunities for improving conversion rates, reducing abandonment, and enhancing user engagement. The agent uses data-driven insights to guide design decisions.

**A/B Testing Integration**: Built-in support for A/B testing enables systematic optimization of interface elements. Tests are designed to measure meaningful metrics while maintaining statistical validity.

**Behavioral Insights**: Deep analysis of user behavior patterns informs optimization strategies. The agent identifies where users struggle and implements targeted improvements.

### Micro-Interaction Design

**Purposeful Animations**: Prism creates delightful micro-interactions that provide feedback, guide user actions, and enhance the overall experience. These interactions feel natural and purposeful rather than gratuitous.

**Performance-Conscious Animation**: All animations are optimized for performance, using efficient techniques like CSS transforms and GPU acceleration. Animations respect user preferences for reduced motion.

**Accessibility Considerations**: Micro-interactions include accessibility considerations such as appropriate timing, user control options, and alternative interaction methods for users with different abilities.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.arkosdevs.com/ai-agents/agent-catalog/prism.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.