디자인 방향 막막할 때, 경쟁사 분석하여 디자인 시스템을 설계해주는 스킬

1. 어떤 문제를 해결하나요?

새 프로젝트를 시작할 때 디자인 방향이 없어서 무작정 Dribbble을 뒤지거나, 팀마다 다른 색상과 폰트를 사용해 결국 UI가 제각각이 됩니다. design-consultation은 제품의 목적과 타깃을 파악하고 경쟁사 3곳을 리서치해 맞춤형 디자인 시스템을 제안합니다.

2. 이런 분들에게 추천합니다

• 신규 서비스의 디자인 방향을 잡아야 하는 PM·PO

• 디자인 시스템이 없어 UI 일관성에 어려움을 겪는 개발팀

• 디자이너 없이 디자인 가이드라인을 만들어야 하는 스타트업

3. 어떻게 사용하는 기어인가요?

제품 이름, 타깃 사용자, 원하는 브랜드 감성을 설명합니다. 스킬이 ① 제품 이해 → ② 경쟁사 3곳 리서치 → ③ 디자인 시스템 제안 → ④ 프리뷰 페이지 생성 → ⑤ DESIGN.md 작성 순서로 진행합니다.

4. 어떤 결과를 얻을 수 있나요?

• 제품 맞춤형 디자인 시스템 제안서 (근거 포함)

• 타이포그래피·색상·간격·모션·레이아웃 완전 정의

• 인터랙티브 폰트+색상 프리뷰 HTML 페이지

• 팀 공유용 DESIGN.md + 디자인 토큰 JSON

5. 포함된 구성

• design-consultation 스킬 소스 (SKILL.md)

• 경쟁사 3곳 리서치 워크플로우

• 디자인 시스템 전 영역 정의 (6개 영역)

• 폰트+색상 인터랙티브 프리뷰 생성 엔진

• DESIGN.md 자동 생성

6. 사용 AI 도구

Claude Sonnet 4 / Claude Opus 4 (Anthropic) + WebSearch (경쟁사 리서치)

7. 실제 활용 예시

• "B2B SaaS 신규 서비스 디자인 방향 잡아줘" → 경쟁사 분석 + 디자인 시스템 제안 + DESIGN.md 생성

• "우리 앱 폰트랑 색상 기준 문서화해줘" → 기존 스타일 분석 후 DESIGN.md + 프리뷰 페이지 제작

8. 출처, 원본 링크

27. design-consultation

• Author: garrytan

• Repository: garrytan/gstack

• GitHub: https://github.com/garrytan/gstack

• Skill file: https://github.com/garrytan/gstack/tree/main/design-consultation