TL;DR

이 레포는 Anthropic의 Claude 디자인 철학을 역공학해 20개 장으로 구성된 시스템 프롬프트와 14개의 절차형 스킬을 제공해 LLM을 일관되고 접근성 중심의 디자인 협업자로 전환한다. 시스템 프롬프트는 콘텐츠·미학·계층·타이포·색상·접근성·상호작용 상태 등 구체적 규칙을 명시하고, 스킬은 착수 질문부터 폴리시 검토까지 단계별로 호출 가능한 절차를 담아 재현성과 품질 보증을 확보한다. Anthropic 모델용 보정 메모와 Codex 변형을 포함해 다양한 실행 환경에 맞춰 조정할 수 있으며 HTML 출력 환경을 전제로 설계되어 플랫폼에 따라 워크플로 문구를 일부 수정해야 한다.

주요 기능

• 시스템 프롬프트 20개 장으로 디자인 역할·워크플로·출력 원칙을 규정해 모델의 일관된 판단을 유도한다. 이 프롬프트는 콘텐츠·미학·계층·타이포·색상·접근성·상태·시스템 사고 등 구체적 규칙을 모두 포함해 수작업 조정 없이도 일정한 산출물을 얻을 수 있게 한다. 프롬프트를 그대로 붙여 사용하는 방식은 다양한 LLM으로 재현 가능하다.
• 14개의 절차형 스킬이 트리거 이름으로 구성되어 사용자의 요구에 맞춰 단계별 작업을 수행한다. 각 스킬은 탐색 질문, 와이어프레임 생성, 디자인 시스템 추출, 접근성 감사 등 명확한 트리거와 단계가 있어 병렬 또는 연속 체인으로 결합할 수 있다. 스킬 설계는 작업의 재현성과 검토 루프를 확보하는 데 초점을 두었다.
• 접근성·상호작용·폴리시 검증을 포함해 산출물의 품질을 체계적으로 검증한다. 접근성 감사는 WCAG·시맨틱 HTML·키보드 내비게이션·포커스 링·모션 선호를 확인하고, 상호작용 상태 점검은 hover/active/disabled/focus/loading 상태에 대한 명세를 요구한다. 폴리시 단계는 최종 게이트로서 일관성·품질·IP 경계를 점검한다.
• 플랫폼별 변형을 제공해 Anthropic 계열 모델과 Codex 스타일 둘 다에 맞춰 조절할 수 있다. Claude 변형은 최신 Fable/Opus 계열의 행동 특성을 반영해 조건 중심 트리거와 검증 위임을 포함하고, Codex 변형은 단일 루프·순차 검토 방식으로 조정된다. 이로 인해 사용자 환경에 따라 프롬프트 문체와 실행 흐름을 맞출 수 있다.

어떻게 동작하는가

시스템 프롬프트가 20개 장으로 디자인 철학과 행동 규칙을 정의하고, 사용자의 요청이 특정 패턴과 일치하면 해당 이름의 스킬이 로드되어 절차를 단계별로 수행한다. 스킬 내부에는 착수 질문·산출물 규격·검증 조건이 명시되어 있어 스킬 체인으로 연결하면 초기 탐색부터 폴리시 검토까지 자동화된 흐름이 만들어진다. Anthropic 변형은 모델별 동작 특성을 보정하기 위한 조건 중심 트리거와 검증 위임 규칙을 포함해 실전 모델에서의 재현율을 높였다.

해결 문제

기존 디자인 어시스턴트가 AI 트로프에 의존해 범용적이고 평면적인 결과를 내던 문제를 해결한다. 레포의 시스템 프롬프트는 구체적 미학 원칙과 콘텐츠·계층·접근성 기준을 결합해 의도적이고 일관된 디자인 출력을 유도한다. 절차형 스킬은 착수 질문에서 폴리시 검토까지 표준화된 작업 흐름을 제공해 품질 보증과 재현성을 확보한다.

지금 주목받는 이유

Anthropic의 디자인 철학을 실무형 절차 스킬로 풀어낸 점과 Claude 계열 모델의 행동 특성을 반영한 보정 메모가 결합되어 실무 적용 가능성이 높아 관심을 받고 있다.

차별점

• Claude Design의 역공학을 통해 원저자의 설계 철학을 재현한 20장 분량의 시스템 프롬프트가 포함되어 있어 단순한 스타일 가이드가 아니라 행동 규칙과 검증 조건까지 함께 제공한다. 이 프롬프트는 일반적인 'AI 트로프'를 의도적으로 배제하고 팔레트·타이포·상호작용 상태 등 세부 규칙을 명시해 모델 출력의 일관성을 유지한다. 따라서 단순 명령보다 더 깊은 설계 규약을 LLM에 주입할 수 있다.
• 절차형 스킬이 14개로 분류되어 각 작업을 트리거 이름으로 호출할 수 있으며 스킬 간 체인화가 설계되어 있다. 이 구조는 단일 명령형 접근보다 반복 가능하고 검증 가능한 작업 파이프라인을 제공해 대형 프로젝트에서의 단계별 산출 관리가 수월해진다. 또한 스킬에는 접근성·AI 트로프 감지·상호작용 상태 검증처럼 실무에서 자주 누락되는 검사 항목들이 포함되어 있다.
• Anthropic 계열 모델(Fable·Opus 계열)을 위한 보정 메모와 OpenAI Codex 변형을 모두 제공해 다양한 실행 환경에서 동작 특성을 맞출 수 있다. 보정 노트는 조건 기반 트리거와 권한 위임 방식으로 모델의 과잉·과소 동작을 조정하도록 설계되어 실제 운영에서 재현성을 높인다. 플랫폼별 조정 가이드는 HTML 출력·Figma 플러그인 등 대상 환경에 맞춰 프롬프트와 워크플로를 조정하도록 안내한다.

사용 사례

• 완전한 신규 브랜드 디자인에서 착수 질문으로 요구사항을 수집하고 프론트엔드 미적 방향을 정한 뒤 와이어프레임과 인터랙티브 프로토타입을 순차 생성해 초기 설계 안을 빠르게 확보하는 흐름이다. 이 흐름에서 스킬 체인은 반복 가능한 산출물 규격과 폴리시 검토를 내장해 디자이너와 협업하는 에이전트로 기능한다. 프로토타입 이후 폴리시 단계에서 최종 품질 점검을 수행할 수 있다.
• 기존 브랜드가 있는 경우 디자인 시스템 추출 스킬로 토큰과 컴포넌트를 뽑아내고 그 결과를 바탕으로 고충실 변형을 생성한 뒤 조정 패널을 제공해 빠르게 브랜드 일관성을 반영한 변형을 만든다. 이 흐름은 레거시 스타일을 시스템화하고 재사용 가능한 컴포넌트를 확보하는 데 유리하다. 마지막으로 폴리시 검토로 접근성·IP 경계를 확인한다.
• 접근성 감사나 상호작용 상태 검증 같은 리뷰 작업에서 자동화된 체크리스트를 실행해 WCAG 준수 여부와 포커스·키보드 내비게이션·모션 선호 설정 등을 점검하는 절차다. 리뷰 스킬은 검출 결과에 대해 신뢰도와 심각도를 표기하고 이후 단계에서 집계·필터링하도록 설계되어 반복 리뷰의 효율을 높인다. AI 트로프 감지 스킬은 과도한 그래디언트·이모지·폰트 남용을 찾아내 디자인 일관성을 유지한다.

시작하기

system-prompt.md의 내용을 지원하는 LLM의 시스템 프롬프트에 붙여넣으면 바로 사용을 시작할 수 있다. 특정 작업에서는 skills/ 디렉터리에 있는 해당 스킬 이름을 트리거로 호출하면 단계별 절차가 로드되며, 필요하면 Claude 변형 또는 Codex 변형 중 환경에 맞는 변형을 선택해 사용하면 된다. 대상 플랫폼이 HTML 출력이 아닌 경우 README에 적힌 워크플로 장을 참조해 출력·검증 절차와 도구 참조를 수동으로 조정해야 한다.

요구사항

• 시스템 프롬프트를 수용하는 LLM 또는 호스팅 플랫폼이 필요하며, README는 Claude.ai·GPT·로컬 모델 등 여러 유형을 예시로 든다.
• 원활한 출력과 일부 스킬의 상호작용을 위해 HTML 출력 환경을 전제로 설계되어 있으므로 HTML 기반 프로토타이핑 도구나 코드 출력 뷰어가 있으면 최적의 결과를 얻을 수 있다.
• Anthropic 계열 모델을 쓸 경우 Fable·Opus 계열의 동작 특성에 맞춘 보정 메모를 적용하는 것이 권장되며, Codex 변형은 단일 루프 검토 환경에 적합하다.