UI/UX — 디자인 접근법

Rabbit 프론트엔드를 "AI 티 나는 평범함"에서 에이전시 수준으로 끌어올리기 위한 공통 워크플로. 특정 메뉴/라우트가 아니라 모든 화면 작업에 적용하는 방법론이다. 출처: Claude Code로 프리미엄 애니메이션 포트폴리오를 2시간에 만드는 X(트위터) 가이드 요약.

사전 준비 — 디자인 스킬/플러그인

• Frontend Design 스킬 (Anthropic, 백그라운드 구동): Inter 같은 흔한 폰트를 차단하고 대담한 레이아웃·카피를 유도. 설치: https://github.com/anthropics/skills/tree/main/frontend-design
• UI/UX Pro Max 플러그인: 57개 스타일·95개 컬러 팔레트 등을 직접 호출 (NPM 설치).
• Auto 모드: 매 단계 허락을 구하지 않고 연속 작업하도록 모드 선택기를 Auto로 전환.

6단계 빌드 워크플로

1. 디자인 스킬 설치

위 두 스킬/플러그인을 먼저 주입해 기본 출력물의 평범함을 극복.

2. 레퍼런스 수집·구조화

텍스트 설명만 하지 말고, 잘 만든 사이트(Awwwards·Pinterest 등)에서 영역별 스크린샷을 찍어 프로젝트 /reference 폴더에. 구체 네이밍: 1.png(히어로), 2.png(작업물 리스트), 6.png(푸터), 12.png(로딩 화면) …

3. 빌드 프롬프트 + 역질문(Q&A)

• 프롬프트 시작에 /ui-ux-pro-max로 플러그인 활성화, 준비한 레퍼런스 파일의 역할을 명시.
• 치트키: 프롬프트 맨 끝에 "빌드 전에 필요한 질문(clarifying questions) 4~6개 던져줘".
• 답변을 바탕으로 Claude가 ~5분 계획 + ~10분 빌드.

4. 인터랙티브 애니메이션 (예: 플래시라이트)

효과를 구체적으로 묘사해 한 번에 구현. 예: "어두운 히어로에서 평소 사진이 거의 안 보이다가, 커서가 올라가면 반지름 100~150px·부드러운 페더링 원형 마스크가 커서를 따라다니며 하단의 밝고 따뜻한 톤의 사진을 손전등처럼 비춘다."

5. 1차 검토 + 버그 일괄 수정

직접 스크롤하며 어색한 점(급격한 페이지 전환, 플래시 레이턴시, 폰트 불일치 등)을 리스트업. 하나씩 말고 리스트로 모아 한 번에 수정 요청 → 훨씬 효율적.

6. 구조화된 폴리싱(Grade) Pass

Claude에게 기준을 주고 사이트를 냉정히 채점하게 함:

• 타이포그래피(AI 특유 폰트 여부) · 컬러(절제된 팔레트인가) · 계층 구조(Hierarchy) · 애니메이션(자연스러움) · 모바일 반응형 · 카피라이팅 품질
• 점수+보완점 중 본인이 동의하는 항목만 추려 마지막 일괄 수정 프롬프트로 완성도 ↑.

한 줄 결론

레퍼런스 섹션별 매핑 · AI에게 역질문 유도 · 버그 일괄 수집 · 구조화된 피드백 루프 → 코딩 없이도 하이엔드 웹사이트를 단시간에. (에이전트 AI 프롬프트 엔지니어링의 정석)

Rabbit 적용 메모

• 새 화면(특히 Home 게이트, Market, XYZ 데모)은 이 워크플로로: /reference 수집 → 역질문 → Grade pass.
• 이미 적용된 전역 디자인 토큰 + 다크/라이트 테마와 일관되게 유지.