# 디자인 리뷰 (design-review)

> 디자이너의 눈으로 실제 사이트의 시각적 불일치, 간격, 계층, AI 티, 느린 인터랙션을 찾아 하나씩 고치고 재검증합니다.

- 카테고리: [UI·인터랙션](https://www.myskills.tools/ko/categories/ui-interaction/)
- 출처: 커뮤니티 · Garry Tan
- 저장소: https://github.com/garrytan/gstack/tree/main/design-review (commit ed10791 · v2.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/design-review/SKILL.md
- 설치 명령: `npx skills add garrytan/gstack --skill design-review`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex, Cursor, Copilot
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✓
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.
- ⚠ 수정마다 git 커밋을 하며(시작 전 커밋하지 않은 변경을 커밋하거나 stash 할 수 있음), 로그인된 브라우저 세션으로 사이트를 조작합니다.

## 핵심 규칙

발견마다 최소한으로 고쳐 각각 커밋하고, 회귀가 생기면 되돌립니다.

## 실행 단계

1. **준비** — 대상 URL 을 정하고(기능 브랜치에 URL 이 없으면 diff 기준), DESIGN.md 나 코드의 디자인 토큰을 읽으며 git 작업 트리가 깨끗한지 확인합니다.
2. **디자인 감사** — 브라우저 스크린샷으로 첫인상, 실제 디자인 시스템 추출, 페이지별 체크리스트, 인터랙션 흐름, 페이지 간 일관성을 검토하며 모든 발견에 스크린샷을 붙입니다.
3. **분류와 수정** — 영향도 순으로 정렬해 CSS 위주로 최소 수정하고 건마다 커밋 후 재테스트합니다. 위험도가 20%를 넘으면 멈추고 묻으며 최대 30건입니다.
4. **최종 감사와 보고** — 영향받은 페이지를 다시 감사해 전후 점수를 계산하고, 수정 상태와 전후 스크린샷이 담긴 보고서를 쓰며 TODOS.md 를 갱신합니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 일부 필요 | 발견과 직접 관련된 소스만 수정하고, 새 회귀 테스트, 보고서, 동의받은 DESIGN.md 를 쓸 수 있습니다. CI 설정과 기존 테스트는 바꾸지 않습니다. |
| 명령 실행 | 필요 | git, 브라우저 구동 스크립트(Aside 또는 gstack 브라우저), gstack 보조 도구, 테스트 명령을 실행합니다. |
| 네트워크 송신 | 필요 | 대상 사이트에 접속하고 WebSearch 를 쓰며, Codex 에 외부 의견을 요청할 수 있습니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
name: design-review
preamble-tier: 4
version: 2.0.0
description: "Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack)"
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - AskUserQuestion
  - WebSearch
triggers:
  - visual design audit
  - design qa
  - fix design issues
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/design-review/