83.3K+다운로드
사용 가이드로 건너뛰기
plan-design-review작성자 Garry Tan

Plan Design Review 스킬.

디자인 검토를 위한 Claude Code 및 Codex skill: 구현 전 디자인 계획의 완전성 및 경험 위험을 검토합니다.

  • Design Review & Accessibility
  • 리뷰 리포트
OpenDesign 다운로드사용 가이드 보기
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 72,139자

01 기능

Claude Code와 Codex에서 plan-design-review 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

구현 전에 설계 계획의 완결성과 경험 리스크를 검토합니다. 정보 구조(Information Architecture), 인터랙션 상태(Interaction States), 사용자 여정(User Journey), 빈 상태(Empty States), 시각적 계층(Visual Hierarchy), AI Slop 리스크(AI Slop Risk), 접근성(Accessibility) 등 7가지 설계 항목을 각각 0~10점으로 평가한 뒤, 10점이 되기 위해 필요한 조건을 설명하고 그에 맞게 계획을 수정합니다. UI가 범위에 포함되면 기본적으로 gstack 디자이너로 시각적 목업을 생성합니다.

선택적으로 외부 검토 단계를 포함합니다: Codex는 OpenAI의 설계 하드 룰과 리트머스 체크를 기준으로 평가하고, Claude 서브에이전트는 독립적인 완결성 검토를 수행합니다. 계획 모드에서 동작합니다. 실제 사이트의 시각적 감사에는 대신 /design-review를 사용하십시오. 결과물은 계획에 대한 문서가 아니라, 구조화된 검토 리포트가 포함된 더 나은 계획입니다.

산출물

  • 설계상의 공백이 해소되고, 항목별 평점과 구조화된 GSTACK REVIEW REPORT 섹션이 추가된 개선된 계획 파일
  • 사용자가 선택한 변형, 평점, 코멘트, 피드백을 기록한 비교 보드 HTML 파일 및 approved.json
  • 외부 검토가 진행된 경우 Codex와 Claude 서브에이전트의 결과를 종합한 리트머스 스코어카드
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    범위 게이트가 검토 대상을 확인합니다

    계획 모드가 활성 계획을 자동으로 선택하거나 사용자가 명시적으로 대상을 지정하지 않은 경우, 다른 작업에 앞서 검토 대상(브랜치 diff, 계획 문서, 특정 페이지)을 사용자에게 확인합니다.

  2. 02
    기본적으로 시각적 목업을 생성합니다

    gstack 디자이너를 사용할 수 있고 계획에 UI 범위가 포함된 경우, 별도의 허락을 구하지 않고 즉시 목업을 생성합니다.

  3. 03
    선택적 외부 설계 검토가 병렬로 실행됩니다

    사용자가 선택하면 Codex(설계 하드 룰 + 리트머스 체크)와 Claude 서브에이전트(독립적 완결성 검토)를 동시에 실행합니다.

  4. 04
    7가지 설계 항목을 0~10점으로 평가하고 공백을 수정합니다

    정보 구조, 인터랙션 상태, 사용자 여정, 빈 상태, 시각적 계층, AI Slop 리스크, 접근성 등 각 항목에 대해 계획을 평가하고, 10점 만점의 모습을 설명한 뒤, 공백을 해소하도록 계획을 수정하고 재평가하며, 10점에 도달하거나 사용자가 다음으로 넘어가자고 할 때까지 반복합니다.

  5. 05
    구조화된 검토 리포트를 계획 파일에 작성합니다

    실행/상태/결과 표와 VERDICT 라인, 미해결 결정 상태를 담은 GSTACK REVIEW REPORT 섹션을 파일의 마지막 비공백 줄로 추가합니다.

02 적합성 확인

plan-design-review Skill을 사용해야 하는 경우

이런 종류의 디자인 검토 작업에는 Claude Code 또는 Codex에서 plan-design-review 스킬을 사용하십시오. 적합성과 한계는 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 사용자가 구현을 시작하기 전에 검토해야 할 UI/UX 구성 요소가 포함된 계획을 작성했습니다
  • 설계 계획에는 코딩을 시작하기 전에 추상적인 설명을 구체화할 시각적 목업이 필요합니다
  • 계획이 백엔드의 동작은 설명하지만 사용자가 실제로 보게 될 화면, 빈 상태, 오류 상태, 반응형 동작은 전혀 명시하지 않습니다

한계 인지하기

  • UI 범위가 전혀 없는 순수 백엔드, API 전용 또는 인프라 변경입니다
  • 라이브 사이트 시각적 감사 (대신 /design-review 사용)

제공할 사항

  • UI 범위가 있는 디자인 플랜 또는 브랜치 diff플랜 파일, 사용자가 붙여넣은 문서, 특정 페이지/경로, 또는 현재 브랜치 diff.
  • 비교 보드를 통한 목업 피드백gstack 디자이너가 HTTP로 비교 보드를 제공하며, 사용자는 변형안을 평가하고 댓글을 남기고 Regenerate/Remix를 클릭하거나 최종 선택을 제출합니다.

03 스킬 내부

plan-design-review 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에 설정하는 5가지 구체적 지침, 기본값, 한계 — 결과를 바꾸는 파일의 부분입니다.

  1. 모든 디자인 산출물은 ~/.gstack/projects/$SLUG/designs/에 저장됩니다

    목업, 비교 보드, approved.json은 사용자의 gstack 프로젝트 디자인 디렉터리에만 저장해야 하며, .context/, docs/designs/, /tmp/, 또는 프로젝트 로컬 디렉터리에는 절대 저장하지 않습니다.

  2. 우선순위 계층: Step 0 > 목업 > 인터랙션 상태 > AI Slop > IA > 사용자 여정

    디자이너를 사용할 수 있을 때는 Step 0 범위 평가나 목업 생성을 절대 건너뛰지 않습니다. 리뷰 통과 전 목업은 협상 불가능합니다.

  3. DESIGN.md가 존재할 경우 이를 기준으로 디자인 리뷰를 조정합니다

    DESIGN.md가 존재하면 모든 디자인 결정은 명시된 디자인 시스템과 일치해야 합니다.

  4. 외부 의견은 이슈를 각 패스에 미리 반영합니다

    Codex의 강한 거부(hard rejection)는 [HARD REJECTION] 태그와 함께 Pass 1의 첫 항목으로 제기됩니다. Litmus DISAGREE 항목은 해당 패스에서 양쪽 관점을 모두 드러냅니다.

  5. 완전성 원칙: AI는 완전성을 저렴하게 만든다

    전체 커버리지(테스트, 엣지 케이스, 오류 경로)를 권장합니다 — 바다를 한 번에 끓이는 대신 호수 단위로 끓이십시오.

04 활용하기

Claude Code 또는 Codex에 plan-design-review 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 에이전트에 plan-design-review 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/garrytan/gstack --skill plan-design-review

plan-design-review/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 디자인 리뷰 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if you can.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • plan mode를 종료하기 전에 플랜 파일의 마지막 제목이 ## GSTACK REVIEW REPORT인지 확인하십시오
  • 리뷰 보고서에 runs/status/findings 표, VERDICT 줄, 그리고 파일의 마지막 비공백 줄로서 미해결 결정 상태가 있는지 확인하십시오
  • 플랜 파일이 컨텍스트에 있는 경우 gstack-review-log가 호출되었고 gstack-review-read가 최소 한 번 실행되었는지 확인하십시오

OpenDesign에서는 plan-design-review가 기본 포함되어 있습니다: Plugins → Skills에서 상단 바에서 선택하십시오.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Garry Tan
Repository
github.com/garrytan/gstack 브랜치 main
스킬 파일
plan-design-review/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 71f6048
License
MIT LICENSE에서 확인.
리포지토리 스타
132,921 GitHub 스냅샷은 2026-09-14에 garrytan/gstack 리포지토리 전체에 대해 생성되었으며, 이 카탈로그에는 7개의 스킬이 포함되어 있습니다. plan-design-review의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 이 스킬을 호출할 시점디자인 플랜 리뷰에 사용하십시오. 구현 전에 UI/UX 플랜 리뷰가 필요할 때 선제적으로 제안하십시오
  2. 전문(먼저 실행)gstack-skill-start를 실행하고, 성능 저하 모드를 처리하며, 지시 블록을 읽고, SESSION_KIND와 텔레메트리 마커를 설정합니다
  3. 디자인 철학디자인이 생성된 것이 아니라 의도된 것처럼 느껴지도록 하며, 모든 공백을 찾아 왜 중요한지 설명하고 명백한 것은 수정합니다
  4. gstack 디자이너 — 당신의 주요 도구디자인 브리프로부터 실제 시각물을 만드는 AI 목업 생성기; UI가 존재할 때 기본으로 사용하십시오
  5. 디자인 원칙아홉 가지 원칙: 빈 상태는 기능이다, 위계가 중요하다, 분위기보다 구체성, 엣지 케이스는 UX다, AI Slop은 적이다, 반응형은 의도적이다, 접근성은 필수다, 뺄셈이 기본이다, 신뢰는 픽셀 단위에서 얻어진다
  6. 인지 패턴 — 훌륭한 디자이너가 보는 방식열두 가지 지각적 본능: 화면이 아닌 시스템을 보기, 공감을 시뮬레이션으로, 위계를 서비스로, 제약에 대한 경외, 질문 반사, 엣지 케이스 편집증, '나라면 눈치챘을까' 테스트, 원칙 있는 취향, 뺄셈이 기본, 시간 지평 디자인, 신뢰를 위한 디자인, 스토리보드 여정
  7. UX 원칙: 사용자는 실제로 어떻게 행동하는가세 가지 법칙(나를 고민하게 하지 마라, 클릭 수는 중요하지 않고 생각하게 하는 것이 문제다, 생략하고 또 생략하라), 사용자 행동(읽지 않고 훑어본다, 만족화, 대충 헤쳐 나간다), 빌보드 디자인, 길찾기로서의 내비게이션, 호감 저장소, 모바일에서 더 높은 위험 부담
  8. 맥락 압박 상황에서의 우선순위 체계Step 0 > 목업 > Interaction States > AI Slop > IA > User Journey; Step 0나 목업은 절대 건너뛰지 않습니다
  9. 사전 검토 시스템 점검(Step 0 이전)git log, diff stat, plan, CLAUDE.md, DESIGN.md, TODOS.md에서 맥락을 수집하고 UI 범위와 기존 패턴을 파악합니다
  10. 디자인 설정(디자인 목업 명령 실행 전에 이 점검을 수행합니다)gstack designer 바이너리가 사용 가능한지 확인하고 DESIGN_READY 또는 DESIGN_NOT_AVAILABLE을 출력합니다
  11. 브레인 맥락(사전 점검)명확화 질문을 하기 전에 gstack-brain-cache에서 구조화된 프로젝트 맥락(제품, 브랜드, 목표, 최근 결정 사항)을 불러옵니다
  12. Step 0: 디자인 범위 평가초기 디자인 등급 0-10, DESIGN.md 상태 확인, 기존 디자인 활용, 집중 영역 질문(사용자 응답까지 중단)
스킬 자체 설명
"디자이너의 안목으로 계획 검토 — CEO 및 엔지니어링 검토처럼 대화형. (gstack)"

SKILL.md의 전문 설명입니다. 전체 파일은 약 72,139자입니다. GitHub에서 전체 파일 읽기.

계획 디자인 검토

실제 디자인 검토 작업에 plan-design-review를 실행합니다.

plan-design-review 스킬은 OpenDesign 내에 포함되어 있습니다. 앱을 다운로드하고, Plugins → Skills에서 스킬을 선택한 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/garrytan/gstack --skill plan-design-review