reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
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.

Explore/Blocks/PromptTemplate

PromptTemplate

Block

AI 프롬프트 뷰어/헬퍼. 변수 입력 → 실시간 치환 → 복사 기능.

form
Related docs
npx @reopt-ai/opt-cli surface add prompt-template
100%
대시보드 Surface 생성

AI에게 대시보드를 생성하도록 요청하는 프롬프트

@reopt-ai/opt-ui와 @reopt-ai/opt-ui-surface를 사용해서 이커머스 대시보드 Surface를 만들어줘.

요구사항:
- SurfaceLayout으로 루트 래핑 (loading prop 포함)
- SummaryRow로 핵심 지표 4개 표시
- TrendChart로 시계열 추이
- DataTable로 상세 목록
- 시맨틱 스페이싱 토큰 사용 (gap-section, gap-group, gap-element)
코드 리뷰 체크리스트
이 컴포넌트를 opt-ui 가이드라인에 맞게 리뷰해줘.

체크리스트:
- Surface는 SurfaceLayout 래퍼 사용하는가
- loading prop 지원하는가
- 시맨틱 스페이싱 토큰 사용하는가
- Tab 순서가 논리적인가

Dependencies

coreinput

Related components

SettingsForm

데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.

Form

AuthForm

로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.

Form

WizardForm

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 진행 표시기, 리뷰 단계 지원.

Form

DynamicFieldForm

런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.

Form

FileUploadForm

파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.

Form

KeyValueEditor

키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.

Form
PreviousThemeSwitcherNextSidebar

기본 사용

테마

로그인 / 회원가입 폼

다단계 폼 (Wizard)

1
기본 정보
2
상세 정보
3
확인

동적 필드 추가/제거

파일 업로드 폼

기본 사용

=
=
=

비밀값 토글

=
=
=

Controlled + onChange

=
=
=
[
  {
    "id": "1",
    "key": "DATABASE_URL",
    "value": "postgres://localhost:5432/mydb"
  },
  {
    "id": "2",
    "key": "API_KEY",
    "value": "sk-1234567890",
    "isSecret": true
  },
  {
    "id": "3",
    "key": "NODE_ENV",
    "value": "production"
  }
]

최대 항목 제한 (3개)

=
=
=

읽기 전용

=
=
=

빈 상태

항목이 없습니다. 추가 버튼을 눌러주세요.