AI 디자인 협업자를 직접 만드는 법 — Anthropic Claude 디자인 시스템 프롬프트 오픈소스 분석 (github.com)

한줄 요약

Anthropic Claude의 디자인 시스템 프롬프트가 역설계·공개됐다 — AI 디자인 협업의 품질을 시스템 수준에서 통제하는 구조다.

무엇이 달라지나?

LLM 기반 디자인 도구에 늘 따라붙는 비판이 있다. "결과물이 다 거기서 거기다." 크림색 배경, 세리프 헤드라인, 테라코타 계열 포인트 컬러, 어디서나 Inter 폰트, 과도한 이모지 장식 — 이른바 **AI 슬롭(AI Slop)**이다. 이 프로젝트는 그 문제를 프롬프트 설계 수준에서 정면으로 겨냥한다.

GitHub 사용자 Trystan-SA가 공개한 claude-design-system-prompt는 Anthropic의 Claude 디자인 도구에 실제 사용된 것으로 보이는 시스템 프롬프트를 역설계한 결과물이다. MIT 라이선스로 공개됐으며, Claude뿐 아니라 GPT, Gemini, 로컬 모델 등 시스템 프롬프트를 지원하는 모든 LLM에 적용할 수 있다.

구조는 크게 두 축으로 나뉜다. 하나는 20개 챕터로 구성된 메인 시스템 프롬프트다. 콘텐츠 원칙, 시각적 위계, 타이포그래피, 컬러 시스템, 접근성(WCAG), 인터랙션 상태, 시스템 사고까지 디자인 철학 전반을 명문화한다. 다른 하나는 14개의 절차적 스킬이다. 에이전트가 사용자 요청의 맥락을 파악해 해당 스킬을 직접 호출하는 방식으로 작동한다.

스킬은 세 범주로 나뉜다. 프로덕션 영역에는 디스커버리 질문, 와이어프레임, 인터랙티브 프로토타입 제작 등이 포함된다. 시스템 영역은 디자인 토큰 추출, 재사용 컴포넌트 정리를 담당한다. 리뷰 영역에는 WCAG 접근성 감사, AI 슬롭 패턴 탐지(ai-slop-check), 인터랙션 상태 점검, 최종 폴리시 패스가 있다. 스킬은 체이닝이 가능해서 신규 프로젝트라면 discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass 순으로 흐름을 구성할 수 있다.

기술 선택도 눈에 띈다. 범용적인 CSS 유틸리티 프레임워크에 의존하는 대신 실제 CSS Grid, oklch() 컬러 함수, text-wrap: pretty 같은 현대 웹 표준을 직접 사용하도록 명시한다. 컴포넌트와 디자인 토큰 중심의 시스템 사고를 기본값으로 삼는다는 점도 일회성 페이지 생성 도구와 결이 다르다.

실무에서 어떤 의미인가?

이 프로젝트가 흥미로운 이유는 단순히 "좋은 프롬프트를 공유했다"는 데 있지 않다. 프롬프트 자체를 소프트웨어 아키텍처처럼 설계했다는 점이 핵심이다.

스킬 파일은 각자 독립적인 절차로 작동하며, 스킬 이름이 트리거다. 사용자가 특정 요청을 하면 에이전트가 매칭되는 스킬을 로드해 단계별로 실행한다. 이건 단순한 프롬프트 엔지니어링이 아니라 에이전트 행동을 구조적으로 통제하는 방식에 가깝다.

모델 캘리브레이션 섹션도 실무적으로 가치 있다. 현재 Anthropic 프론티어 모델은 "최소 N개 질문을 해라" 같은 쿼터 지시를 계약처럼 문자 그대로 따르는 경향이 있다. 이 프롬프트는 그 대신 조건 기반 트리거를 쓴다 — 언제 행동할지 조건을 명시하고, 사소한 결정은 모델이 자율적으로 처리하되 기록만 남기도록 설계했다. 반대로 오래된 모델이나 비-Anthropic 모델에서는 더 강한 명령형 언어를 복원해야 한다고 명시한다. 모델 세대에 따라 프롬프트 전략이 달라야 한다는 사실을 구체적인 사례로 보여주는 드문 레퍼런스다.

외주 개발이나 프로덕트 빌딩 맥락에서 보면, 이 구조는 디자인 QA 프로세스를 AI에게 위임할 때의 신뢰도 문제를 다루는 실용적인 접근이기도 하다. 리뷰 스킬들이 ai-slop-check를 별도 게이트로 두고, 폴리시 패스를 최종 관문으로 배치한 것은 품질 기준을 명시적으로 코드화한 사례다.

도입 전 체크포인트

이 프롬프트를 그대로 쓰기 전에 확인할 사항이 있다.

출력 환경 일치 여부. 프롬프트는 HTML 출력 환경을 기본으로 설계됐다. Figma 플러그인이나 코드 전용 어시스턴트 환경에서는 워크플로 챕터 일부를 수정해야 한다. 단, 챕터 5~16의 디자인 원칙은 어떤 매체에도 적용 가능하다고 명시돼 있다.

사용하는 모델의 세대. 현재 Anthropic 프론티어 모델 기준으로 캘리브레이션된 버전과, OpenAI Codex용 단일 루프 변형 버전(codex/)이 별도로 제공된다. 어떤 모델을 쓰느냐에 따라 시작점이 달라진다.

브랜드 컨텍스트 유무. 기존 브랜드가 있는 프로젝트라면 design-system-extract → generate-variations → make-tweakable → polish-pass 흐름이 권장된다. 브랜드가 없는 그린필드 프로젝트라면 frontend-aesthetic-direction을 먼저 실행해 방향성을 고정해야 한다.

팀 내 디자인 리터러시. 스킬 이름이 트리거로 작동하는 구조인 만큼, 팀원이 어떤 스킬이 존재하고 언제 호출해야 하는지 이해하지 못하면 시스템의 절반도 활용하지 못한다. 스킬 목록을 팀 공용 문서로 정리해두는 것이 선행되어야 한다.