reopt design
DocsExploreTemplatesCanvasToolsPricing
로그인
새 기능Contract-first UI화면부터 하네스 계약까지 한 흐름으로빌더 시작

Design system for builders

에이전틱 엔지니어를 위한 디자인 도구입니다. 검증된 컴포넌트로 제품 화면을 더 빠르고 일관되게 완성하세요.

컴포넌트 둘러보기빌더 시작하기
Kate MooreAdmin
OverviewAccountsAnalyticsDocumentsScheduleAssistantNewPresentationsFiles & assetsSettings
Command menuK
Workspace settingsGeneral preferences for the Acme workspaceAccounts12,480 rows · synced 2 minutes agoRevenue analyticsRecurring revenue, expansion, and retentionLaunch briefDraft · edited by Mina Seo a minute agoScheduleWeek of March 11 · 6 bookingsAssistantStreaming answers with tool calls and sourcesDeck StudioFrom the first idea to the final presentationFiles & assetsEverything your next launch needs, in one place
Invite
GeneralMembersBilling
GeneralDraft
Workspace nameAcme product
VisibilityTeam members
RegionSeoul
Require reviewEvery change needs one approval
CancelSave changes
Members3 of 12
JPJae Parkjae@acme.ioOwner
MSMina Seomina@acme.ioEditor
AKAlex Kimalex@acme.ioViewer
Invite people
Search accountsStage is ActivePlanNew
AccountOwnerStagePlanMRR
NNorthwindJae ParkActiveScale$4,820
UUmbrellaMina SeoTrialTeam$1,240
IInitechAlex KimActiveScale$7,360
GGlobexSena KoReviewTeam$2,970
SSoylentDan LeeActiveEnterprise$5,180
VVehementRio HanTrialTeam$3,410
Revenue$228,4413.3%
Expenses$25,1083.3%
Accounts4583.3%
Profit$203,1334.1%
Sales performanceLast 8 months
$28,441Weekly sales$4,063Daily sales278Total sales
JanFebMarAprMayJunJulAug
Traffic sourceOrganicPaid
231,856Sessions
ParagraphAsk AIStreaming patch
Launch briefThe settings surface ships with its contract attached, so the review step reads the same spec the screen renders.Attach the contract to the surfaceStream the review step from the same spectsapplyJsonPatch(spec, ops)Layered product frame, isometricpromptRollout targets stay in the same manifest, so agents and people edit one document.Tab
AI commands✨Improve writing→Continue writing📋Summarize
Patch streamRFC 6902
replace/blocks/1/textparagraphadd/blocks/3todoadd/blocks/4codeadd/blocks/5imagereplace/blocks/3/checkedtruestreaming
March 11 – 15WeekMonthBookingStreaming patch
Mon11Tue12Wed13Thu14Fri1509:0010:0011:0012:0013:0014:0015:00Design sync10:00Onboarding09:00Roadmap11:001:1 Mina13:00Release check10:00Support sync14:00Retro15:00
IKate MooreIntro call30 minAsia/Seoul
March 2026
SMTWTFS12345678910111213141516171819202122232425262728
Wed, March 1309:303 seats left10:002 seats left10:305 seats left11:001 seat left13:304 seats left
BookingsJae ParkMar 13, 10:00PendingConfirmMina SeoMar 12, 14:00Confirmed
What ships in the module set?
UI, data grid, charts, editor, and chat — all on one token system.
Which modules fit a revenue dashboard?
searched opt-charts docs412msBarChart covers monthly revenue with a stacked series.LineChart handles the traffic trend beside it.revenue-page.tsxtsx<BarChart data={mrr} stacked /><LineChart data={traffic} />opt-chartsbar-chart.mdx
Claude Opus 5Ask about modules
Editorial — Company profile All changes applied
Export Present
Create with AI
Slides 12
01
ATELIERA NEW PERSPECTIVE / 2026INDEPENDENT THINKING. SHARED AMBITION.A better wayto move forward.Good questions. Shared ambition.A meaningful change starts here.2026 / COMPANY PROFILEIdeas into meaningful impact.01
A new perspective
02
ATELIERA NEW PERSPECTIVE / 2026Busy is not the same as progress.01Scattered context02Constant coordination03Invisible impactIdeas into meaningful impact.02
The challenge
03
ATELIERA NEW PERSPECTIVE / 2026Less noise.More meaning.Ideas into meaningful impact.03
Our point of view
04
ATELIERA NEW PERSPECTIVE / 2026Everything,in its right place.Ideas into meaningful impact.04
The experience
Add slide
01 / A new perspectiveEditorial
ATELIERA NEW PERSPECTIVE / 2026INDEPENDENT THINKING. SHARED AMBITION.A better wayto move forward.Good questions. Shared ambition.A meaningful change starts here.2026 / COMPANY PROFILEIdeas into meaningful impact.01 Heading You
Overview 48%
DesignMotionAI
Heading
Position
X 84Y 257
W 980H 273
Typography
Instrument Serif
Regular142
↕ 0.96↔ −2
#252A25 100%
Brand ATELIER
One identity. Every slide.
Fade in 0.8 s · With slide
Slide 1 / 121600 × 900 16:9 Ready to present
New folder New file UploadFilter files…Name
Brand assetsLaunch campaign6 items
Brand kit8 items
Product shots12 items
ACME®FALL / 2026Make roomfor the next.A LITTLE SPACE. A NEW PERSPECTIVE.
launch-cover.svg248 KB
PDF
brand-guidelines.pdf1.8 MB
ZIP
press-kit.zip4.6 MB
ACME®Freshperspectives.YOUR NEXT CHAPTER STARTS HERE →
social-banner.svg186 KB
launch-cover.svg
ACME®FALL / 2026Make roomfor the next.A LITTLE SPACE. A NEW PERSPECTIVE.
Type image/svg+xmlSize 248 KBCreated Oct 08, 2026Modified Oct 11, 2026
Move to Rename Download
Uploads1 of 2 completeCancel all
campaign-film.mp4 24 MB72%
brand-guidelines.pdf 1.8 MBCompleteShow file
Storage2.4 GB / 10 GB

opt-ui폼, 다이얼로그, 테이블 등 화면 기본 컴포넌트

opt-datagrid키보드 편집과 원격 데이터 그리드

opt-charts같은 토큰을 쓰는 지표와 시각화

opt-editor스키마 기반 스트리밍 콘텐츠 에디터

opt-calendar일정과 예약 가능 시간 관리 캘린더

opt-chat스트리밍과 도구 호출 AI 대화

opt-deck브랜드와 모션, AI 편집을 담은 슬라이드 스튜디오

opt-filemanager폴더 탐색부터 미리보기, 업로드와 용량 관리까지

All-in-one UI components.

버튼과 폼부터 데이터 표, 차트, 화면의 기본 구조와 점검 도구까지 제품 화면에 필요한 요소를 한곳에서 제공합니다. 필요한 기능을 골라 문서와 실제 예제로 바로 확인하세요.

제품 문서 살펴보기
https://your-product.app
AcmeProduction
OverviewPipelineAnalyticsAssistantSettings
Recipe · workspace
Pipelinecontract-bound route · 1,284 rowsInvite
Search accountsStageNew
Pipeline$1.24M6.2%
Win rate38.4%1.8%
Cycle21d3.1%
Revenue by monthBaseExpansion
AccountPlanStatusARR
NorthwindScaleReady$248,400
InitechEnterpriseReview$182,900
GlobexTeamDraft$96,250
UmbrellaScaleLive$141,780
surface.pipelinecontractboundstates4 / 4a11ypass
  1. INSPECTopt-devtool실행 중인 화면 위에서 계약과 상태를 검사합니다.
  2. FRAMEopt-shell앱 프레임과 워크스페이스 정책을 정합니다.
  3. DATAopt-datagrid대량 데이터를 편집 가능한 그리드로 다룹니다.
  4. VISUALSopt-charts같은 토큰 위에서 지표를 시각화합니다.
  5. FOUNDATIONopt-ui접근성 프리미티브 위에 기본 컴포넌트를 놓습니다.

AI-first components, with review built in.

AI가 제안한 문서, 데이터, 일정, 답변을 실시간으로 확인하고 필요한 내용만 반영할 수 있습니다. 중요한 변경은 사용자가 확인하기 전에는 적용되지 않습니다.

스트리밍 계약 살펴보기
AI
AI
스트림 도착text-deltadata-datagrid-invalidationpatch opstool-call리뷰 게이트AISuggestionpendingMutationCountCalendarSuggestionapproval-requested커밋approveBlock()rejectedEditsapproveEntity()approveToolCall()
Launch briefJSON Patch · RFC 6902opt-ui, opt-shell, and the studio tools already ship in this release. This brief covers what is left before the beta.ScopePricing, checkout, and the plan catalog API. Everything else stays behind the current flag.TimelineShip the beta sometime in Q4 on March 18 with the pricing page.Launch checklistPricing, checkout, and the plan catalog API ship together,so the paid loop is testable end to end on day one.Growth reviews the funnel until the first cohort renews.Tab to accept the next sentence…
Suggestion reviewuseAISuggestion()5 blocks · 1 streamingIntrounchangedScopeunchangedTimeline3 words replacedLaunch checklistblock insertedRisksreverted to baseApprove allRejectApplies as one undo entry
Accountsviewport 40–79snapshot v4212,480 rowsAccountOwnerPlanMRRStatusNorthwindMina SeoPro$2,400ActiveContosoJae ParkTeam$980ActiveInitechAlex KimScale$12,400ActiveUmbrellaSara LeePro$1,860ActiveGlobexDan ChoTeam−$40ReviewSoylentJi WooPro$3,120ActiveVehementRio HanTeam$740TrialMassive Dyn.Sena KoScale$9,050ActiveSave batch · 12 editsrejectedEdits[0] · MRR ≥ 011 applied1 rejected
Stream logwriteDataGridInvalidation()live · viewport windowdata-datagrid-invalidationrows 40–79 · snapshot v42data-datagrid-invalidationtotalRowCount 12,480data-datagrid-invalidationrowIds 3 · transientsave-batch12 edits · awaiting serverRetry rejectedDiscardRow identity survives the retry
ScheduleFind 30 min with Mina before FridayMON 11TUE 12WED 13THU 14FRI 150910111213Standup09:00Design10:30Launch09:301:1 Mina11:00Handoff12:00Retro13:00
Draft reviewuseCalendarSuggestion()3 entities · 1 pendingLaunchWed 09:30 · created1:1 MinaThu 11:00 · createdHandoffconflicts with RetroApprove allRejectDraft lives in a shadow store
Move the launch review earlier and update the brief.Thought for 3sThe brief and the calendar both reference the launch date.Rescheduling first keeps the document patch consistent.updateScheduleAwaiting approval{ "eventId": "launch-review", "start": "2026-03-11T09:30" }ApproveRejectapproveToolCall(id)patchBriefApplied[{ "op": "replace", "path": "/blocks/2/text", … }]Launch review moved to Wed 09:30 and the brief now reads March 18.The pricing paragraph is still waiting on your approval in the editor.
Ask a follow-up…Send

opt-editor블록 단위로 승인하거나 되돌립니다.

opt-datagrid보이는 구간만 다시 읽고, 거절된 편집은 원복합니다.

opt-calendar제안된 일정을 하나씩 승인합니다.

opt-chat도구 호출은 승인 전까지 멈춰 섭니다.

High quality interactions everywhere.

마우스, 터치, 키보드, 스크린리더 중 어떤 방식으로 사용해도 자연스럽게 작업할 수 있습니다. 화면이 바뀌어도 같은 동작 방식과 흐름을 유지합니다.

키보드 패턴 보기

Keyboard friendly.

탭 이동, 단축키, typeahead, 포커스 복귀가 제품 화면 전체에서 같은 규칙을 따릅니다.

TabEnterEsc

Mouse enhanced.

hover, resize, context menu, drag feedback이 데스크톱 작업 흐름을 방해하지 않게 정리됩니다.

State complete.

로딩, 빈 화면, 오류, 리뷰 상태를 컴포넌트 소개가 아니라 실제 surface 기준으로 봅니다.

Loading
Empty
Error
Review

Focus managed.

오버레이와 리스트 삭제, drawer 전환 뒤에도 포커스가 자연스럽게 복원됩니다.

Accessibility standards, built in.

접근성은 마지막에 덧붙이는 기능이 아니라 처음부터 화면에 포함됩니다. 문서의 예제부터 Builder 미리보기와 실제 제품 화면까지 같은 접근성 기준을 유지합니다.

접근성 문서 보기
Interactive mobile preview for choosing a workspace permission level.
12:27
ATLAS WORKSPACE

Permissions

Choose what Jordan can do in this workspace.

Permission options

ARIA semantics.

버튼, 테이블, 메뉴, 대화상자의 역할과 키보드 동작을 WAI-ARIA 패턴에 맞춥니다.

Mobile ready.

작은 화면에서도 touch target, drawer, dismiss 흐름이 깨지지 않도록 설계합니다.

Tested. Like, really.

컴포넌트 문서와 실제 화면에서 같은 상태 매트릭스를 반복 검증합니다.

Every module takes your locale.

캘린더, 에디터, 채팅, 데이터 표의 문구와 날짜·시간·숫자 형식을 서비스 지역에 맞게 바꿀 수 있습니다. 한국어와 영어는 바로 사용하고, 다른 언어도 필요한 문구를 추가해 적용할 수 있습니다.

로컬라이제이션 문서 보기
2026년 3월오늘일정 추가
일월화수목금토
스탠드업코드 리뷰오후 3:30팀 회의1:1회고
오후 3:30팀 회의
날짜2026년 3월 14일
시각오후 3:30
숫자1,234,567.89
상대 시간3일 전
tsx<Calendarmessages={koMessages}locale="ko-KR"/>
March 2026TodayNew event
SunMonTueWedThuFriSat
StandupCode review3:30 PMTeam sync1:1Retro
3:30 PMTeam sync
DateMarch 14, 2026
Time3:30 PM
Number1,234,567.89
Relative3 days ago
tsx<Calendarlocale="en-US"/>
2026年3月今天新建日程
周日周一周二周三周四周五周六
站会代码评审15:30团队会议1:1复盘
15:30团队会议
日期2026年3月14日
时间15:30
数字1,234,567.89
相对时间3天前
tsx<Calendarmessages={zhMessages}locale="zh-CN"/>
2026年3月今日予定を追加
日月火水木金土
朝会レビュー15:30チーム会議1on1振り返り
15:30チーム会議
日付2026年3月14日
時刻15:30
数値1,234,567.89
相対時間3 日前
tsx<Calendarmessages={jaMessages}locale="ja-JP"/>
Intl.DateTimeFormat{OPT_TODAY}{OPT_NEW_EVENT}
0123456
titlestartHH:mm{OPT_UNTITLED_EVENT}allDaylocation
HH:mm{OPT_UNTITLED_EVENT}
messagesCalendarMessages
localeIntl.DateTimeFormat
weekStartsOn0 – 6
timeZoneIANA
tsx<Calendarmessages={myMessages}locale={myLocale}/>

koMessages 하나로 툴바와 뷰 라벨 전체가 한국어가 됩니다.

영어는 opt-calendar의 기본값이라 카탈로그를 넘길 필요가 없습니다.

지역 변형도 태그 하나로 갈립니다 — zh-CN과 zh-TW는 요일 표기와 12/24시간 표기가 서로 다릅니다.

패키지가 싣지 않는 로케일. CalendarMessages 타입을 채우면 키 누락이 컴파일에서 걸립니다.

라벨 자리에는 채워야 할 키가, 판독 자리에는 그 값을 만드는 노브가 있습니다. 태그는 무엇이든 됩니다.

Studio tools for product design in your browser.

색과 테마를 정하고, 폼과 화면 구성을 만들고, 스토어 이미지를 준비하는 도구를 설치 없이 사용할 수 있습니다. 한 도구에서 만든 결과를 다음 작업으로 바로 이어갈 수 있습니다.

도구 시작하기
Color Kit
SeedColor value#2563ebReset
HarmonyComplementaryOpposing colors for decisive contrastAnalogousNeighboring colors for a smooth progressionTriadicThree balanced colors spaced 120° apartSplit comp.Three colors balancing contrast and stabilityTetradicFour colors distributed at 90° intervals
ShapeRadiusSharpMediumRoundedShadowNoneSubtleMediumStrongNeutralsAutoWarmCool
Harmony mapRotates the seed hue in OKLCH space to create balanced role colors.Generated in OKLCH
Harmony on the color wheelPrimary#2563ebSecondary#ad5400Accent#727700Surface#f8fafcText#101215PrimaryHue 263°SeedSecondaryHue 53°+150°AccentHue 113°+210°
Color KitBrand system readyTokensGeneratedContrastGeneratedGradientGenerated
Gradient Lab
PresetsStart from a complete layer stack.AuroraluminousSignaldarkLagoonluminousPrismeditorialGraphiteneutralCobaltdark
CanvasWeb hero1920×1080OG image1200×630Square1080×1080
LayersStack, blend, and reorder.Baselinear · NormalGlowradial · ScreenSweepconic · Soft lightFine grainnoise · Soft light
Aurora1920 × 1080 · 16:9 web hero4 layersSafe content areaDesigned as a reusable background asset.Use the handles to place light and control its visual balance.
Export / Inspector
InspectorLayer nameGlowBlendScreenOpacity100%Center X16%Center Y10%Radius120%
Color stops#c2497f0%#2aa6b8100%
LegibilityWhite text3.40:1Black text2.56:1Foreground#FFFFFF · Review
ExportCopy CSSDownload PNG
Theme Builder
DefaultCorpPlayMinNatProLightDarkLight onlyMy Custom ThemeDownload
OverviewLive theme structure summary.Tokens53Colors39Changed3Light modeDual modePreset clean
Accent Quick SwitchApply a derived accent family from a single color.Current accenthsl(221 83% 53%)BlueEmeraldVioletRoseAmber
SurfaceBackgrounds and containers.Surface--opt-surfaceSurface Raised--opt-surface-raisedAccent--opt-accentText--opt-text
My Custom Themedefault presetLightDual mode3 changedEssentialFormsDataFeedbackNavTypeLayersPalettePrimarySecondaryGhostDangerDisabledDefaultSuccessWarningErrorInfoInfoInformation messageSuccessOperation completedWarningPlease reviewErrorSomething went wrongCard TitleCard content with secondary text color — surface, border, and shadow tokens together.
다른 도구로 보내기
Gradient Lab의 그라디언트 적용됨
Form Builder
SettingsWizardDynamicMyForm
Settings form3 fields · 3 requiredFields↑↓ select · ↵ edit · ⌥↑↓ reorderAddAaName*name · TextEmail*email · EmailMessage*message · Textarea
MyFormPreviewing settings form3 fields3 required0 validationsNameJae ParkEmailyou@example.comMessageWrite your message…Save
Generated TypeScriptCopyDownloadimport { SettingsForm } from "@reopt-ai/opt-ui";import type { FormFieldDef } from "@reopt-ai/opt-ui";const fields: FormFieldDef[] = [ { name: "name", label: "Name", required: true }, { name: "email", label: "Email", type: "email", required: true }, { name: "message", label: "Message", type: "textarea", required: true },];export function MyForm() {
Store Screenshot Studio
1Start2Style3Screens4Output
Upload screenshotsDrop 4–8 real app screens; colors and typography follow.Select 4–8 screenshotsPNG · JPG · WebP, up to 12MB each
App infoApp namereopt designOne-line pitchA calmer way to plan every day.
Platform · formatStore specs and social ratios drive the canvas.App Store1290×2796 · iPhone 6.9"Play Store1080×1920 · 1024×500IG Feed1080×1080 · social
reopt designA calmer way to plan every day.Plan TodayPlan priorities and time blocks before the day gets busy.reopt todoTodayAllWorkPersonalReview design screenshotsApp Store galleryHighWrite launch checklist17 checks pendingTodayAudit color tokensDesign systemDoneSend store assets2 screens ready3 PMNext upSync product notesTodayProjectsFocusNotesStats
Store Package
Store readinessSample preview0/8 uploadedSample screens — upload your own to publish.
ExportApp Store + Google Play ZIPCurrent preview imageCopy briefCopy JSON
Current setTemplateApp Store setPreview2400 × 1350Store assets11 filesDeviceiPhone 6.9"Screens5
Deployment specsApp Store iPhone 6.91290 × 2796 / 8 PNGPlay Store Phone1080 × 1920 / 8 JPGPlay Feature Graphic1024 × 500 / 1 JPG

시드 컬러 하나로 opt 디자인 토큰, 브랜드 그라디언트, 스와치, 대비 결과를 생성합니다.

레이어형 CSS 그라디언트를 조합하고 오버레이를 미리 본 뒤 배경 레시피로 내보냅니다.

표준 CSS 토큰 세트를 실시간으로 편집하고 라이브 미리보기와 함께 CSS로 내보냅니다.

필드를 시각적으로 추가·편집·재정렬하고 실시간 미리보기와 TypeScript 코드 내보내기를 지원합니다.

실제 앱 화면 4~8장을 올리면 문구, 배경, 타이포를 자동 구성해 App Store·Google Play·소셜 에셋으로 내보냅니다.

A role-based package catalog.

각 패키지가 해결하는 문제와 설치 방법, 시작 문서를 한눈에 비교할 수 있습니다. 지금 필요한 기능부터 골라 사용하세요.

문서 허브 보기

  • opt-ui

    기반 레이어

    Core → Shells → Surfaces 구조의 공유 UI 컴포넌트 라이브러리

    DocsExploreTheme BuilderForm Builder

  • opt-charts

    시각화 레이어

    차트와 데이터 시각화 전문 패키지 — Recharts 래퍼, heatmap, funnel, metric shell

    DocsExplore

  • opt-datagrid

    데이터 표시 전문 레이어

    키보드 퍼스트 편집 가능 데이터 그리드 — 가상화, 셀 편집, 원격 데이터 동기화

    DocsExplorePlayground

  • opt-editor

    콘텐츠 편집 전문 레이어

    AI 퍼스트 콘텐츠 에디터 — 비주얼 WYSIWYG + NDJSON StreamCompiler 듀얼 모드

    DocsExplorePlayground

  • opt-chat

    AI 대화 인터페이스 레이어

    Vercel AI SDK 기반 스트리밍 AI 채팅 인터페이스 — 대화, 입력, 28종 렌더러

    DocsExplorePlayground

  • opt-deck

    웹 발표자료

    JSON으로 편집하고 어디서든 발표하세요.

    DocsPlayground

  • opt-calendar

    일정·예약 전문 레이어

    AI 퍼스트 캘린더 · 예약 엔진 — 이벤트, 예약, 반복, 타임존, AI 스트리밍을 한 store로

    DocsPlayground

  • opt-filemanager

    파일 브라우징 레이어

    커넥터 기반 파일 매니저 — 탐색, 업로드 큐, 파일 상세를 capability 게이팅으로

    DocsExplorePlayground

  • opt-shell

    런타임 프레임

    opt-ui와 제품 화면 사이의 런타임 제품 프레임 — 워크스페이스, 정책, 어댑터

    DocsExplore

  • opt-cli

    하네스

    harness — 제품 화면을 계약에 맞춰 CLI에서 검증

    DocsExplore

  • opt-devtool

    개발 도구 레이어

    개발 전용 인스펙터 오버레이 — 런타임 상태 시각화, 크로스 모듈 디버그 브리지

    DocsExplore

  • brandapp-ui

    UI 통합 레이어

    brandapp-sdk × opt-ui copy-paste Surface 블록 — opt surface add 한 줄로 인증 UI 이식

    DocsExplore

v1.35.0 · 2026-11-02

최근 업데이트

opt-chat 입력창이 쓰는 흐름을 끊지 않게 바뀌었습니다. eve 에이전트 세션 렌더러와 실행 기록 컴포넌트도 추가했습니다.

릴리즈 노트
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.