Claude 디자인 시스템 프롬프트

Anthropic의 Claude Design을 역공학(Reverse-engineered)한 시스템 프롬프트입니다.

LLM을 주관이 뚜렷하고, 접근성(Accessibility)을 고려하며, AI-slop(AI가 생성한 저품질 콘텐츠)에 저항하는 디자인 협업자로 변모시키는 시스템 프롬프트 및 스킬 라이브러리입니다.

오픈 소스이며 MIT 라이선스를 따릅니다. 시스템 프롬프트를 지원하는 모든 LLM(Claude, GPT, Gemini, 로컬 모델 등)에 이 프롬프트를 입력하고, 필요에 따라 절차적 스킬(procedural skills)을 결합하여 사용하세요.

이것이 무엇인가

대부분의 "디자인 어시스턴트" 프롬프트는 공격적인 그라데이션, 이모지 장식, 왼쪽 테두리가 있는 라운드 코너 카드, 모든 곳에 Inter 폰트를 사용하는 등 전형적인 SaaS 템플릿 결과물을 만들어냅니다. 이 프롬프트는 이러한 패턴을 명시적으로 거부하며, 다음과 같은 내용을 포함하는 완전한 디자인 철학으로 이를 대체합니다:

• 콘텐츠 규율 (filler/불필요한 요소 없음 — 모든 요소는 존재 가치가 있어야 함)
• 미학적 규율 (AI의 상투적인 표현(tropes)을 피하고, 팔레트와 톤을 준수함)
• 시각적 계층 구조 및 리듬 (크기, 색상, 무게, 위치, 밀도, 간격 스케일)
• 접근성 (WCAG, 시맨틱 HTML (semantic HTML), 키보드 내비게이션, 포커스 링 (focus rings), 동작 선호도)
• 상호작용 및 피드백 (hover, active, disabled, focus, loading, validation 상태)
• 시스템 사고 (일회성 페이지가 아닌 컴포넌트와 토큰 중심)
• 매체 존중 (실제 CSS Grid, oklch(), text-wrap: pretty, 실제 상호작용 가능한 프로토타입)
• 양보다 질 (넓이보다 깊이, 모든 세부 사항의 완성도)

또한, 에이전트가 제작, 추출 및 검토 작업을 위해 호출할 수 있는 14가지의 절차적 스킬(procedural skills)이 포함되어 있습니다.

포함된 내용

claude-design-system-prompt/
├── claude/                              Claude Code / Claude.ai 변형 버전
│   ├── system-prompt.md                 메인 시스템 프롬프트 — 20개 장(chapters)
...

사용 방법

시스템 프롬프트를 직접 사용하기

system-prompt.md의 내용을 시스템 프롬프트를 지원하는 모든 LLM의 시스템 프롬프트로 붙여넣으세요. 에이전트는 디자인 철학을 따르며, 작업이 일치할 때 스킬을 이름으로 참조할 것입니다.

스킬을 절차로 사용하기

스킬을 절차로 사용하기

skills/에 있는 각 스킬은 독립적이고 단계적인 절차 (phased procedure)입니다. 스킬 이름이 트리거 (trigger) 역할을 합니다. 사용자의 요청이 스킬 설명과 일치하면, 에이전트는 해당 스킬을 로드하고 그에 따라 작업을 수행합니다.

스킬은 세 가지 카테고리로 분류됩니다:

Production (제작) — 무언가를 구축하기
discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations

System (시스템) — 구조 추출하기
design-system-extract · component-extract

Review (검토) — 감사 및 수정하기
accessibility-audit · ai-slop-check · hierarchy-rhythm-review · interaction-states-pass · polish-pass

스킬은 체인 (chain) 형태로 연결될 수 있습니다. 전형적인 그린필드 (greenfield) 흐름:

discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass

브랜드 인지 (brand-aware) 흐름:

design-system-extract → generate-variations → make-tweakable → polish-pass

플랫폼에 맞게 조정하기

이 프롬프트는 HTML 출력 디자인 환경 (Claude.ai의 디자인 도구와 유사함)을 가정합니다. 만약 대상 환경이 다르다면 — 예를 들어 Figma 플러그인, 코드 전용 어시스턴트, 채팅 전용 디자인 코치 등 — 워크플로 챕터 (workflow chapters)와 도구 참조 (tool references)를 조정해야 합니다. 원칙들 (5~16장)은 어떤 매체에도 적용 가능합니다.

모델 캘리브레이션 (Model calibration)

claude/ 변형 모델은 현재 Anthropic의 프론티어 모델 (Fable 5 및 Opus 4.7/4.8 계열)에 맞춰 캘리브레이션되었습니다. 이 모델들은 이전 세대보다 지시 사항을 더 문자 그대로 따르며, 덜 공격적인 프롬프팅 (prompting)을 필요로 합니다:

• 할당량(quotas) 대신 조건(conditions) 사용. "최소 N개의 질문을 하세요" 또는 "중요: 반드시 해야 함"과 같은 표현을 사용하지 않습니다. 현재 모델들은 할당량을 문자 그대로의 계약으로 취급하여 과도하게 반응하는 경향이 있습니다. 대신 프롬프트에는 행동해야 하는 조건을 명시하고, 사소한 결정에 대해서는 자율 조항(질문하는 대신 합리적인 옵션을 선택하고 이를 기록함)을 포함합니다.
• 기술(skills) 및 하위 에이전트(subagents)를 위한 명시적 트리거(triggers). 이 모델들은 기본적으로 선택적 기능들을 충분히 활용하지 못하는 경향이 있으므로, 모든 기술 설명에는 해당 기술을 언제 호출해야 하는지 명시하며, 검증자 위임(verifier delegation)에는 명시적인 트리거("모든 실질적인 시각적 변화 이후")를 포함합니다.
• 커버리지 우선 검토(Coverage-first reviews). 검토 에이전트(Review agents)는 모든 사항을 신뢰도/심각도 추정치와 함께 보고하며, 집계(aggregation) 단계에서 필터링하도록 합니다. 현재 모델들은 "중요한 문제만 보고하라"는 지시를 문자 그대로 따르며, 이로 인해 발견 사항이 조용히 억제되는 현상이 발생합니다.
• 하우스 스타일(House-style) 가드. 현재 모델들의 기본 미학(크림색 배경, 세리프 디스플레이 타입, 테라코타/앰버 액센트)은 ai-slop-check(규칙 9)에 의해 감지되며, frontend-aesthetic-direction의 4방향 프로토콜에 의해 선제적으로 방지됩니다. 이 모델들에는 샘플링 파라미터(temperature)가 더 이상 존재하지 않으므로, 시각적 다양성은 무작위성이 아닌 명시적인 변형별 사양(per-variation specs)을 통해 확보되어야 합니다.

이전 모델(Claude Opus/Sonnet 4.6 및 그 이전 버전, 또는 Anthropic 이외의 모델)에서는 더 차분한 어조가 트리거를 충분히 작동시키지 못할 수 있습니다. 모델이 질문 단계나 검토 단계를 건너뛰는 것이 보인다면 더 강력한 명령형 언어를 복구하여 사용하십시오. codex/ 변형은 별도로 유지 관리되며 이 노트의 영향을 받지 않습니다.

디자인 원칙, 요약

system-prompt.md의 20개 장은 다음 내용을 다룹니다:

#	장 (Chapter)
1	정체성 및 역할 (Identity and role)
...

기여하기 (Contributing)

이슈(Issues)와 PR(Pull Requests)을 환영합니다. 특히 유용한 기여는 다음과 같습니다:

• 추가적인 리뷰 기술 (예: 카피 리뷰 (copy review), 모션 리뷰 (motion review), 다크 모드 일치 여부 확인 (dark-mode parity check))
• 다른 환경에 맞게 조정된 프롬프트 (Figma, 코드 전용, 터미널 전용)
• 프롬프트가 방어해야 할 실제 실패 사례 (Real-world failure cases)
• 프롬프트의 타 언어 번역

운영 톤을 동일하게 유지하고 프롬프트를 비대하게 만들지 마세요. 프롬프트가 에이전트에게 요구하는 것과 동일한 기준을 적용하여, 모든 챕터는 그 자리에 있을 가치가 있어야 합니다.

라이선스 (License)

MIT — LICENSE를 참조하세요.

상업적 이용을 포함하여 어떠한 목적으로든 이 프롬프트와 기술 라이브러리를 사용, 수정 및 배포할 수 있습니다. 출처 표기는 필수가 아니지만, 해주신다면 감사하겠습니다.