claude-design-system-prompt 딥다이브
— "AI가 뽑는 뻔한 디자인(=AI 슬롭)"을 거부하도록 LLM을 조련하는 역공학 프롬프트

1프로젝트 한줄 요약

이 저장소가 대체 무엇인가.

claude-design-system-prompt은 LLM을 "의견이 뚜렷하고, 접근성을 챙기며, AI 슬롭에 저항하는 디자인 협업자"로 바꾸는 텍스트 문서 모음이다. README 첫 문장 그대로 옮기면 이렇다.

Reverse-engineered system prompt of Claude Design from Anthropic.
A system prompt and skill library that turns an LLM into an
opinionated, accessibility-aware, AI-slop-resistant design collaborator.

즉 "Anthropic의 Claude Design(디자인 도구)이 내부에서 쓰는 시스템 프롬프트를 뜯어 재현했다"고 저자가 주장하는 결과물이다. 저장소 안에는 실행 코드가 단 한 줄도 없다 — .md 파일 32개와 LICENSE가 전부다.

라이선스는 관대한 MIT(저작권자 Trystan Sarrade, 2026). 저장소의 최신이자 사실상 유일한 커밋은 2026-07-06이고, 커밋 메시지가 의미심장하다 — "Condense all 28 skills to reduce context usage (~30%)". 즉 이 프로젝트는 스스로를 "LLM의 컨텍스트(문맥 창)를 잡아먹지 않도록 토큰을 아끼는 것"까지 신경 쓰는 소프트웨어로 취급한다.

2왜 주목받는가

"AI에게 디자인 시키는 프롬프트"는 널렸다. 이건 뭐가 다른가.

① "AI 슬롭"을 이름 붙여 명시적으로 거부한다

대부분의 "디자인 어시스턴트" 프롬프트는 결국 어디서 본 듯한 SaaS 템플릿을 뽑는다. README는 그 전형적 산출물을 콕 집어 조롱한다 — aggressive gradients(요란한 그라디언트), emoji decoration(장식용 이모지), rounded-corner-with-left-border cards(둥근 모서리+왼쪽 컬러바 카드), Inter-everywhere typography(전부 Inter 폰트). 이 저장소는 이 패턴들을 완전한 디자인 철학으로 대체한다. 프롬프트 서두의 선언이 이 프로젝트의 정체성이다.

Generic AI aesthetics are a failure mode, not a default.
(뻔한 AI 미학은 '기본값'이 아니라 '실패 모드'다.)

② 접근성이 '기능'이 아니라 '바닥선'이다

프롬프트 10장 전체가 접근성이다. 그것도 구호가 아니라 실무 수치다 — 텍스트 대비비 4.5:1(큰 글씨 3:1), 터치 타깃 44×44px 이상, <div onclick> 대신 <button>, 그리고 "포커스 링을 절대 지우지 마라". 프롬프트는 outline: none을 대체 없이 쓰는 것을 "가장 흔한 접근성 실패"라 못박는다.

/* 프롬프트가 강제하는 포커스 표시 대체 예 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

③ 자기를 실행하는 모델의 '기본 취향'까지 저격한다 (메타 방어)

가장 영리한 부분이다. 이 프롬프트를 돌리는 최신 모델(Fable 5, Opus 4.7/4.8 계열)은 놔두면 특유의 기본 미감으로 수렴한다 — 크림색 배경 + 세리프 디스플레이 폰트 + 테라코타/앰버 강조. 예전의 "보라 그라디언트"가 그랬듯, 이게 오늘날의 뻔한 디폴트-템플릿 룩이라는 것. 스킬 ai-slop-check의 규칙 9는 바로 이 조합을 탐지하고, frontend-aesthetic-direction이 선제적으로 다른 방향을 강제한다. 프롬프트가 자기 실행 기반의 약점을 스스로 방어하는 셈이다.

④ 프롬프트를 '소프트웨어 아티팩트'로 다룬다

이 저장소가 트렌딩하는 더 깊은 이유는, 프롬프트 엔지니어링을 진짜 엔지니어링처럼 보여 주기 때문이다. Git 버전 관리, MIT 라이선스, PR(#3) 기반 협업, 그리고 "28개 스킬을 압축해 컨텍스트 30% 절감"이라는 리팩터링 커밋까지. "프롬프트도 유지보수하는 코드"라는 관점의 살아 있는 사례 연구다.

⑤ 같은 프롬프트를 두 실행 모델에 각색해 둔다

같은 철학을 claude/(Claude Code·Claude.ai용)와 codex/(OpenAI Codex용) 두 벌로 유지한다. 차이는 리뷰 방식이다 — Claude는 서브에이전트를 병렬로 띄워 4개 리뷰를 동시에, Codex는 서브에이전트가 없으니 같은 4개를 순차로 돈다. "동일 절차를 에이전트 아키텍처에 맞춰 어떻게 다시 쓰나"의 A/B 교재다.

3구성·형식 전체 지도

무엇으로 되어 있나 — 코드가 아니라 텍스트다. (실제 클론해서 확인)

보통 딥다이브라면 여기서 백엔드/프론트엔드/인프라 스택을 나열한다. 그런데 이 저장소엔 그런 게 없다. 실행 코드·빌드 도구·의존성이 전무하다. 대신 "무엇이 들어 있고, 어떤 형식이며, 무엇을 전제로 하는가"를 지도로 그려 보자.

형식 — 100% 마크다운, 그게 끝

산출 대상 매체 — 프롬프트가 강제하는 '요즘 웹 기술'

이 프롬프트가 LLM에게 뽑게 하는 결과물은 HTML/CSS/SVG/JS다. 그리고 구식 문법 대신 최신 표준을 쓰라고 못박는다.

전제하는 호스트 환경 — "이건 원래 어디서 돌던 프롬프트인가"

프롬프트 곳곳이 저장소엔 없는 도구들을 부른다 — copy_starter_component, design_canvas.jsx, deck_stage.js, questions_v2(네이티브 폼 렌더), __edit_mode_* postMessage 프로토콜, "verifier subagent". README도 이를 인정한다: "이 프롬프트는 Claude.ai의 디자인 도구와 비슷한 HTML-출력 디자인 환경을 전제한다." 다른 LLM에 붙일 땐 원칙(5~16장)은 이식되지만 도구 참조 부분은 조정이 필요하다는 뜻이다.

4아키텍처 심화 분석

프롬프트 20챕터의 뼈대 + 스킬 파이프라인이 어떻게 맞물리나.

전체 그림 — 프롬프트(상시 규칙) + 스킬(호출 절차)

핵심 설계 ① — 시스템 프롬프트 20챕터의 논리

647줄 프롬프트는 20개 챕터로 나뉜다. 관통하는 한 문장이 있다.

You are not a code generator who happens to make designs.
You are a designer who happens to use code.
(너는 어쩌다 디자인하는 코드 생성기가 아니라, 어쩌다 코드를 쓰는 디자이너다.)

핵심 설계 ② — oklch로 팔레트를 '수학처럼' 맞춘다

색 조화를 감이 아니라 규칙으로 만드는 대목이 특히 실용적이다. 명도·채도를 고정하고 색상(hue)만 돌리면 저절로 균형 잡힌 팔레트가 나온다.

/* 같은 명도(50%)·채도(0.15), 색상만 변주 → 자동 균형 */
--blue:   oklch(50% 0.15 250);
--teal:   oklch(50% 0.15 200);
--purple: oklch(50% 0.15 280);
/* 팔레트는 3~5색까지만. 그 이상은 혼돈 */

핵심 설계 ③ — 리뷰는 "커버리지 우선", 그리고 claude≠codex

리뷰 스킬들의 설계 철학이 프롬프트 엔지니어링 교훈의 핵심이다. LLM에게 "중요한 것만 보고해"라고 하면 스스로 검열해서 진짜 문제를 빠뜨린다. 그래서 이 저장소는 정반대로 지시한다.

Report every issue with confidence and severity.
Filtering happens at aggregation, not during discovery.
(모든 이슈를 확신도·심각도와 함께 보고하라. 걸러내는 건 '발견'이 아니라 '집계' 단계에서.)

그리고 같은 리뷰를 실행 모델에 맞춰 다르게 돌린다. accessibility-audit를 예로 보면:

polish-pass는 이 리뷰 4종을 한꺼번에 돌린 뒤 결과를 3단계로 분류한다 — ①Blockers(WCAG 미달·포커스 링 등, 전부 수정) → ②Quality(AI 슬롭·위계, 전부 수정) → ③Polish(스코프 내면 적용). 최종 판정은 "Ready to ship / Ready after review / Needs more iteration" 셋 중 하나.

5디렉토리 구조 해부

어디에 무엇이 있나 — 실제 트리 기준.

구조가 말해 주는 게 있다. 내용의 두 축은 claude/와 codex/이고, 둘의 관계는 "원본 vs 이식본"이다. 14개 스킬을 실제로 비교하면 10개는 다르고 4개는 완전히 동일하다(동일한 것: component-extract, design-system-extract, make-a-prototype, make-tweakable). 다른 것들은 전부 "서브에이전트 병렬 → 순차 패스" 각색 때문이다.

읽는 순서 추천

6학습 포인트 (주제별)

이 레포로 무엇을, 어떻게 배울 수 있나.

① 프롬프트 = 소프트웨어 (버전 관리·리팩터링·토큰 예산)

이 저장소의 커밋 하나가 교훈이다 — "28개 스킬을 압축해 컨텍스트 30% 절감". 프롬프트도 길면 비용(토큰)이고 성능 저하라는 것, 그래서 리팩터링 대상이라는 것. Git 히스토리·PR·라이선스로 "프롬프트를 코드처럼 관리하는" 실물을 본다.

② 접근성 체크리스트 — 이 파일 하나로 실무가 된다

프롬프트 10장은 그 자체로 완성도 높은 WCAG 실무 가이드다. 대비비 수치, 시맨틱 HTML 규칙, 키보드/포커스, prefers-reduced-motion, 색맹 대비(색+2차 신호), 구체적 폼 에러 문구까지. 디자인을 안 하는 개발자도 이 장만 떼어 체크리스트로 쓸 수 있다.

③ 색·타이포·위계의 '언어화된 원칙'

"예쁘게"를 판단 가능한 규칙으로 바꾸는 훈련이 된다 — 위계 신호 6종(크기·색·무게·위치·밀도·결합), 간격 4/8px 스케일, 팔레트 3~5색 상한, oklch() 조화, "3개 반복 + 4번째 전략적 파괴 = 리듬". 디자인 감각을 말로 설명하는 어휘를 얻는다.

④ "AI 슬롭"을 알아보는 안목

ai-slop-check의 9규칙은 그대로 비평 훈련이다. 그라디언트·이모지·둥근+왼쪽바 카드·Inter 남발·손그림 SVG·근거 없는 통계 — 왜 이것들이 "뻔함"의 신호인지, 무엇으로 대체해야 하는지를 배우면, 남이 만든(그리고 내가 만든) 화면의 약점이 보이기 시작한다.

⑤ 모델 세대별 프롬프트 튜닝 이론

README의 "모델 캘리브레이션" 절은 프롬프트 작성자에게 직접적인 교훈이다. 현세대 모델은 "최소 5개 질문" 같은 쿼터를 문자 그대로 계약처럼 취급해 과잉 발동하고, 옵션 능력(서브에이전트 등)은 기본으론 덜 쓴다. 그래서 강한 명령형("CRITICAL: YOU MUST") 대신 조건 + 자율 조항 + 명시적 트리거로 바꿨다는 것. 구세대·타사 모델에선 반대로 강한 명령형이 필요하다고 한다.

⑥ 리뷰 파이프라인·에이전트 아키텍처

"커버리지 우선(모든 이슈 보고, 필터는 집계에서)"과 "병렬 서브에이전트 vs 단일 순차 루프"는 검증 파이프라인 설계에 그대로 이식할 수 있는 패턴이다. LLM 기반 자동 리뷰/QA를 만들 때 바로 참고가 된다.

7실행 환경·전제 조건

(하드웨어 요구사항 대신) 어떤 환경에서 이 프롬프트가 제대로 도나.

실행 코드가 없으니 GPU·메모리 같은 하드웨어 요구사항은 없다. 필요한 건 텍스트 파일 + LLM뿐이다. 대신 이 프롬프트는 어떤 모델·어떤 도구 환경에서 쓰느냐에 따라 효과가 크게 갈린다. 그게 사실상의 "요구사항"이다.

8직접 해볼 수 있는 실습 과제

난이도별로. 텍스트 프로젝트라 진입장벽이 낮다 — 바로 손대 보자.

9관련 기술 심화 학습 로드맵

이 레포를 축으로 4주 커리큘럼.

10핵심 키워드 사전

문서에 나온 용어를 한 번에.

11참고 링크

더 파고들 곳.