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

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

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

메탈릭·실크·유리 등 럭셔리 애니메이션 셰이더를 만들어 배경·카드 배경으로 쓰고 React 컴포넌트나 PNG로 내보냅니다.

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

플랫폼별 안전 영역, adaptive·maskable·monochrome 변형을 적용한 아이콘 패키지를 완성합니다.

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

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

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

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

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

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

이벤트·예약, 반복(RRULE), 타임존, 드래그·리사이즈, AI 스트리밍 draft를 같은 흐름에서 실험합니다.

폴더 탐색, 업로드 큐, 파일 상세, 커넥터 지연·실패 시뮬레이션을 mock 커넥터로 실험합니다.