설정
플러그인 사용해 보기
Design 플러그인에는 플로우 설명과 컴포넌트 라이브러리를 읽어 연결된 클릭 가능한 HTML 빌드를 생성하도록 이미 구성된 /design-handoff가 포함되어 있습니다. 관리자가 플러그인을 관리하고 있고 아직 사용할 수 없다면 이 단계는 건너뛰세요. 아래 내용 중 이 플러그인이 필요한 것은 없습니다.
/design-handoffGenerate developer handoff specs from a design./ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.도구 연결하기
Claude Cowork는 여러분의 시스템과 직접 연동될 때 더욱 강력해집니다. 권한과 접근 범위는 여러분이 직접 제어합니다. 도구 접근 권한에 대해 알아보기(새 탭에서 열림).
설정하려면 Cowork에서 Customize → Connectors로 이동하세요.
작업 폴더 설정하기
사용할 파일(플로우 설명 또는 스펙, 컴포넌트 라이브러리 내보내기, 토큰, 샘플 콘텐츠)을 컴퓨터의 한 폴더로 드래그한 다음 Cowork가 그 폴더를 가리키도록 설정하세요. Cowork는 그 폴더에서 읽어들이고 프로토타입 HTML을 하위 폴더에 다시 작성합니다. 프로토타이핑을 정기적으로 한다면, 라이브러리와 규칙이 계속 유지되도록 해당 폴더에서 Cowork 프로젝트를 생성(새 탭에서 열림)하세요.
프롬프트
이것을 Claude Cowork에 복사하세요
이 폴더에 있는 플로우의 클릭 가능한 HTML 프로토타입을 우리 디자인 시스템 라이브러리의 컴포넌트만 사용해서 만들어 주세요. 내비게이션을 연결하고, 실제와 같은 플레이스홀더 데이터를 사용하고, 브라우저에서 클릭해 볼 수 있도록 prototype/index.html에 작성해 주세요.
이 방법이 효과적인 이유
자신의 자료로만 제한하세요. UI를 임의로 만들어내지 않고, 모든 것이 실제 라이브러리에 매핑됩니다.
각 인터랙션이 무엇을 해야 하는지 설명하세요. 클릭하면 실제로 화면이 이동하므로, 사용자는 그림이 아니라 플로우를 테스트하게 됩니다.
실제와 같은 샘플 콘텐츠를 요청하세요. lorem ipsum 없이, 화면이 실제 제품처럼 읽힙니다.
소스 파일을 직접 제공하세요. 토큰과 CSS가 변경 없이 그대로 프로토타입에 반영됩니다.
더 나은 초안 얻기
참고할 예시를 추가하세요. 마음에 드는 예시를 폴더에 넣으면 Cowork가 여러분의 구조와 톤에 맞춰 작업합니다.
불확실한 부분을 표시하도록 요청하세요. "확신이 없는 부분은 표시해 주세요"라는 문구를 추가하면 초안을 검토할 때 어디를 먼저 살펴봐야 할지 알 수 있습니다.
Cowork를 여러분에게 맞게 만들기
플러그인의 /design-handoff는 범용적인 출발점입니다. 2단계에서 실제로 참가자에게 보여줄 만한 빌드가 나오면, Cowork에게 여러분만의 스킬 버전을 작성하도록 요청하세요. 컴포넌트 명명 규칙, 데이터 픽스처, 인터랙션 규칙, 그리고 프로토타입이 항상 들어가는 래퍼 페이지를 반영하세요. 몇 분간의 대화만으로 이후부터는 스킬이 여러분의 기준에 맞춰 실행됩니다.
지금까지 이 작업에서 한 것을 스킬로 만들거나, 제 피드백을 반영해서 /design-handoff 스킬을 수정해 주세요.
반복 가능하게 만들기
아티팩트로 공유하기
이메일로 돌려봐야 하는 프로토타입은 금방 낡아버립니다. Cowork에게 아티팩트로 게시하도록 요청하면 모든 리뷰어와 테스트 참가자가 하나의 링크를 갖게 되며, 스킬을 다시 실행하거나(또는 예약해서) 새로고침할 수 있습니다.
그 프로토타입을 아티팩트로 게시해 주세요. 모서리에 "v2, v3" 같은 작은 버전 표시를 추가해 주세요.
스펙이 바뀔 때마다 다시 빌드하기
스펙이 바뀌면 요청 없이도 프로토타입이 따라가야 합니다. 프롬프트에 /schedule을 입력하거나 Cowork 사이드바에서 Scheduled를 열어, 맞춤화한 스킬이 매일 아침 폴더에 있는 내용을 기준으로 다시 빌드하도록 설정하세요.
/schedule 평일 오전 7시에 Prototypes/Invite-Flow의 변경 사항을 확인하고 /design-handoff를 다시 실행해서 prototype/index.html을 재빌드하고 버전 표시를 올려 주세요.
매 평일 오전 7시에 프로젝트 폴더에서 스펙 또는 라이브러리 변경 사항을 확인하고, /design-handoff를 다시 실행하여 버전 표시를 올린 클릭 가능한 HTML을 재빌드합니다.
팀원과 공유하기
맞춤화한 /design-handoff에는 이제 여러분의 컴포넌트 맵, 데이터 픽스처, 래퍼 페이지가 담겨 있습니다. 이를 공유하면 팀의 어떤 디자이너든 동일한 방식으로 스펙에서 클릭 가능한 빌드까지 만들 수 있으며, 컨셉 테스트가 프레임을 수동으로 연결할 줄 아는 사람을 기다릴 필요가 없어집니다.