StyleSnap — for 바이브 코딩

바이브 코딩을 할 때 가장 어렵게 느껴진 것은 디자인입니다. 개인의 미적 감각은 둘째치고, LLM에게 요청할 때마다 버튼의 크기가 달라지거나 버튼 간의 간격이 틀어진다거나 하는 어려움을 겪었습니다. 정확하게 지시하지 못했기 때문입니다. 각 요소별 용어를 몰라서 캡처해서 애매하게 요청했습니다. '이거 조금만 줄여줘…' 저도 LLM도 둘 다 알지 못하는 언어로 소통하고 있었습니다. 이걸 해결해 보고자 익스텐션으로 제작했습니다.

사용법

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

사용 예시

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

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

[선택된 요소 2개]
1) <header.site-header>
   가로 1280px · 세로 64px · 배치 flex
   안쪽여백(padding) 16px 24px · 바깥여백(margin) 0
2) <div.hero-card>
   가로 480px · 세로 320px · 배치 block
   안쪽여백(padding) 32px · 모서리(radius) 16px

[요소 간 거리]
1 → 2 : 세로 간격 24px

[요청]
hero-card를 header.site-header 아래에서 16px만 떨어지게 바꿔줘.
다른 크기, padding, radius는 건드리지 말고 두 요소 사이 세로 간격만 수정해줘.