프로젝트 화면을 빌더에서 바로 조립하세요
스타터를 고르고, 페이지 캔버스에서 블록과 데이터 소스를 연결한 뒤, 활성 Shell 프리셋으로 화면 품질을 검증합니다. Builder는 내부 도구를 실제 화면 단위로 만드는 작업 공간입니다.
app/orders/page.tsxacme-admin
1import { ShellWorkspace } from "@reopt-ai/opt-shell";
2import { OrdersTable } from "@/blocks/orders-table";
3import { OrdersSummary } from "@/blocks/orders-summary";
4
5export default function OrdersPage() {
6 return (
7 <ShellWorkspace recipe="console">
8 <OrdersTable density="compact" />
9 <OrdersSummary range="30d" />
10 </ShellWorkspace>
11 );
12}
내 프로젝트
opt sync — zshzsh
$opt sync --watch
✓linked acme-admin
→push OrdersTable
←pull OrdersSummary
✓in sync · 2 blocks
→코드에서 Builder로
←Builder에서 코드로
OPT-CLIClaude · ChatGPT · Gemini와 함께
/builder/projects/acme/orders
CanvasDataUX Flow
주문 테이블DataGrid원격 소스 · 필터 · 일괄 저장
필터 바Blocks기간, 상태, 담당자
요약 카드ChartBuilder에서 추가한 지표 블록
밀도compact
레시피console
리옵트 디자인
01
스타터 또는 빈 프로젝트 선택
목적에 맞는 화면 골격을 고르고 필요한 페이지를 프로젝트에 추가합니다.
스타터 또는 빈 프로젝트 선택
02
활성 Shell로 검증
폭, 밀도, 상태, 접근성 기준을 활성 Shell 프리셋과 맞춥니다.
활성 Shell로 검증
03
에이전트와 함께 확장
같은 노드 트리와 데이터 계약을 기반으로 다음 화면까지 이어서 만듭니다.
에이전트와 함께 확장