디자인 도구·꿀팁 모음
AI로 디자인할 때 실제로 도움이 되는 것들을 테마별로 모았습니다. 감으로 비슷하게가 아니라 숫자로, 그리고 피그마 없이도 — 디자인에 예민한 분일수록 쓸모 있는 것 위주로 골랐어요.
감이 아니라 숫자로 — 정밀 도구
“느낌 있게”를 정확한 값으로 바꿔주는 것들
motiscope — 애니메이션 '느낌'을 수치로 뽑아내기
출처마음에 드는 레퍼런스 사이트의 움직임을 화면 녹화해서 주면, Claude가 그 애니메이션을정확한 숫자로 되돌려줍니다.“약간 통통 튀는 느낌”이 이렇게 나와요:
이징
cubic-bezier(.34, 1.56, .64, 1)
글자 간격
647ms
마퀴
등속
내가 미처 못 본 디테일(글자가 랜덤 문자로 흩어졌다 모이는 효과 등)까지 찾아준다는 게 포인트예요.
design.md — 디자인 값을 텍스트 파일 하나로 관리 + 자동 검사
출처색상·간격·폰트 같은 디자인 값을 텍스트 파일 하나(design.md)에 정의해두는 방식이에요. 이 형식은 Google Labs가 만들었고, Vercel 같은 곳들이 자기 디자인 파일을 이 형식으로 공개했어요. 값마다 “왜 이 값인지” 근거까지 같이 적어요.
진짜 강력한 건 린터(자동 검사기)예요. 코드에 오타 검사하듯, 디자인 일관성이 깨진 곳을 자동으로 잡아줍니다:
npx -p @google/design.md designmd lint DESIGN.md
통과하면 “0 errors, 0 warnings”. 디자인을 감이 아니라 규칙으로 지킬 수 있어요.
깃허브 스타 10만 개가 넘는 "UI UX Pro Max" 스킬은 업종별 디자인 룰을 미리 정해뒀어요. 같은 항목인데 업종마다 정반대가 되는 게 핵심입니다:
은행 앱
장난스러운 그라디언트 ❌
럭셔리 브랜드
빠른 애니메이션 ❌ (느림 = 고급)
키즈 학습 앱
차분한 색 ❌ (원색·채도가 정답)
은행 앱
장난스러운 그라디언트 ❌
럭셔리 브랜드
빠른 애니메이션 ❌ (느림 = 고급)
키즈 학습 앱
차분한 색 ❌ (원색·채도가 정답)
“이 업종에서는 이게 금지”처럼 구체적으로 줄수록 AI 리뷰 품질이 올라갑니다
피그마 없이 쓰는 디자인 시스템
피그마의 핵심 기능이 다른 도구로 들어왔습니다
Claude Design 에디터 — 레이어·오토레이아웃이 들어왔어요
업데이트 출처
Claude디자인 캔버스를 만들었어요
히어로 섹션, 혜택 카드, CTA 버튼이 포함된 랜딩 페이지입니다.
- 히어로 배너
- 혜택 카드 섹션
- CTA 버튼
여름을 가장 빛나게 입어요
시즌 한정 최대 70% 할인. 트렌디한 여름 컬렉션을 지금 만나보세요.
프롬프트로 화면을 만드는 Claude의 디자인 캔버스인데, 최근 업데이트로 레이어 창, 오브젝트 정렬, hug/fix/fill(피그마 오토레이아웃과 같은 개념)이 생겼어요. 피그마 없이도 세부 조정이 됩니다.
/design-sync로 코드 저장소의 디자인 시스템을 그대로 가져와 디자인과 구현을 한 소스로 맞출 수도 있어요.
주의: Claude Code와 같은 사용량 주머니를 써요. 오래 놀면 코딩 한도가 같이 닳으니 짧게 체험하는 걸 권장.
'수택이' — 규칙 기반 AI 에이전트로 가이드를 실무에 내재화
출처팀스파르타의 UX 라이팅 팀 사례예요. 잠자던 스타일 가이드 문서를, 작업 순간에 자동으로 참고하는 에이전트로 바꿨어요. 핵심 설계 원칙 세 가지가 교육 도구의 뼈대와 똑같습니다:
강제로 반영 안 함
함께 제시
사람이
“모델에게 잘해달라 요청하지 말고, 정확히 판단할 규칙과 환경을 설계하라”
오늘의집 — 3D 아이콘 200개를 AI로 '일관성 있게' 만들기
출처AI로 이미지를 여러 장 만들 때 가장 어려운 게 스타일 일관성이에요. 오늘의집은 200개 3D 아이콘을 하나의 규칙(조명·각도·질감·색)으로 묶어 이미지봇으로 뽑았어요. “감각을 규칙으로 바꾸는” 실제 사례라 크리틱 워크숍 재료로 좋아요.
AI 티(슬롭) 없애기
어디서 본 듯한 화면에서 벗어나는 법
frontend-design 플러그인 — 뻔해질 때의 처방전
출처“AI스러운 디자인을 피하고, 이 맥락에 맞는 독창적 방향을 잡아줘”를 해주는 공식 플러그인이에요. Claude Code에서 아래처럼 설치해두면 돼요:
/plugin install frontend-design@claude-plugins-official
설치가 어렵거나 결과가 뻔할 때는, 이 한 줄부터 말해봐도 좋아요:
AI가 만든 티가 나는 디자인은 피해줘. 이 프로젝트의 성격에 맞는 폰트와 색을 근거와 함께 제안하고 나서 만들어줘
Impeccable — 감상평이 아니라 '위치 + 판정 + 근거'
출처완성물을 검사해서 AI가 만든 인터페이스의 규칙 60여 개를 자동으로 짚어주는 도구 스위트예요 (GitHub 스타 7만+). Chrome 확장, CLI, 슬래시 명령 세 가지로 피그마 없이 브라우저·터미널에서 바로 검수합니다.
눈여겨볼 건 출력 형식이에요 — 좋은 피드백은 감상평이 아니라 판정 + 근거 + 위치. “3번째 파일 12번째 줄에 보라 그라디언트 → 수정 전 배포 불가”처럼요. 여러분이 만들 크리틱 도구가 배울 지점입니다.
AI '밤티' 없애는 4가지 실전 팁
출처클로드로 디자인할 때 티를 줄이는 구체적 수치·규칙 4가지를 정리한 게시물이에요. frontend-design 플러그인과 함께 “마무리 단계” 체크리스트로 쓰기 좋아요.
일러스트레이터·벡터를 웹으로
내가 그린 그래픽을 토씨 하나 안 틀리고 옮기기
컴포넌트 단위(로고·아이콘·카드)는 자간·폰트·색상까지 그대로 옮길 수 있어요.방법이 하나가 아니라 세 갈래입니다:
1. SVG 내보내기
가장 표준 · 정확도 최고
2. CSS Properties 패널
내보내기 없이 코드 바로 복사
3. .ai 파일 그대로
제일 간편 · 자간 정확도는↓
1. SVG 내보내기
가장 표준 · 정확도 최고
2. CSS Properties 패널
내보내기 없이 코드 바로 복사
3. .ai 파일 그대로
제일 간편 · 자간 정확도는↓
셋 다 페이지 전체보다 컴포넌트·오브젝트 단위일 때 특히 깔끔합니다
기억할 것
벡터를 다루는 보조 도구
폰트·타이포그래피
글자를 다루는 도구들
카드뉴스·브랜딩·목업
완성물을 뽑아내는 도구들
Claude로 브랜드 캐러셀 카드뉴스 자동 생성
출처브랜드 톤에 맞춰 인스타 캐러셀(여러 장짜리 카드뉴스)을 자동 생성. 마케팅 콘텐츠를 빠르게 뽑을 때.
Canva 연결 — 채팅으로 디자인 생성·리사이즈·내보내기
출처
Connectors로 Canva를 연결하면 채팅창에서 바로 카드뉴스·프레젠테이션을 만들고 사이즈를 바꾸고 PNG로 내보낼 수 있어요.
전시 안내용 6장짜리 카드뉴스 만들어줘. 차분한 톤, 세로형으로
모바일 앱 하나로 브랜드 패키지 박스 제작
출처스티커 노가다 없이, 앱에서 브랜드 패키지 박스 목업을 만드는 사례. 굿즈·패키지 시안 빠르게 볼 때.