디자인 스타일 스킬

디자인 스타일 스킬은(는) 무엇을 하나요?

목적

이 스킬은 Claude Code가 아름답고 독특한 프론트엔드 인터페이스를 만들 수 있도록 prompts/ 디렉토리에서 설계 시스템 프롬프트를 자동으로 검색합니다. 일반적인 UI를 생성하는 대신, Neo-brutalism, Modern Dark, Luxury, Cyberpunk 등과 같은 특정 디자인 미학을 가진 인터페이스를 구축할 수 있습니다.

사용 시기

이 스킬은 다음과 같은 경우 자동으로 실행됩니다:

• 사용자가 웹 페이지, 랜딩 페이지 또는 웹 애플리케이션 구축을 요청할 때
• 사용자가 특정 디자인 스타일의 UI 컴포넌트를 요청할 때
• 사용자가 프론트엔드, React, Vue 또는 웹 개발을 언급할 때
• 사용자가 특정 미학을 요청할 때 (예: "모던하고 다크하게 보이게" 또는 "브루탈리스트 스타일 사용")

사용 가능한 디자인 스타일

prompts/ 디렉토리에는 다음 설계 시스템이 있습니다:

• Academia - 학술적, 고전적, 정제됨
• ArtDeco - 호화로운 1920년대 글래머
• Bauhaus - 기능주의적, 기하학적 미니멀리즘
• BoldTypography - 타이포그래피 중심 디자인
• Botanical - 자연에서 영감을 받은 유기적 디자인
• Claymorphism - 부드럽고 점토 같은 3D 요소
• Cyberpunk - 미래지향적, 네온, 하이테크
• Enterprise - 전문적, 기업적, 확장 가능
• FlatDesign - 깔끔하고 미니멀한 2D 디자인
• Fluent2 - Microsoft Fluent 2 디자인 시스템
• HumanistLiterary - 따뜻하고 문학적인 대화형 디자인 (Claude 미학)
• Industrial - 투박하고 기계적인 실용적 디자인
• Kinetic - 역동적, 모션 중심
• Luxury - 프리미엄, 우아함, 세련됨
• Material - Google Material Design
• Maximalism - 대담하고 표현적이며 풍부한 디자인
• MinimalDrak - 미니멀 다크 테마 (원본 오타 유지)
• ModernDark - 깊이감 있는 현대적 다크 UI
• Monochrome - 흑백, 고대비
• Neo-brutalism - 대담하고 투박하며 화려한 브루탈리즘
• Neumorphism - 부드러운 UI, 스큐어모픽
• Newsprint - 신문에서 영감을 받은 디자인
• Organic - 자연스럽고 유기적인 형태
• PlayfulGeometric - 재미있는 기하학적 모양
• Professional - 깔끔하고 비즈니스 중심
• Retro - 빈티지, 향수
• Saas - 현대적인 SaaS 미학
• Sketch - 손으로 그린 듯한 예술적 디자인
• Swiss - 국제 타이포그래피 스타일
• TerminalCLI - 명령줄 인터페이스 미학
• Vaporwave - 80년대/90년대 미학, 향수
• Web3 - 탈중앙화, 암호화폐에서 영감을 받음

작동 방식

1단계: 사용자 의도 파악

사용자가 프론트엔드 작업을 요청하면 다음을 결정합니다:

1. 기술 스택 - 어떤 프레임워크를 사용 중인가? (React, Vue, Next.js 등)
2. 디자인 선호도 - 특정 스타일이나 미학을 언급했는가?
3. 컴포넌트 범위 - 단일 컴포넌트, 전체 페이지, 또는 전체 애플리케이션?

2단계: 디자인 스타일 선택

사용자가 스타일을 지정한 경우:

• 요청을 사용 가능한 스타일과 매핑 (예: "brutalist" → Neo-brutalism)
• 대소문자 구분 없이 매핑 (brutalism, Brutalism, BRUTALISM 모두 작동)

사용자가 지정하지 않은 경우:

• 현대적이고 전문적인 프로젝트 → ModernDark 또는 Professional
• 창의적이고 대담한 프로젝트 → Neo-brutalism 또는 BoldTypography
• 미니멀하고 깔끔한 프로젝트 → FlatDesign 또는 Swiss
• 엔터프라이즈/기업 → Enterprise

어떤 스타일이 적합한지 확실하지 않으면 사용자에게 물어보세요.

3단계: 설계 시스템 검색

Read 도구를 사용하여 적절한 프롬프트 파일을 로드합니다:

Read: prompts/<StyleName>.md

예시:

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

4단계: 설계 시스템 적용

설계 시스템 프롬프트를 로드한 후:

1. 디자인 철학 내면화 - 핵심 원칙, 시각적 특징, 차별화 요소를 이해합니다.
2. 디자인 토큰 추출 - 색상, 타이포그래피, 간격, 그림자, 테두리
3. 컴포넌트 패턴 따르기 - 지정된 버튼 스타일, 카드 레이아웃 등을 사용합니다.
4. "대담함 요소" 적용 - 디자인을 진정성 있게 만드는 시그니처 요소를 구현합니다.
5. 안티 패턴 피하기 - 미학을 무너뜨리는 기술을 사용하지 마세요.

5단계: 컨텍스트에 맞게 구축

코드를 작성하기 전:

• 사용자의 기존 기술 스택 식별
• 컴포넌트 아키텍처 이해
• 제약 조건 파악 (CSS 프레임워크, 디자인 라이브러리 등)

코드를 작성할 때:

• 기존 패턴 및 규칙과 일치시킵니다.
• CSS 변수 또는 설정 파일에 디자인 토큰을 중앙화합니다.
• 재사용 가능하고 합성 가능한 컴포넌트를 만듭니다.
• 아키텍처 선택을 간략하게 설명합니다.

품질 기준:

• 접근성을 유지하거나 개선합니다.
• 모든 기기에서 반응형 디자인을 보장합니다.
• 의도적이고 창의적인 디자인 선택을 합니다 (일반적인 보일러플레이트가 아닌).
• 코드베이스를 발견했을 때보다 더 깔끔하게 만듭니다.

예시

예시 1: 사용자가 스타일 지정

사용자: "내 SaaS 제품의 랜딩 페이지를 네오-브루탈리스트 디자인으로 만들어 줘."

스킬 작업:

1. 키워드 감지: "랜딩 페이지", "네오-브루탈리스트"
2. "네오-브루탈리스트" → prompts/Neo-brutalism.md 매핑
3. 설계 시스템 프롬프트 읽기
4. 명확한 질문: "어떤 기술 스택을 사용 중이신가요? React, Vue, 또는 일반 HTML/CSS?"
5. Neo-brutalism 원칙을 따라 랜딩 페이지 구축 (두꺼운 테두리, 하드 섀도우, 대담한 색상 등)

예시 2: 사용자가 스타일을 지정하지 않음

사용자: "포트폴리오 웹사이트를 만드는 걸 도와줘."

스킬 작업:

1. 감지: "포트폴리오 웹사이트" (창의적인 컨텍스트)
2. 옵션 제안: "특정 디자인 스타일을 원하시나요? Modern Dark(세련됨), Neo-brutalism(대담하고 창의적), Swiss(미니멀하고 깔끔함)로 만들 수 있습니다."
3. 사용자가 선호도를 응답
4. 적절한 프롬프트 로드 및 구축

예시 3: 컴포넌트 요청

사용자: "내 Next.js 앱에 문의 양식을 추가해 줘. 모던하고 프로페셔널하게 보이게 해줘."

스킬 작업:

1. 키워드: "Next.js", "모던하고 프로페셔널한"
2. 선택: ModernDark.md (모던) 또는 Professional.md (프로페셔널)
3. 설계 시스템 읽기
4. Next.js 패턴에 맞는 양식 컴포넌트 구축
5. 프롬프트의 디자인 토큰 사용 (색상, 타이포그래피, 그림자 등)

빠른 참조 명령어

구현할 때 특정 섹션을 빠르게 참조할 수 있습니다:

색상:

Grep: pattern "토큰|값|사용법" path "prompts/<Style>.md"

타이포그래피:

Grep: pattern "폰트|두께|크기" path "prompts/<Style>.md"

컴포넌트 패턴:

Grep: pattern "버튼|카드|입력" path "prompts/<Style>.md"

최상의 결과를 위한 팁

1. 전체 프롬프트를 읽으세요 - 그냥 훑어보지 마세요. 디자인 철학과 차별화 섹션이 중요합니다.
2. 시그니처 요소를 구현하세요 - 모든 설계 시스템에는 "대담함 요소" 섹션이 있습니다. 이 요소가 디자인을 진정성 있게 만듭니다.
3. 안티 패턴을 피하세요 - 각 프롬프트는 하지 말아야 할 것을 나열합니다. 이 규칙을 엄격히 따르세요.
4. 질문하세요 - 사용자의 요구 사항이 불분명하면 구축하기 전에 물어보세요.
5. 기존 코드와 일치시키세요 - 기술 스택과 싸우지 마세요. 설계 시스템을 기존 패턴에 통합하세요.

참고 사항

• 모든 설계 시스템 프롬프트는 동일한 구조를 따릅니다: <role> 및 <design-system> 섹션
• 프롬프트에는 상세한 색상 팔레트, 타이포그래피 스케일, 컴포넌트 패턴 및 구현 예시가 포함됩니다.
• 각 스타일은 프로덕션 준비가 완료되었으며 시각적 독창성을 위해 신중하게 제작되었습니다.
• 프롬프트는 일반적이고 AI처럼 보이는 인터페이스를 방지하도록 설계되었습니다.

향후 개선 사항

이 스킬의 잠재적 개선 사항:

• 스타일 조합 지원 (예: "Cyberpunk + Minimal")
• 사용자 정의 스타일 생성 워크플로우
• 디자인 토큰을 JSON/CSS로 추출
• 프롬프트에서 컴포넌트 라이브러리 생성