시작하기
개요
Vibr는 화면에 대한 설명을 실제 디자인 시스템으로 만든 인터랙티브 프로토타입으로 바꿔 줍니다. 모든 작업이 브라우저에서 이루어집니다.
Vibr는 디자이너를 위한 프로토타이핑 도구입니다. 화면을 평이한 말로 설명하면 에이전트가 계획을 세우고, 선택한 디자인 시스템으로 빌드하고, 제대로 렌더링되는지 확인하고, 접근성 및 레이아웃 문제를 검토한 뒤 발견한 문제를 수정합니다. 결과물은 클릭해 볼 수 있는 실제 React 코드이며, 수정하고, 주석을 달고, 플로로 연결하고, 내보낼 수 있습니다.
작동 방식
- 키를 준비합니다. Vibr는 사용자의 API 키로 Google Gemini, OpenAI, Anthropic 또는 OpenRouter를 호출합니다. 키는 브라우저에만 저장됩니다.
- 디자인 시스템을 선택합니다. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple 또는 npm의 모든 패키지를 사용할 수 있습니다.
- 화면을 설명합니다. Vibr가 작업하는 동안 각 단계가 표시되며, 코드가 작성되는 동안 캔버스에 화면이 그려집니다.
- 계속 다듬습니다. 변경을 요청하고, 요소 하나를 가리켜 그 부분만 변경하고, 버전을 비교하고, 피드백을 고정하고, 라이브러리에 저장하세요.
차별점
- 비슷한 모양이 아닌 실제 컴포넌트. 초안은 실제 디자인 시스템 패키지에서 가져오므로, 보이는 그대로 엔지니어가 출시할 수 있는 결과물입니다.
- 스스로 작업을 확인합니다. 모든 초안은 렌더링된 다음, 사용자에게 표시되기 전에 데스크톱, 태블릿, 휴대폰 너비에서 자동 접근성 검사로 검토됩니다.
- 라이브러리를 어디서나 활용합니다. 추가한 이미지, 동영상, 색상 테마, 타입 램프, 아이콘을
@멘션으로 어떤 요청에든 넣을 수 있습니다. - 계정도 서버도 없습니다. 모든 작업이 브라우저에서 실행됩니다. 키, 개인 정보 보호 및 저장소를 참조하세요.