gstack 디자인 가이드 — Impeccable과 DESIGN.md로 AI 디자인 시스템 자동화

gstack의 디자인 단계에서 쓰는 도구로 제품 분석부터 유사 제품 리서치, 완전한 디자인 시스템 제안까지 자동화하는 방법을 정리했습니다. 결과물로 DESIGN.md를 생성해 프로젝트의 디자인 소스 오브 트루스로 사용하고, AI가 만드는 뻔한 UI를 피하는 Impeccable 스킬과 함께 쓰는 워크플로우까지 다룹니다.

 

/design-consultation — 디자인 시스템 구축

무엇을 하는가

제품을 분석하고, 유사 제품을 리서치한 후, 완전한 디자인 시스템을 제안합니다.
결과물로 DESIGN.md를 생성해서 프로젝트의 디자인 소스 오브 트루스로 사용합니다.

산출물

• 전체 디자인 시스템 제안
  • 미적 방향 (aesthetic direction)
  • 타이포그래피 시스템
  • 컬러 팔레트
  • 레이아웃 & 스페이싱 규칙
  • 모션 원칙
• 폰트 + 컬러 프리뷰 페이지 (HTML 파일)
• DESIGN.md — 디자인 결정사항 문서

사용법

/design-consultation

Claude가 제품의 성격, 타겟 유저, 브랜드 방향을 먼저 물어봅니다.

또는 먼저 설명합니다.

/design-consultation 개발자를 위한 SaaS 대시보드야. 신뢰감 있고 깔끔한 느낌.

꿀팁

• 경쟁 제품이나 레퍼런스 디자인을 함께 언급하면 방향 잡기 쉬습니다
• 생성된 DESIGN.md를 CLAUDE.md에서 @DESIGN.md로 참조하면 이후 UI 작업에 자동 적용됩니다
• /browse로 레퍼런스 사이트를 함께 열어두면 더 정확한 결과를 얻을 수 있습니다

 

/design-review — 라이브 사이트 디자인 감사

무엇을 하는가

실행 중인 웹사이트를 헤드리스 브라우저로 열어서 시각적 문제를 발견하고 코드를 직접 수정합니다.

발견 → 수정 → 재검증을 반복하며 각 수정을 원자적으로 커밋합니다.

발견하는 문제

• 시각적 불일관성 (색상, 폰트, 간격이 제멋대로)
• 스페이싱 문제 (padding/margin 불균형)
• 계층 구조 문제 (시각적 강조가 잘못된 곳에 있음)
• AI slop 패턴 (AI가 생성한 것처럼 보이는 어색한 UI)
• 느린 인터랙션 (버튼 반응, 전환 애니메이션)

사용법

/design-review

개발 서버가 실행 중이어야 합니다. URL을 자동으로 감지하거나 직접 지정할 수 있습니다.

/design-review http://localhost:3000

사전 준비

1. 개발 서버 실행: pnpm dev (또는 npm run dev)
2. /design-review 실행
3. Claude가 스크린샷 찍고 문제 목록 제시
4. 각 수정 전후 스크린샷으로 비교

꿀팁

• 수정 전후 스크린샷이 자동으로 저장됩니다 → diff로 비교 가능합니다
• "이 페이지만 봐줘"처럼 범위 지정이 가능합니다. /design-review http://localhost:3000/dashboard
• 인증이 필요한 페이지는 먼저 /setup-browser-cookies로 쿠키를 세팅합니다
• /plan-design-review(플랜 검토)와 /design-review(라이브 감사)는 다른 명령어입니다

 

/plan-design-review — 플랜 단계 디자인 검토

무엇을 하는가

작성된 플랜에서 디자인 관련 항목을 0~10점으로 채점하고, 10점이 되려면 뭐가 필요한지 설명한 후 플랜을 업데이트합니다.

사용법

/plan-design-review

plan.md가 있으면 자동으로 읽습니다.

차이점 정리

명령어	대상	출력
/plan-design-review	플랜 문서	플랜 수정
/design-review	라이브 사이트	코드 수정 + 스크린샷
/design-consultation	없음 (처음 시작)	DESIGN.md 생성

 

디자인 워크플로우 예시

새 프로젝트 디자인 시스템 구축

1. /design-consultation    → DESIGN.md 생성
2. CLAUDE.md에 @DESIGN.md 추가
3. 개발
4. /design-review          → 구현된 UI 감사 + 수정

기존 프로젝트 디자인 개선

1. /design-review          → 현재 문제 파악 + 자동 수정
2. /design-consultation    → 더 나은 디자인 시스템 정립
3. DESIGN.md을 기준으로 정비

새 기능 추가 시

1. /plan-design-review     → 플랜 단계에서 UX 방향 확인
2. 구현
3. /design-review          → 구현 결과 시각적 검증

 

DESIGN.md 활용법

/design-consultation으로 생성한 DESIGN.md를 CLAUDE.md에 연결합니다.

## 디자인 시스템

@DESIGN.md 참고. 모든 UI 작업은 이 문서의 컬러, 타이포그래피, 스페이싱 규칙을 따를 것.

이후 Claude가 UI 코드를 작성할 때 자동으로 디자인 시스템을 참조합니다다.

 

출처

gstack GitHub — Garry Tan (Y Combinator CEO)

GitHub - garrytan/gstack: Use Garry Tan's exact Claude Code setup: 15 opinionated tools that serve as CEO, Designer, Eng Manager

 

자주 묻는 질문

Q. DESIGN.md는 한 번 만들면 끝인가요?
A. 아니요, 살아있는 문서로 다뤄야 합니다. 디자인 시스템 변경(브랜드 컬러 변경·폰트 교체 등)이 있을 때마다 갱신해야 다음 작업에서 일관성이 유지됩니다.

 

Q. Impeccable과 일반 gstack 디자인 도구의 차이는?
A. 일반 gstack 디자인 도구는 빠른 시안 생성에 강하고, Impeccable은 타이포그래피·컬러·여백 같은 세부 디테일을 검토해 "AI 슬롭" 패턴을 잡아냅니다. 둘을 조합하면 시간 절약 + 품질 둘 다 잡을 수 있습니다.

 

Q. 비디자이너도 쓸 수 있나요?
A. 네, 오히려 비디자이너가 더 효과 큽니다. "이게 디자인적으로 괜찮은지" 판단을 AI가 대신 해주므로 1인 개발자·백엔드 개발자가 프론트 작업할 때 특히 유용합니다.

 

Q. Figma 같은 디자인 툴이 필요한가요?
A. 필수는 아닙니다. 코드 단계에서 바로 작업하면 Figma 없이도 가능. 다만 Figma 디자인을 입력으로 주면 더 정확한 결과가 나옵니다.

 

Q. 다른 프로젝트에서 DESIGN.md를 재사용할 수 있나요?
A. 가능합니다. 회사 내 여러 프로젝트가 같은 브랜드 시스템을 공유한다면 마스터 DESIGN.md를 만들고 각 프로젝트에서 import하는 방식 권장.