StyleSnap — 화면 요소 측정 도구

AI에게 화면 수정을 맡길 때 가장 어려운 건 "어디를 얼마나 고쳐야 하는지"를 정확히 말하는 일이었습니다. 버튼의 크기, 여백, 글자 크기, 색상 같은 정보를 눈대중으로 설명하면 결과가 자꾸 어긋났습니다. StyleSnap은 화면 위 요소를 클릭해서 필요한 수치를 복사하고, 그 아래에 원하는 요청을 붙일 수 있게 만든 도구입니다.

StyleSnap은 화면의 크기, 여백, 색상 정보를 복사해 디자인 수정 요청을 쉽게 만드는 도구입니다. 반복적인 화면 점검과 커뮤니케이션 비용을 줄이기 위해 작게 만든 자동화 도구입니다.

제품 링크

StyleSnap 크롬 웹스토어에서 설치하기

이 작업으로 보여주는 것

• 화면 요소 측정과 수정 요청 자동화
• 크롬 확장 프로그램 제작
• 사용자가 복사해 바로 전달할 수 있는 업무용 출력 형식 설계
• 디자인 점검과 개발 커뮤니케이션 비용 절감
• 작은 자동화 도구 제작

사용법

1. 검사할 페이지에서 툴바의 StyleSnap 아이콘을 누릅니다.
2. 요소에 마우스를 올리면 크기와 여백이 미리 보입니다.
3. 클릭해서 선택하면(여러 개 가능) 요소 사이 거리까지 표시됩니다.
4. '복사' 버튼을 누르면 아래 같은 텍스트가 클립보드에 담깁니다.
5. 복사한 텍스트 끝에 요청을 덧붙여 AI에게 그대로 전달합니다.

사용 예시

복사한 수치 아래에 원하는 수정사항을 이어 적으면 됩니다.

아래는 StyleSnap으로 복사한 화면 요소 측정값이야.
이 수치를 기준으로 레이아웃만 정확히 수정해줘.

[선택된 요소 1개]
1) <div.rounded-xl.border.border-dashed>
   위치: … > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2)
   태그: <div class="rounded-xl border border-dashed border-toss-g300 bg-white py-14 text-center text-toss-g500 text-[14px]">
   텍스트: "필터를 고른 뒤 미리보기 버튼을 눌러 단지 목록을 확인하세요."
   - 가로: 635px
   - 세로: 135px
   - 배치: block
   - 안쪽여백(padding): 56px 0px
   - 바깥여백(margin): 0px
   - 글자크기: 14px
   - 줄간격: 21px
   - 굵기: 400
   - 글꼴: -apple-system
   - 색: #8b95a1
   - 배경: #ffffff
   - 테두리(border): 1px dashed #d1d6db
   - 모서리(radius): 12px

[요청]
이 안내 박스의 안쪽여백(padding)을 위아래 56px에서 32px로 줄여줘.
나머지 가로·색·테두리·radius는 그대로 두고 padding만 수정해줘.