Claude Design System Prompt

개요

Claude Design System Prompt는 LLM을 디자인 협업 도구로 전환하는 오픈 소스 시스템 프롬프트와 스킬 라이브러리입니다. 이 프롬프트는 일반적인 SaaS 템플릿 디자인에서 벗어나 콘텐츠 규율, 미학적 규율, 시각적 계층 구조, 접근성, 상호작용, 시스템 사고 등을 포함하는 포괄적인 디자인 철학을 제시합니다.

주요 내용

• 디자인 철학: 이 프롬프트는 콘텐츠의 불필요한 요소를 제거하고(content discipline), AI 트로프(AI tropes)를 피하며(aesthetic discipline), 시각적 계층 구조와 리듬을 확립하고(visual hierarchy and rhythm), WCAG를 준수하는 접근성을 고려하며(accessibility), 다양한 상호작용 상태(interaction and feedback)를 처리하고, 컴포넌트 중심의 시스템 사고(system thinking)를 지향하며, 실제 CSS Grid, oklch(), text-wrap: pretty 등 표준 기술을 존중하고(respecting the medium), 양보다 질을 추구합니다(quality over quantity).
• 스킬 라이브러리: 14가지 절차적 스킬이 포함되어 있으며, 이는 프로덕션(생산), 추출(extraction), 검토(review) 작업에 활용될 수 있습니다. 스킬은 discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations, design-system-extract, component-extract, accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass로 구성됩니다.
• 사용법: Claude, GPT, Gemini, 로컬 모델 등 시스템 프롬프트를 지원하는 LLM에 system-prompt.md 파일의 내용을 시스템 프롬프트로 입력하고, 필요에 따라 스킬을 호출하여 사용할 수 있습니다. 스킬은 사용자 요청에 따라 자동으로 트리거되거나 명시적으로 호출될 수 있습니다.
• 다양한 모델 지원: Claude.ai 환경을 위한 claude/ 변형과 OpenAI Codex를 위한 codex/ 변형이 제공됩니다. 각 변형은 대상 모델의 특성에 맞게 조정되었습니다.
• 확장 및 기여: 이 프롬프트는 HTML 출력 디자인 환경을 가정하지만, 다른 환경(Figma 플러그인, 코드 전용 어시스턴트 등)에 맞게 조정될 수 있습니다. 추가 검토 스킬, 다른 환경용 프롬프트 적응, 번역 등의 기여를 환영합니다.

시사점

Claude Design System Prompt는 LLM을 단순히 콘텐츠 생성 도구를 넘어, 명확한 디자인 원칙을 준수하고 실질적인 디자인 작업을 수행하는 협업 파트너로 활용할 수 있는 가능성을 제시합니다. 이는 디자인 생산성을 향상시키고 일관성 있고 접근 가능한 UI/UX를 구축하는 데 기여할 수 있습니다.