클로드 디자인의 토큰이 2배로 확장됐습니다. 슬라이드, 프로토타입, 템플릿 등에서 자사 디자인 시스템을 반영해 실제 업무에도 쓸 수 있는 수준의 결과물을 제공하는데요. 온보딩이 잘 돼야 원하는 결과를 얻을 수 있습니다. 모든 항목이 선택사항이지만, 채울수록 결과물 퀄리티가 달라집니다. 제가 온보딩하면서 필수로 반영하면 좋은 것들을 ⭐️로 표시해뒀습니다.
——
✅ Company name and blurb ⭐️
회사명만 쓰지 말고 어떤 플랫폼에서 쓰이는 제품인지 지침을 함께 쓰는 것이 좋습니다. 모바일 앱인지, 웹 대시보드인지에 따라 클로드가 생성하는 레이아웃 패턴이 달라지거든요. 클로드가 디자인 맥락을 이해하는 데 도움이 됩니다.
✅ Link code on GitHub / Link code from your computer ⭐️
코드베이스가 있다면 꼭 연결하세요. 컴포넌트 구조, props, CSS 변수까지 직접 읽어내기 때문에 다른 항목보다 훨씬 정확하게 디자인 시스템을 반영합니다. 단, 모노레포 전체 연결은 지연이나 오류가 생길 수 있으니 프론트엔드 중심 서브폴더만 연결하는 게 안전합니다.
✅ Upload a .fig file ⭐️
피그마 파일은 브라우저에서 로컬로만 파싱되고 서버에 업로드되지 않습니다. 보안 민감한 파일도 안심하고 올릴 수 있습니다. 단, 작업 중인 지저분한 파일보다 정리된 UI 키트나 디자인 시스템 파일을 올려야 효과가 있는데, 저는 주요 화면만 우선 반영했습니다.
✅ Add fonts, logos and assets
위 항목들을 보완하는 용도입니다. 단독으로 쓰기엔 부족하고, 폰트 파일/로고/브랜드 컬러 스와치를 함께 올리면 세부 표현의 정확도가 올라갑니다. 저는 로고 규격을 잘 못 지키는 것 같아서 반영했습니다.
✅ Any other notes? ⭐️
코드나 파일로 전달하기 어려운 것들을 여기 채워야 합니다. 브랜드 톤앤매너, 절대 쓰지 말아야 할 컬러나 패턴, 특수한 컴포넌트 규칙 같은 것들입니다. 비워두면 클로드가 임의로 판단하는 영역이 넓어지니 구체적으로 적을수록 좋습니다. 예를 들면 그라데이션 사용 금지, 색상 5개 이상 쓰지 않기 같은 지침입니다.
——
동료와 클로그 디자인 얘기하다가 아직 온보딩 전이라고 해서 겸사겸사 정리해봤습니다. 아직 세팅 전이라면 시작해보세요. 예전엔 디자인 시스템만 반영해도 토큰이 끝났는데 지금은 좀 나아졌겠죠? 😆
해시태그#ClaudeDesign 해시태그#AI
