UI Spec Builder (가칭)
한 줄 소개
UI 스크린샷에서 영역을 고르고 디자인 토큰 이름을 입력하면, AI가 값을 추측하지 않고 그대로 구현할 수 있는 스펙 문서(.md)와 번호가 표시된 주석 이미지를 만들어 주는 브라우저 전용 웹앱입니다.
만든 이유
사내 정책상 Figma 파일이나 링크를 AI 도구에 올릴 수 없는 개발자는 스크린샷만으로 UI를 구현해야 합니다. 그런데 이미지만으로는 색, 글꼴, 간격 값을 알 수 없습니다. 디자인 시스템이 토큰 이름 기반이라 픽셀에서 값을 추정하면 틀리기 때문입니다. 그래서 스크린샷을 AI에게 주고 "똑같이 만들어 줘"라고 하면 값이 어긋납니다.
대상 사용자
Figma 접근이 없거나, 있어도 AI 도구에 올릴 수 없는 상황에서 스크린샷으로 UI를 구현해야 하는 개발자입니다.
사용 흐름
스크린샷 올리기: 파일 선택, 끌어다 놓기, Ctrl+V 붙여넣기 중 하나로 올립니다. 이미지는 브라우저 안에서만 처리합니다.
영역 초안 받기: 앱이 보여 주는 프롬프트를 복사해 승인된 Copilot 채팅에 붙여넣고 스크린샷을 첨부하면, Copilot이 영역 계층과 좌표를 JSON으로 줍니다. 그 JSON을 앱에 붙여넣으면 앱이 형식을 검증해 박스로 표시하고, 틀린 항목은 어디가 문제인지 알려 줍니다.
박스 보정과 선택: 좌표는 근사값이라 박스를 끌어서 보정하고, 추가하고, 삭제합니다. 큰 영역부터 클릭, 더블클릭이나 Enter로 안쪽 요소에 들어가며, 구조 목록에서도 바로 고를 수 있습니다.
토큰 입력: 선택한 영역마다 레이아웃, 색상, 테두리, 그림자·블러, 타이포 토큰 이름을 필요한 것만 입력합니다.
내보내기: 입력한 값만 담긴 스펙 .md와, 모든 노드를 번호 박스로 표시한 주석 이미지를 같은 이름으로 저장합니다.
구현 요청: 두 파일을 Copilot 채팅에 함께 전달해 구현을 요청합니다.
주요 특징
서버 없이 브라우저에서만 동작합니다. API 키, 서버 호출, 환경 변수를 쓰지 않습니다. 이미지를 외부로 보내지 않
