이 도구는 사용자가 브라우저 내에서 요소를 클릭함으로써 직관적인 사용자 경험을 제공합니다. 클릭한 후 사용자는 AI에게 코드 작성을 맡기고 즉각적으로 변경 사항을 시각적으로 확인할 수 있습니다. 이 접근 방식은 전통적인 코딩 방식을 생략하고, 보다 즐거운 디자인 프로세스를 지원합니다.
이 도구는 Windows 10 이상의 버전에서 사용할 수 있으며, Claude Code, Cursor 또는 Gemini CLI와 함께 작동합니다. 이를 통해 사용자는 제한 없이 다양한 프로젝트를 진행할 수 있으며, 각각의 클라이언트 요구에 맞춘 효과적인 솔루션을 제공받을 수 있습니다.
디자인 도구의 또 다른 장점은 UI 요소를 클릭한 후 원하는 요소를 직접 코드 편집기로 손쉽게 전환할 수 있다는 점입니다. 사용자는 디자인을 시각적으로 조정하면서 즉시 코드와 연결하여 실시간으로 결과를 확인할 수 있습니다. 이로 인해 코드 수정의 필요성을 줄일 수 있습니다.
멀티 편집 기능을 통해 사용자는 여러 개의 요소를 동시에 선택하고 함께 수정할 수 있습니다. 이 기능은 대규모 디자인 작업에서 특히 유용하며, 사용자가 효율적으로 여러 요소를 한 번에 처리할 수 있게 해줍니다. 이를 통해 작업 흐름을 최적화하고 시간을 절약할 수 있습니다.
내장된 뷰포트 스위처 기능을 통해 사용자는 다양한 화면 크기에서 디자인을 테스트할 수 있습니다. 이 기능을 통해 사용자는 자신의 디자인이 어떻게 반응하는지를 쉽게 확인할 수 있으며, 브레이크포인트에 맞게 UI를 조정할 수 있습니다. 이는 특히 모바일 및 데스크톱 모두에서 원활한 사용자 경험을 보장하기 위해 중요합니다.
사용자는 자신의 디자인 작업에 대한 준거 이미지를 추가하여 픽셀 완벽한 결과를 얻을 수 있습니다. 이 기능은 디자인의 세부 사항에 주의를 기울이는 데 도움을 주며, 기존 디자인을 기반으로 변형 및 개선할 수 있는 기회를 제공합니다. 참고 이미지를 통해 사용자는 더 나은 결과를 도출할 수 있습니다.