디자인 시스템 작업을 바로 돕는 웹 도구

지금 바로 쓸 수 있는 8개 도구로 디자인 워크플로우를 가속하세요.

도구 목록

Color Kit

팔레트 생성기

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

Gradient Lab

비주얼 유틸리티

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

Theme Builder

토큰 편집기

53개 CSS 토큰을 실시간으로 편집하고 라이브 미리보기와 함께 CSS로 내보냅니다.

Form Builder

폼 제작 도구

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

Canvas Catalog

컴포넌트 카탈로그

opt-ui Core/Shells/Surfaces와 opt-charts 차트를 Figma 스타일 무한 캔버스에서 탐색합니다.

DataGrid Playground

패키지 실험실

편집, selection, 성능 옵션, callback surface와 remote mock 흐름을 한 화면에서 검증합니다.

Editor Playground

패키지 실험실

AI streaming, 직접 편집, diff 흐름, inspector chrome을 같은 흐름에서 실험합니다.

Chat Playground

패키지 실험실

스트리밍 메시지, reasoning, tool 출력, 코드 생성 시나리오를 실험합니다.