사람들은 도대체 어떻게 Claude로 양산형 AI 느낌이 아닌 멋진 UI를 만드는 걸까?
How are people actually getting Claude to build beautiful UIs instead of generic AI slop?
핵심 요약
Claude로 고품질 UI를 구현하는 실무적인 워크플로우와 디자인 레퍼런스 활용법에 대한 논의입니다.
- 디자인 레퍼런스 활용 — Dribbble이나 Awwwards 등에서 원하는 디자인을 찾아 Claude에게 브랜드 아이덴티티를 입혀 복제하도록 요청함.
- 감독자 역할 수행 — AI에게 모든 걸 맡기지 말고, 구체적인 디자인 시스템이나 프레임워크(shadcn 등)를 지정해 디렉팅해야 함.
- 디자인 시스템 구축 — 기존 사이트나 이미지에서 디자인 시스템을 추출하거나, Figma로 설계한 뒤 Claude에게 구현을 맡기는 방식이 효과적임.
- 반복적 피드백 루프 — 결과물을 보고 수정 사항을 구체적으로 지시하며 원하는 수준이 나올 때까지 반복하는 과정이 필수적임.
웹사이트 만들면서 계속 똑같은 문제에 부딪히네.
Claude가 구조나 UX 흐름, 정보 설계, 기능적인 대시보드 짜는 건 진짜 잘하거든.
근데 비주얼 레이어로 넘어가면 죄다 양산형 AI SaaS처럼 변해버림:
사방에 깔린 카드
아무 데나 들어간 그라데이션 / 글로우 효과
과하게 둥근 테두리
도배된 Lucide 아이콘
이유 없이 박아넣은 필(pill)이랑 배지
뻔한 간격
다 똑같이 생긴 양산형 대시보드
한마디로… AI 찌꺼기(slop) 수준임.
이해가 안 가는 게, X나 유튜브 보면 Claude/Opus로 만들었다면서 진짜 예쁜 인터페이스 뽑아내는 애들이 널렸단 말이지.
그래서 그 결과물 뒤에 숨겨진 실제 워크플로우가 뭔지 파악해보려고 함.
너네 진짜 그냥 Claude한테 프롬프트만 잘 짜서 던지는 거임?
아니면 이런 것들을 쓰는 거임?
Figma 레퍼런스
기존 디자인 스크린샷
Mobbin / Refero / Dribbble 레퍼런스
shadcn / Radix / 특정 컴포넌트 라이브러리
Claude Code + Playwright
스크린샷 → 비전 기반 피드백 → 수정 → 스크린샷 반복 루프
커스텀 일러스트/에셋용 이미지 생성 툴
MCP/브라우저 툴
비주얼 QA 전용 별도 모델
내가 진짜 원하는 건 이런 거임:
Claude가 페이지를 빌드함 → 앱을 엶 → 실제로 렌더링된 UI를 확인함 → 일러스트나 아이콘, 배너 같은 게 들어가면 더 낫겠다는 걸 깨달음 → 에셋을 만들거나 찾아서 배치함 → 다시 스크린샷 찍음 → 결과물 평가함 → UI가 진짜 깔끔해질 때까지 반복.
그냥 단순히:
"이 대시보드 좀 더 현대적이고 고급스럽게 만들어줘."
...라고 해서 또 똑같은 카드 4개 + 그라데이션 + 보라색 글로우 떡칠된 결과물 받는 거 말고.
Claude로 하이엔드급 프로덕션 퀄리티 UI를 꾸준히 뽑아내는 형들, 실제 워크플로우가 어떻게 됨?
특히 Claude Code나 Opus 쓰는 사람들 얘기 좀 듣고 싶음.
프롬프트 예시나 툴 스택, MCP, 비주얼 피드백 루프, 아니면 워크플로우 스크린샷 같은 거 공유해주면 진짜 큰 도움이 될 듯.
"프롬프트 잘 짜라" 같은 뻔한 소리는 사양함. 진짜 괜찮은 결과물을 뽑아내는 '반복 가능한 프로세스'가 뭔지 알고 싶음.
