r/ClaudeAI•28일 전•273•73
Claude의 UI 디자인 능력에 대해 내가 틀렸었다
I was wrong about Claude’s UI skills
핵심 요약
UI 키트와 가이드라인을 MD 파일로 정의해 Claude에게 제공함으로써 고품질의 UI를 구현한 경험을 공유함.
- UI 디자인 방법론 — MD 파일에 UI 키트와 가이드라인을 정의하여 Claude의 결과물 품질을 대폭 향상함.
- 반복적 작업 효율 — 초기 가이드라인을 유지하며 반복 작업을 수행해 수정 없이 80%의 기능을 구현함.
- PDF 편집기 프로젝트 — Figma와 유사한 2D PDF 편집기 'pdfx'를 오픈소스로 개발하여 피드백을 요청함.
- 사용자 피드백 — 페이지 재배치 및 분할 기능에 대한 긍정적인 반응과 업데이트 내용에 대한 논의가 이어짐.
내가 UI 디자인만큼은 Claude보다 낫다고 생각했거든. 근데 지금까지 내가 만든 건 죄다 AI가 싼 똥 같은 결과물뿐이었음.
그러다 이 방식을 써봤는데, 일단 와이어프레임을 먼저 짜고, Claude랑 같이 UI 키트를 만들면서 가이드라인(테두리 없음, 부드러운 그림자, 여백 많이, 애니메이션에 베지에 곡선 사용 등)을 MD 파일로 정리하는 거야. 진짜 제대로 된 UI 디자이너가 하는 것처럼 말이지.
그다음엔 계속 수정해 나가는데, 항상 처음에 만든 UI 키트를 따르라고 시키는 게 핵심임. 레포에 있는 MD 파일을 참고하게 하면 더 좋고. 이렇게 하니까 결과물이 진짜 미쳤더라. Claude가 알아먹는 언어인 UI 키트(MD)를 통해 형식을 갖춰서 그런 듯.
덕분에 새로운 UI 기능 80%를 Claude랑 몇 시간 만에 다 구현했는데, 손댈 곳이 하나도 없었음.
이건 Figma 같은 2D PDF 편집기인데, 무료에 오픈소스임:
- repo: https://github.com/AlexandrosGounis/pdfx
- web demo: https://pdfx.zip
UI 어떤지 피드백 좀 주면 진짜 고맙겠음.
