# Frame — AI Agent UX/UI Design System & React Component Library

> Frame is an open React design system for AI agent and conversational UX/UI, with installable components, AI-readable rules, automated design checks, and real-product validation.

Web page: https://system.beibeidesign.com/

## Frame’s Purpose

- **Experience:** An elegant design language and clear structure let the product speak for itself.
- **Collaboration:** A design language that people and AI can read, reuse, verify, and evolve together.
- **Assurance:** Design principles → AI-readable rules → installable components → automated design checks → validation in real products.
- **Community:** The [public design foundation](https://system.beibeidesign.com/#foundations) is open source, with [components validated in real products](https://system.beibeidesign.com/#buttons) available to install. [View on GitHub](https://github.com/BeibeiZhang/frame-design-system) Install Frame Install Frame One command adds Frame’s public design foundation, all published components, and AI-readable guide to your project. `npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/frame.json` Copy the full Frame install command Copy and paste into Codex, Claude Code, Cursor, or any coding agent with terminal access to install Frame in the current project.
- **Agent Plugin candidate:** Design and audit reliable conversational and agentic AI products—from chat and voice to tool use, citations, confirmations, failure and recovery, and human-in-the-loop control—using Frame principles, released components, implementation rules, and verifiable checks. [Privacy](https://system.beibeidesign.com/privacy/) · [Support](https://system.beibeidesign.com/support/)
- **Built for:** Designers, developers, and product teams creating reliable conversational and agentic AI products.

## Pages

- [Operating Model](https://system.beibeidesign.com/operating-model/) — Markdown: https://system.beibeidesign.com/operating-model/index.md — How Frame operates: one source feeding many consumers, who owns what, how AI agents execute work, and the assurance layers that check it.
- [Principles](https://system.beibeidesign.com/principles/) — Markdown: https://system.beibeidesign.com/principles/index.md — The 13 design principles behind Frame’s AI product interfaces, with links to the foundations, components and layouts that apply them.
- [Voice & Tone](https://system.beibeidesign.com/voice-and-tone/) — Markdown: https://system.beibeidesign.com/voice-and-tone/index.md — Frame’s shared voice and tone baseline for AI products, plus the voice profile of each product built on it.
- [Foundations](https://system.beibeidesign.com/foundations/) — Markdown: https://system.beibeidesign.com/foundations/index.md — Frame’s foundations: color tokens, brand gradient, typography, shadow, radius and spacing.
- [Layout](https://system.beibeidesign.com/layout/) — Markdown: https://system.beibeidesign.com/layout/index.md — Frame’s layout system: the three-panel shell and its parts — PageLayout, HeaderBar, SplitView, side panels, SideCard, ShellGlow and ResizeHandle.
- [Buttons](https://system.beibeidesign.com/components/buttons/) — Markdown: https://system.beibeidesign.com/components/buttons/index.md — Frame button components with live states: PrimaryButton, SecondaryButton, TertiaryButton, GhostPillButton, IconButton, MenuRow, TextButton and more.
- [Inputs](https://system.beibeidesign.com/components/inputs/) — Markdown: https://system.beibeidesign.com/components/inputs/index.md — Frame input components with live states: TextField, SearchBox, AutocompleteField, RangeSlider, Switch, SegmentedToggle and Checkbox.
- [Pills & Tags](https://system.beibeidesign.com/components/pills-and-tags/) — Markdown: https://system.beibeidesign.com/components/pills-and-tags/index.md — Frame pills, tags and chips: StatusTag, Tag, Chip, FilterChip, UtilityChip, IconBadge, TimePill and SampleWorkspaceLabel.
- [Cards](https://system.beibeidesign.com/components/cards/) — Markdown: https://system.beibeidesign.com/components/cards/index.md — Frame card components for AI products: MetricCard, InsightCard, TaskProgressCard, ReviewItemCard, ConnectorCard, ArtifactCard and ChoiceCard.
- [Toolbars](https://system.beibeidesign.com/components/toolbars/) — Markdown: https://system.beibeidesign.com/components/toolbars/index.md — Frame’s ChatInput toolbar controls: ToolbarPill and ToolbarSegmented.
- [Navigation & hints](https://system.beibeidesign.com/components/navigation/) — Markdown: https://system.beibeidesign.com/components/navigation/index.md — Frame navigation and hint components: NavItem, SectionTitle, Tooltip, EmptyState, VersionRow, AgentRequiredHint and StepIndicator.
- [Data viz](https://system.beibeidesign.com/components/data-viz/) — Markdown: https://system.beibeidesign.com/components/data-viz/index.md — Frame data visualization components: AreaChart, CategoryBreakdown, ProgressBar and HealthDimensionRow.
- [Chat primitives](https://system.beibeidesign.com/components/chat/) — Markdown: https://system.beibeidesign.com/components/chat/index.md — Frame chat primitives for conversational and agent interfaces: MessageCard, ChatMessage, MessageActions, ChatWelcomeState, ChatInput, AttachmentChip and ChatPanel.
- [Voice & realtime](https://system.beibeidesign.com/components/voice-and-realtime/) — Markdown: https://system.beibeidesign.com/components/voice-and-realtime/index.md — Frame voice and realtime components: voice audition, VoiceMode and product extensions.
- [Other](https://system.beibeidesign.com/components/other/) — Markdown: https://system.beibeidesign.com/components/other/index.md — Other Frame components: SolutionRow and SummaryFooter.
- [AI Interaction Patterns for Trustworthy Products](https://system.beibeidesign.com/ai-interaction-patterns/) — Markdown: https://system.beibeidesign.com/ai-interaction-patterns/index.md — A practical guide to AI UI patterns for progress, control, uncertainty, recovery, tool use, memory, citations, and safer product interactions.
- [Frame Agent Plugin Privacy](https://system.beibeidesign.com/privacy/) — Markdown: https://system.beibeidesign.com/privacy/index.md — Privacy information for the skills-only Frame Agent Plugin.
- [Frame Agent Plugin Support](https://system.beibeidesign.com/support/) — Markdown: https://system.beibeidesign.com/support/index.md — Support information for the skills-only Frame Agent Plugin.

Full plain text of every chapter: https://system.beibeidesign.com/llms-full.txt