reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Next.js 설치
Private install
Core Concepts
아키텍처
Composition Patterns
Accessibility
Keyboard Patterns
Styling
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Tools
Canvas Catalog
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Improve the customer experience with consistent component design.

Carry well-designed components into real screens by aligning flow, state, and information density. Customers can understand each screen quickly and use it comfortably, even as the product grows.

Design harnessThe agent contract

Interface Components

The core packages used directly in customer-facing screens: components, data grids, editors, and chat.

opt-ui

Core, Shells, Surfaces

컴포넌트 선택, 테마, 접근성, Surface/Template 조합, opt-ui 도입 워크플로우를 담당합니다.

설치와 테마 연결컴포넌트 카탈로그와 Layer 구조접근성, 스타일링, 템플릿

opt-charts

Charts, Visuals, Metrics

Recharts 기반 차트, SVG 시각화, chart-specific shell, 시각화 메타데이터와 예제를 담당합니다.

차트 설치와 import 경계Charts 카탈로그와 chart-specific shellsChartContainer, Tooltip, Legend 조합

opt-datagrid

Editing, Scale, Remote Data

편집형 그리드, 성능 튜닝, 원격 연동 계약, 컬럼/selection 모델처럼 DataGrid 고유 문제를 담당합니다.

기본 설치와 첫 그리드 렌더링편집/운영/대규모 데이터 시나리오원격 프로토콜과 백엔드 계약

opt-editor

Blocks, Streaming, AI Authoring

블록 시스템, 스트리밍 프로토콜, Markdown 변환, AI 백엔드 연결과 커스텀 블록 확장을 담당합니다.

EditorProvider와 빠른 시작Flat spec, block catalog, block typesNDJSON streaming과 AI integration

opt-chat

AI Chat, Streaming, Rich Parts

Chat UI 컴포넌트, 메시지 렌더링, 입력 인터페이스, 대화 상태 관리를 담당합니다.

채팅 메시지 렌더링과 스트리밍채팅 입력과 파일 첨부대화 목록과 사이드바

Interface Frame

Assemble product screens while aligning state, adapters, and design standards so the customer experience stays steady.

opt-shell

Product Frame, State UX, Adapters

opt-ui 위에서 app shell, page rhythm, state boundary, datagrid/editor adapter처럼 제품 화면의 구조적 일관성을 담당합니다.

앱 셸과 route group 구조page rhythm과 content width 정책loading/empty/error UX 표준화

opt-cli

Surface CLI, Harness Checks

harness 계약 검증(opt harness check/doctor), 디자인 시스템·레이어·a11y lint 룰, completeness/coverage 스코어링과 SARIF 출력을 담당합니다.

harness 계약 검증 (check / doctor / test)디자인 시스템·레이어·a11y lint 룰completeness·coverage 스코어링과 SARIF

opt-devtool

Dev Overlay, Devtool Bridges

dev-only overlay, opt-ui debugger migration, datagrid/editor/harness bridge, cross-module inspection surface를 담당합니다.

전역 dev overlay와 hotkeyopt-ui focus/tab/spatial inspectiondatagrid/editor/harness snapshot bridges

reopt Integration

Supports reopt brandapp-sdk integration. Quickly implement product blocks such as auth and account flows to complete operational workflows.

brandapp-ui

Copy-paste BrandApp Surfaces

brandapp-sdk 기능을 opt-ui 위에 조립한 copy-paste Surface 모음. 소비자는 opt surface add로 소스 파일을 자기 프로젝트에 복사해 자유롭게 개조합니다.

인증 Surface(사인인 버튼, 사용자 메뉴, 보호 화면, 세션 만료)AI Surface(채팅, 이미지 생성)와 BrandApp credit UIEAV 레코드 테이블과 운영 콘솔 예제