사용 가이드로 건너뛰기
design-critique작성자 Anthropic

Design Critique 스킬.

디자인 리뷰를 위한 Claude Code 및 Codex skill: 사용성, 계층 구조 및 일관성에 대한 구조화된 디자인 피드백.

  • Design Review & Accessibility
  • 리뷰 리포트
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
업스트림 파일에서 읽은 전문 및 섹션 제목 (2026-09-14) · 전체 3,898자

01 기능

Claude Code와 Codex에서 design-critique 스킬이 하는 일

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

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

스킬 자체의 표현으로

design-critique는 탐색 단계부터 최종 마무리 단계까지, Figma URL, 스크린샷, 또는 서면 설명을 가진 누구에게나 공통된 디자인 리뷰를 실행합니다. 첫인상, 사용성, 시각적 계층, 일관성, 접근성이라는 다섯 부분으로 구성된 프레임워크를 따릅니다. 피드백 규칙은 에이전트가 모호한 불만을 넘어서도록 요구합니다: 경쟁하는 요소를 명시하고, 디자인 원칙이나 사용자 요구에 비추어 이유를 설명하고, 대안을 제시하고, 잘 작동하는 부분을 인정할 것.

출력물은 전반적인 인상, 심각도가 표시된 사용성 표(Critical, Moderate, Minor), 일관성 표, 접근성 노트, 잘 작동하는 부분 목록, 세 가지 우선순위 권고사항이 포함된 마크다운 형식의 평가입니다. 디자인 도구나 사용자 피드백 커넥터가 있는 경우, 컴포넌트와 토큰을 검사하거나 지원 티켓을 상호 참조합니다.

산출물

  • 각 발견 사항을 심각도 수준 및 권장 수정 방법과 함께 나열한 사용성 표.
  • 디자인 시스템 대비 타이포그래피, 여백, 색상 편차를 정리한 일관성 표입니다.
  • 영향도 순으로 정렬된 우선순위 권장사항 목록으로 마무리합니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    디자인을 먼저 살펴보게 하십시오

    Figma URL이 있으면 Figma에서 가져오고 참조된 파일을 읽습니다. 둘 다 없으면 에이전트가 사용자에게 디자인을 설명하거나 공유하도록 요청합니다.

  2. 02
    2초간의 첫인상부터 시작하십시오

    분석에 들어가기 전에, 시선이 먼저 향하는 곳이 맞는지, 감정적 반응이 어떠한지, 목적이 즉시 명확한지를 먼저 기록합니다.

  3. 03
    다섯 가지 차원을 순서대로 살펴보십시오

    사용성, 시각적 계층 구조, 일관성, 접근성 각각에 대해 별도의 프롬프트 세트가 적용되며, 읽기 순서와 여백부터 명암비와 터치 타깃까지 다룹니다.

  4. 04
    명시된 스타일 규칙에 따라 피드백을 작성하십시오

    발견 사항은 구체적이고 설명이 뒤따라야 하며, 대안이 함께 제시되어야 하고, 이미 잘 작동하는 부분과 균형을 이루어야 합니다.

  5. 05
    Markdown 출력 템플릿을 채우십시오

    고정된 구조는 전체 인상, 심각도가 표시된 사용성 표, 계층 구조 노트, 일관성 표, 접근성, 잘 작동하는 부분, 우선순위 권장사항 순으로 구성됩니다.

02 적합성 확인

design-critique 스킬 사용 시기

이러한 종류의 디자인 리뷰 작업의 경우 Claude Code 또는 Codex에서 design-critique skill을 사용합니다. 아래의 적합성 및 제한 사항은 skill 자체 파일에서 가져온 것입니다.

적합한 경우

  • 탐색 단계부터 최종 마무리까지, 디자인이 완성되기 전에 Figma 링크나 스크린샷을 붙여넣어 피드백을 받는 방식입니다.
  • B2B SaaS의 결제 흐름과 같이 명명된 특정 맥락을 가진 흐름으로, 대상과 목적이 피드백을 더 정교하게 만듭니다.
  • 범위를 좁힌 검토로, 예를 들어 내비게이션만 보도록 요청하여 한 영역에 대해 더 깊은 검토를 받는 방식입니다.
  • 작업 중에 시안을 비평해 달라거나 화면에 대한 의견을 물어보는 등 가벼운 트리거 문구입니다.

한계 인지하기

  • 환경에 디자인 도구 커넥터가 설정되어 있지 않으면 실시간 Figma 파일을 가져올 수 없습니다.
  • 실제 사용자 불만과 결정을 대조하려면 연결된 사용자 피드백 소스가 필요합니다.

제공할 사항

  • 디자인 자체Figma URL, 스크린샷, 또는 상세한 서면 설명이 최소한으로 필요합니다.
  • 맥락이것이 무엇인지, 누구를 위한 것인지, 그리고 탐색, 정제, 최종 중 어느 단계에 있는지입니다.
  • 선택적 초점모바일이나 온보딩 흐름과 같이 검토 범위를 좁혀 넓이보다 깊이를 얻을 수 있습니다.
  • 슬래시 명령어 인자이 명령어는 디자인 자료의 형태와 관계없이 하나의 인자를 받습니다.

03 스킬 내부

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

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 발견 사항을 절대 모호하게 남기지 마십시오

    피드백은 충돌하는 구체적 요소를 명시해야 합니다. 예를 들어 레이아웃이 혼란스럽다고 말하는 대신 CTA가 내비게이션과 경�다고 말해야 합니다.

  2. 항상 해결책을 제시할 것

    문제를 지적하는 것만으로는 결과물이 될 수 없으며, 비평은 각 문제와 함께 대안을 제시해야 합니다.

  3. 잘 작동하는 부분을 인정할 것

    긍정적인 관찰은 선택적인 예의가 아니라 좋은 피드백의 필수 구성 요소이며, 출력 템플릿에는 이를 위한 What Works Well 섹션이 있습니다.

  4. 단계에 맞춰 깊이를 조정할 것

    초기 탐색 단계와 최종 마감 단계는 서로 다른 피드백을 받아야 하므로, 에이전트는 모든 경우에 동일한 기준을 적용하지 말고 조정해야 합니다.

  5. 모든 사용성 발견 사항을 심각도로 평가할 것

    사용성 표는 Critical, Moderate, Minor의 세 가지 고정 등급을 사용하며, 각 등급에는 권장 사항이 함께 제시됩니다.

  6. 접근성을 별도 검토 항목으로 다룰 것

    이 프레임워크는 대비와 터치 타겟 크기를 일반 사용성 노트에 포함시키는 대신, 전용 접근성 항목을 포함합니다.

  7. 디자인이 없을 경우 질문할 것

    URL이나 파일이 제공되지 않은 경우, 에이전트는 비평을 임의로 만들어내는 대신 설명이나 스크린샷을 요청해야 합니다.

04 활용하기

Claude Code 또는 Codex에 design-critique 설치

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

Claude Code, Codex 또는 사용자의 Agent에 design-critique 추가

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

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

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

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

Starter prompt
Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

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

첫 번째 결과 확인

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

  • 접근성 항목에서는 핵심 텍스트의 대비에 대한 통과 또는 실패 여부를 구체적으로 보고해야 합니다.

OpenDesign에서 design-critique를 해당 SKILL.md 링크로 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
Anthropic
스킬 파일
design/skills/design-critique/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 8f877b6
License
Apache-2.0 LICENSE에서 확인
리포지토리 스타
24,012 전체 anthropics/knowledge-work-plugins 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷이며, 이 카탈로그에는 7개의 skill이 포함되어 있습니다. design-critique에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 사용법슬래시 명령이 인자를 받아 디자인 소스를 해석하는 방식입니다.
  2. 필요한 정보디자인, 맥락, 그리고 선택적인 focus 영역입니다.
  3. 비평 프레임워크첫인상, 사용성, 계층 구조, 일관성, 접근성이라는 다섯 가지 순서화된 항목입니다.
  4. 피드백 제공 방법구체성부터 단계 조정까지, 발견 사항을 표현하는 다섯 가지 스타일 규칙입니다.
  5. 출력비평이 따라야 하는 마크다운 템플릿으로, 표를 포함합니다.
  6. 커넥터가 있는 경우디자인 도구나 사용자 피드백 소스가 연결되어 있을 때 수행하는 추가 사전 작업입니다.
  7. 팁맥락을 공유하고, 단계를 명시하며, 더 좁은 focus를 요청하세요.
스킬 자체 설명
사용성, 위계, 일관성에 대한 구조화된 디자인 피드백을 받습니다. "이 디자인 검토해줘", "이 목업 비평해줘", "이 화면 어떻게 생각해?"로 실행하거나, 탐색 단계부터 최종 완성까지 모든 단계에서 Figma 링크나 스크린샷을 피드백 요청과 함께 공유할 때 사용합니다.

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 3,898자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

design-critique 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 기능을 사용하려면 Figma 커넥터가 필요합니까?

아닙니다. 디자인 도구가 연결되어 있으면 Figma에서 디자인을 직접 가져와 컴포넌트, 토큰, 레이어를 검사할 수 있습니다. 연결되어 있지 않아도 스크린샷을 붙여넣거나 디자인을 자세히 설명하면 동일한 프레임워크가 적용됩니다.

Design Critique

실제 디자인 검토 작업에서 design-critique 실행

OpenDesign를 다운로드하고, SKILL.md 링크에서 design-critique를 가져온 뒤, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인하십시오.

터미널
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원