42 Practical Styling Tips for Claude UI/UX

들어가기 전에 — 3줄 요약

• 클로드가 만든 화면이 늘 밋밋한 이유는 실력이 아니라 '기준'이 없어서다.

• 작업 전에 미학 기준을 먼저 깔아주는 장치가 스킬(Skill) 이고, 이 글엔 42개가 정리돼 있다.

• 42개 다 깔지 말고 맞는 3~4개를 사용해보세요

1. 왜 클로드는 매번 '평범한' 화면을 뽑을까

• 시스템 기본 폰트 그대로

• 가운데 정렬 히어로 + 그라데이션 배경

• 간격도 그림자도 죄다 똑같은 카드 그리드

컬렉션 명칭은 '42 skills'. 개별 문서화 항목은 41개(레이어 03 캔버스 4종은 웹 기능)입니다.

2. 5분 안에 바로 써먹기

① 딱 4개만 깔면 됩니다 (핵심 스택)

# 1) 취향 베이스 (셋 중 하나만)
npx skills add anthropics/skills --skill frontend-design

# 2) 모션
npx skills add delphi-ai/animate-skill --skill animate

# 3) 색·간격 토큰
/plugin marketplace add ComposioHQ/awesome-codex-skills   # theme-factory

# 4) 검수(눈) — 가장 중요
claude mcp add playwright -s user -- npx @playwright/mcp@latest

넷 중 하나만 고르라면 playwright-mcp. 클로드에게 '눈'을 달아주는 거라, 스크린샷을 직접 보고 스스로 고치게 만듭니다. 체감 효과가 제일 큽니다.

② 설치가 부담되면 — 그냥 이 프롬프트를 복붙하세요

지금부터 UI를 만들 때 아래 규칙을 지켜줘.

[방향]
- 하나의 뚜렷한 스타일을 정하고 끝까지 밀어붙일 것 (에디토리얼/브루탈리즘/럭셔리 등)
- 시스템 기본 폰트 금지. 목적에 맞는 폰트 페어링을 의도적으로 고를 것

[레이아웃]
- 크기 대비로 위계를 만들 것. 다 똑같은 크기·간격은 금지
- 필요하면 비대칭·그리드 파괴 구성을 겁내지 말 것

[색·간격]
- 색은 CSS 변수 토큰으로 정의하고 재사용할 것 (즉흥 헥사값 금지)
- 여백은 4px(또는 8px) 그리드에 맞출 것

[모션]
- transform과 opacity만 애니메이션할 것 (width/top/margin 금지)
- 등장보다 퇴장을 더 빠르게, '모션 줄이기' 설정을 존중할 것

[마무리]
- hover / focus / active 상태를 반드시 디자인할 것
- 완성 후 스크린샷을 상상하고 어색한 부분을 스스로 지적·수정할 것

③ 3단계 워크플로

1. 깔기 — 위 4개를 설치하거나, ②의 프롬프트를 대화 맨 앞에 붙임

2. 시키기 — 만들고 싶은 걸 '글'로 설명 (예: "SaaS 랜딩, 다크 럭셔리, 폰트는 세리프 헤드라인")

3. 검수시키기 — "스크린샷 찍어서 320·768·1440 세 폭에서 어색한 곳 고쳐줘"

3. 스킬 42개 전체 정리 (설치 명령어 · repo · 언제 쓰나)

설치 방식 표기 npx skills add … = 스킬 추가 · /plugin … = 플러그인 마켓 · claude mcp add … = MCP 서버 연결

레이어 01 · 안티-슬롭 코어 — 프론트엔드 & UI (10)

• 언제: 모든 UI 작업의 첫 단추. 결과가 평범할 때 가장 먼저 켠다.

• 역할: 하나의 대담한 방향을 정하고 CSS 전에 목적·톤·제약을 먼저 답하게 강제. 기본 폰트 금지.

npx skills add anthropics/skills --skill frontend-design

• 언제: 이미 만든 화면을 '한 단어'로 다듬고 싶을 때.

• 역할: polish·critique·animate 등 한 단어 명령 23종. 4px 그리드·OKLCH·유동 타이포·AA 대비를 결정론적으로 통과. 브랜드 모드 / 제품 모드.

npx impeccable install   # 이후 /impeccable init

• 언제: 클로드가 매번 허락을 구하며 밋밋하게 굴 때.

• 역할: 변주·모션·밀도 3다이얼로 기본값에 진짜 취향을 부여. 비대칭 레이아웃·모션·의견 있는 스택.

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

• 언제: 움직임이 뚝뚝 끊기거나 어색할 때.

• 역할: 등장보다 퇴장을 빠르게, transform/opacity만 써서 60fps, 모션 줄이기 존중.

npx skills add delphi-ai/animate-skill --skill animate

• 언제: 모션 품질을 객관적으로 감수받고 싶을 때.

• 역할: 절제·완성도·위트를 맥락에 맞춰 가중. scale(0) 시작, 밋밋한 이징, 모션 줄이기 누락을 지적.

npx skills add kylezantos/design-motion-principles

• 언제: 컴포넌트마다 색·간격이 제각각일 때.

• 역할: 색·간격·타입 스케일을 CSS 변수 토큰 체계로 생성. 즉흥 헥사값 남발 방지.

/plugin marketplace add ComposioHQ/awesome-codex-skills

• 언제: 피그마 파일이 있고 그대로 코드화하고 싶을 때.

• 역할: 디자인 시스템을 존중하는 실전 코드로 변환, 모든 상태를 한 번에 생성.

claude mcp add figma -- npx figma-developer-mcp --stdio

• 언제: 항상. 디자인 에이전트에 줄 수 있는 최고의 레버리지 = '눈'.

• 역할: 뷰포트별로 스크린샷을 찍어 레퍼런스와 비교하고, 일치할 때까지 반복 수정.

claude mcp add playwright -s user -- npx @playwright/mcp@latest

• 언제: 코드 전에 브랜드 방향(로고·팔레트·타이포)을 먼저 잡고 싶을 때.

• 역할: 원샷 브랜드 보드를 레퍼런스 프레임으로 뽑아 Claude Code에 넘김.

npx skills add Leonxlnx/taste-skill --skill brandkit

• 언제: 주니어가 건너뛰는 '과정'(리서치·핸드오프·QA)을 챙길 때. 01~03 취향 레이어와 함께 쓰세요.

• 역할: 리서치 디스커버리, UX 전략, 개발 핸드오프 스펙, QA 체크리스트.

/plugin marketplace add Owl-Listener/designer-skills

레이어 02 · 픽셀·모션·3D — 이미지, 그래픽, 3D & 비디오 (8)

• 언제: 블로그 헤더·썸네일·목업·룸 리디자인을 터미널에서 빠르게.

• 역할: Gemini로 이미지 생성·편집, 멀티턴 리파인, 장당 약 $0.04.

/plugin install nano-banana@devon-claude-skills

• 언제: 프롬프트 짜기가 귀찮을 때(클로드가 대신 설계).

• 역할: 5단계 공식으로 의도를 해석해 프롬프트 자동 작성. 13모드 + 프롬프트 라이브러리.

/plugin marketplace add AgriciDaniel/banana-claude

• 언제: 캐러셀·인용 카드·인포그래픽처럼 폰트·색이 정확해야 하는 그래픽.

• 역할: 코드로 만든 수정 가능한 PNG/PDF 출력.

npx skills add anthropics/skills --skill canvas-design

• 언제: 스톡 같지 않은 유니크한 배경·히어로 텍스처가 필요할 때.

• 역할: 플로우필드·노이즈·파티클로 렌더마다 달라지는 제너러티브 비주얼.

npx skills add anthropics/skills --skill algorithmic-art

• 언제: 타임라인 편집기 없이 완성형 영상을 뽑고 싶을 때.

• 역할: 보이스오버·음악·스톡·자막·트랜지션 + 렌더→검수→수정 루프. React in, MP4 out.

/plugin marketplace add DojoCodingLabs/remotion-superpowers

• 언제: 설명 영상·숏폼 등 가벼운 프로그래매틱 영상 입문.

• 역할: 영어로 설명하면 클로드가 TypeScript 작성, Remotion이 프레임 단위 렌더.

npx create-video@latest   # Blank 템플릿, Skills 설치

• 언제: 3D 지식 없이 블렌더로 장면을 만들 때.

• 역할: 텍스트로 오브젝트·재질·조명·카메라·렌더 제어. 클로드가 bpy 파이썬 작성.

npx skills add LobzyJay/motion-design-with-claude --skill blender-motion

• 언제: 애프터이펙트가 작업 대상일 때 자동 로드.

• 역할: 프롬프트로 AE 애니메이션 — 실시간 MCP 명령 또는 ExtendScript JSX 생성 + 이펙트 카탈로그.

npx skills add LobzyJay/motion-design-with-claude --skill aftereffects-motion

레이어 03 · 제품 그 자체 — 클로드 디자인 / 캔버스 (4)

• 언제: 목업·캐러셀·덱처럼 요소 단위로 다듬어야 할 때(플랫 이미지 생성기로 안 되는 작업).

• 역할: 완성형 웹/앱 화면을 채팅으로 한 요소씩 반복 수정. ↗ https://claude.ai/design

• 언제: 브랜드(로고·폰트·색)를 학습시켜 전 작업에 일관 적용할 때. 구조부터 먹이세요.

• 역할: 여러 시스템을 보관하고 프로젝트별로 전환. ↗ https://claude.ai/design

• 언제: 매번 품질이 균일해야 하는 반복 콘텐츠.

• 역할: 완벽한 한 버전을 템플릿으로 저장 → 아무 디자인 시스템과 결합. ↗ https://claude.ai/design

• 언제: 브랜드 색 기반 발표자료가 필요할 때.

• 역할: 템플릿+브랜드 색으로 프레젠테이션 생성, 내보내기 / Claude Code로 실제 사이트화 / Canva 익스포트. ↗ https://claude.ai/design

레이어 04 · 픽셀이 아니라 '행동' — AI 제품 인터랙션 (8)

• 언제: 긴 대화·문서에서 토큰이 꽉 찰 때.

• 역할: 컨텍스트 창을 디자인 재료로 취급 — 토큰 예산, 요약 vs 검색, 우선순위, 우아한 성능 저하.

npx skills add Owl-Listener/ai-design-skills --skill context-window-design

• 언제: 봇이 대화가 꼬였을 때 즉흥으로 헤맬 때.

• 역할: 턴 주고받기·복구 시퀀스·그라운딩 체크포인트로 붕괴에서 회복.

npx skills add Owl-Listener/ai-design-skills --skill conversation-patterns

• 언제: 텍스트로 답할지 위젯을 띄울지 판단이 필요할 때.

• 역할: 날짜 선택기·카드·차트 등 UI 렌더 시점 규칙과 안전한 폴백.

npx skills add Owl-Listener/ai-design-skills --skill generative-ui

• 언제: 첫 턴에 과부하, 50턴째엔 기능 미사용 문제를 막을 때.

• 역할: AI가 자기 능력을 드러내는 단계를 설계.

npx skills add Owl-Listener/ai-design-skills --skill progressive-disclosure

• 언제: 텍스트·이미지·도구 사용을 한 흐름에 엮을 때.

• 역할: 언제 보고, 언제 도구를 부르고, 언제 말할지 시퀀싱.

npx skills add Owl-Listener/ai-design-skills --skill multimodal-orchestration

• 언제: 에이전트와 사용자 중 누가 주도할지 애매할 때.

• 역할: 주도권 정의 + 깔끔한 인수인계 신호로 교착 방지.

npx skills add Owl-Listener/ai-design-skills --skill mixed-initiative-flow

• 언제: 사용자가 폭발(rage-quit)하기 전에 감지·대응할 때.

• 역할: 대문자·문장부호·반복·지연으로 짜증을 읽고 단순화·속도조절·사람 연결.

npx skills add Owl-Listener/ai-design-skills --skill frustration-detection

• 언제: 교정·평점 신호를 실제 행동 변화로 연결할 때.

• 역할: 은근한 신호 우선, 명시적 평점은 아껴서 설계.

npx skills add Owl-Listener/ai-design-skills --skill feedback-loops

레이어 05 · 프롬프트가 곧 제품 — 프롬프트 아키텍처 (8)

• 언제: 시스템 프롬프트의 뼈대를 처음부터 제대로 잡을 때.

• 역할: 정체성·맥락·규칙·출력 스펙·예시. 중요한 지시를 맨 앞·맨 뒤(모델이 가장 집중하는 위치)에.

npx skills add Owl-Listener/ai-design-skills --skill system-prompt-structure

• 언제: 답변마다 캐릭터가 흔들릴 때.

• 역할: 캐릭터·보이스·경계를 한 번 정의해 세션 내내 유지.

npx skills add Owl-Listener/ai-design-skills --skill persona-architecture

• 언제: 같은 모델이 위기 티켓과 환영 플로우에서 다르게 읽혀야 할 때.

• 역할: 맥락별 격식·온기·자신감 다이얼.

npx skills add Owl-Listener/ai-design-skills --skill tone-calibration

• 언제: 짜증·혼란·기쁨·불안 상황에 반응 설계가 필요할 때.

• 역할: 증폭 없이 공감·완화, 필요 시 사람에게 핸드오프하는 반응 지도.

npx skills add Owl-Listener/ai-design-skills --skill emotional-design

• 언제: 하나의 소스로 대량·일관 출력이 필요할 때.

• 역할: 이름·타입·범위가 정해진 변수 + 조건 섹션의 파라미터 프롬프트 템플릿.

npx skills add Owl-Listener/ai-design-skills --skill template-design

• 언제: 모델이 계속 놓치는 실패 유형을 잡을 때(지시 10줄보다 예시가 낫다).

• 역할: 까다로운 케이스를 겨냥한 예시 세트.

npx skills add Owl-Listener/ai-design-skills --skill few-shot-patterns

• 언제: 다단계 작업의 추론을 즉흥에 맡기지 않을 때.

• 역할: 구조화된 의도적 추론 체인.

npx skills add Owl-Listener/ai-design-skills --skill chain-of-thought-design

• 언제: 형식·길이·톤·금지어를 '검증 가능하게' 강제할 때.

• 역할: 지켰는지 실제로 확인 가능한 테스트형 경계.

npx skills add Owl-Listener/ai-design-skills --skill constraint-specification

레이어 06 · 안전하게 출시 — 신뢰 & 안전 (3)

• 언제: 되는 것/안 되는 것을 '느낌'이 아니라 강제 규칙으로 못 박을 때.

• 역할: 명확한 행동 경계와 거절 패턴을 집행 가능한 선으로.

npx skills add Owl-Listener/ai-design-skills --skill guardrail-design

• 언제: 사용자가 답을 과신/불신하지 않게 할 때.

• 역할: 허풍 대신 불확실성 표시 — 자신감·출처 신호 제공.

npx skills add Owl-Listener/ai-design-skills --skill trust-calibration

• 언제: 사용자가 스스로 의존도를 조절하게 도울 때.

• 역할: 아는 것·모르는 것·확신 정도를 표면화.

npx skills add Owl-Listener/ai-design-skills --skill transparency-patterns

4. 상황별 추천 조합

• 랜딩페이지·웹사이트 → 01 frontend-design + 06 theme-factory + 04 animate + 08 playwright-mcp

• 인스타 카드뉴스·썸네일 → 13 canvas-design + 14 algorithmic-art (+ 19 캔버스)

• 유튜브·릴스 영상 → 15 remotion-superpowers · 16 claude-remotion

• 3D·모션그래픽 → 17 blender-motion · 18 aftereffects-motion

• 피그마 시안 코드화 → 07 figma → code + 08 playwright-mcp

• 챗봇·AI 서비스 기획 → 23~30 (레이어 04 전체)

• 프롬프트 품질 올리기 → 31~38 (레이어 05 전체)

• 출시 전 안전 점검 → 39~41 (레이어 06 전체)

5. 오해하지 말 것 — 스킬은 '바닥'일 뿐

6. 지금 할 일

1. 핵심 4개를 깔거나, 복붙 프롬프트를 대화 맨 앞에 넣는다

2. 만들 걸 '스타일까지' 구체적으로 말한다

3. 스크린샷 검수를 시켜 스스로 고치게 한다