design-reviewcommit ed10791 · v2.0.0SKILL.md · UI·인터랙션

디자인 리뷰

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

수정마다 git 커밋을 하며(시작 전 커밋하지 않은 변경을 커밋하거나 stash 할 수 있음), 로그인된 브라우저 세션으로 사이트를 조작합니다.

npx skills add garrytan/gstack --skill design-review

권한: read-repo
write-files
shell
network
호환 도구: Claude Code, Codex, Cursor, Copilot
GitHub: 138.5k
출처: 커뮤니티 · Garry Tan
상태: 스캔 통과
라이선스: MIT
카테고리: UI·인터랙션
저장소: github.com/garrytan/gstack/design-review

핵심 규칙

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

실행 단계

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

권한 설명 (SKILL.md 기준)

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

SKILL.md 프런트매터(YAML)commit ed10791 · v2.0.0

---
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
---

핵심 규칙

실행 단계

01단계준비

02단계디자인 감사

03단계분류와 수정

04단계최종 감사와 보고

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬