Opus로 만든 역대급 깔끔한 페이지, 의외로 비결은 아주 간단함
The cleanest page I've ever made with Opus, and surprisingly the trick is very simple.
핵심 요약
Figma 목업 스크린샷을 Claude에 제공하여 디자인 품질을 높이는 간단한 팁을 공유함.
- 디자인 팁 — Figma 목업 스크린샷을 활용해 Claude의 디자인 결과물 품질을 개선함
- 프롬프트 전략 — '깔끔하게 유지' 및 '최소한의 텍스트'를 명시하여 디자인 완성도를 높임
- Claude Code 활용 — 디자인 시스템 구축 및 애니메이션 구현에 효과적인 워크플로우를 제시함
- 결과물 공유 — 작성자가 직접 만든 웹사이트를 공개하며 오픈소스임을 강조함

이 꿀팁 하나로 페이지 퀄리티가 에이전시급으로 올라갔다.
Figma 목업을 스크린샷으로 찍고, '깔끔하게, 텍스트는 최소화'라고 주문해라.
Claude Code로 웹 페이지 디자인한 지 꽤 됐는데, 솔직히 기본 프롬프트로 뽑아내는 스타일이나 폰트 진짜 마음에 안 들더라. 취향 프롬프트부터 디자인 스킬까지 별짓 다 해봤는데, 의외로 훨씬 간단한 방법이 있었음.
Figma로 대충 목업 하나 만들었다(뭐 대단한 건 아니고 그냥 깔끔한 배경에 원 몇 개 넣은 수준). 평소에 모던하고 깔끔한 디자인을 좋아해서 Figma로 간단한 그리드 짜고, 그걸 스크린샷으로 찍어서 프롬프트에 같이 넣었음. 그러면서 텍스트는 아예 넣지 말거나 최대한 줄여달라고 딱 잘라 말했지.
두 번째 페이지는 목업도 안 줬는데, 애니메이션이랑 나머지 요소들까지 기가 막히게 뽑아주더라. 심지어 클릭도 다 됨.
