역설계된 슬롭 없는 AI UI 에이전트를 위한 Claude 디자인 시스템 프롬프트

대부분의 '디자인 어시스턴트' 프롬프트는 공격적인 그라데이션, 이모지 장식, 둥근 모서리 카드, 모든 곳에 Inter 서체 등 일반적인 SaaS 템플릿을 생성합니다. Trystan-SA의 Claude Design System Prompt는 이러한 패턴을 명시적으로 거부합니다. 이는 LLM을 의견이 확고하고 접근성을 고려하며 AI 슬롭에 강한 디자인 협업자로 바꾸는 역설계된 시스템 프롬프트(MIT 라이선스)입니다.

포함 내용

• claude/system-prompt.md — 콘텐츠 규율, 미학적 규율, 시각적 계층, WCAG 접근성, 상호작용 상태, 시스템 사고(컴포넌트 + 토큰), 그리고 매체 존중(진짜 CSS Grid, oklch(), text-wrap: pretty)을 다루는 20개 챕터.
• claude/skills/ — 프로덕션(발견 질문, 프론트엔드 미학 방향, 와이어프레임, 덱 만들기, 프로토타입 만들기, 조정 가능하게 만들기, 변형 생성), 시스템(디자인 시스템 추출, 컴포넌트 추출), 리뷰(접근성 감사, AI 슬롭 점검, 계층 리듬 리뷰, 상호작용 상태 통과, 다듬기 통과)로 그룹화된 14개의 호출 가능한 절차.
• codex/ — OpenAI Codex용으로 조정된 변형(단일 루프, 하위 에이전트 없음).

사용 방법

system-prompt.md의 내용을 임의의 LLM(Claude, GPT, Gemini, 로컬 모델)의 시스템 프롬프트로 붙여넣으세요. 에이전트는 디자인 철학을 따르며 작업이 일치할 때 스킬을 이름으로 참조합니다. 스킬은 체이닝될 수 있습니다. 일반적인 그린필드 흐름: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. 브랜드 인식 흐름: design-system-extract → generate-variations → make-tweakable → polish-pass.

디자인 원칙

프롬프트는 콘텐츠 규율(불필요한 내용 없음, 모든 요소가 자리를 차지), 미학적 규율(AI 클리셰 회피, 팔레트와 톤에 충실), 시각적 계층과 리듬(크기, 색상, 두께, 위치, 밀도, 간격 척도), 접근성(WCAG, 시맨틱 HTML, 키보드 탐색, 포커스 링, 모션 선호), 상호작용 피드백(호버, 활성, 비활성, 포커스, 로딩, 유효성 검사 상태), 시스템 사고(일회성 페이지 대신 컴포넌트와 토큰)를 강제합니다.

대상 사용자

일반적인 SaaS 클리셰 없이 의견이 확고하고 접근성 있는 디자인 출력을 원하는, AI 코딩 에이전트를 사용하는 개발자.