본문으로 건너뛰기
cccskills
무료GitHub에 공개한국어 소개

design-critique

사용자 목표에 맞춰 화면과 조작 흐름을 검토합니다. 가독성, 조작의 명확성, 오류 안내 등의 개선점을 이유와 우선순위에 따라 정리하고 유지할 장점도 제시합니다.

원문원문 설명 보기

Give a structured product design critique — user job clarity, hierarchy, affordance, error states, accessibility, and consistency — focused on what to change, in what order, and why.

AI 평가100점/ 100설치 방법 보기

이럴 때 유용합니다

  • 화면이나 목업에 대한 구체적 의견 얻기
  • 기능 공개 전 사용성 확인하기
  • 중도 이탈이 의심되는 흐름 점검하기
  • 수정 우선순위와 유지할 장점 정리하기

한국어 소개

할 수 있는 일

화면, 조작 흐름, 구성 요소의 디자인을 검토해 무엇을 어떤 순서로 수정할지 구체적으로 제시합니다. 사용자 역할, 화면에서 달성할 목표, 성공한 상태와 앞뒤 흐름을 먼저 확인합니다. 이후 정보의 시각적 우선순위, 조작 가능한 곳의 명확성, 입력 폼, 오류 표시, 접근성, 일관성과 문구를 차례로 살펴봅니다. 결과는 공개 전 필수 수정, 확대 적용 전 수정, 여유가 있을 때 수정할 사항으로 나눕니다. 각 문제에 수정안을 덧붙이고 다음 수정에서도 유지할 장점을 정리합니다.

이럴 때 유용합니다

디자이너나 엔지니어가 화면안이나 실제 UI에 구체적인 의견을 얻을 때 적합합니다. 기능 공개 전 사용성을 확인하거나, 중도 이탈이 의심되는 조작 흐름을 본격적인 조사 전에 점검할 때도 활용합니다.

사용 예시

  • “처음 사용하는 사람의 목표에 맞춰 이 신청 화면을 검토해 주세요.”
  • “공개 전에 수정할 점을 우선순위대로 정리하고 유지할 장점도 알려 주세요.”

주의 사항

대상 화면이나 목업 같은 구체적인 자료와 사용자 및 목표에 관한 정보가 필요합니다. 배경 정보가 부족하면 먼저 확인합니다. 개선을 제안하는 스킬이며 재설계나 구현은 범위에 포함되지 않습니다. 검토 결과 자체가 공개 승인을 뜻하지는 않습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가
A양호화면과 흐름을 검토하는 사용 상황을 명시하고 재설계와 구분합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가
A양호사전 확인 사항, 아홉 단계의 점검 순서, 심각도별 출력 양식을 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가
A양호작업을 제안으로 한정하고 재구축을 금지하며 데이터 전송이나 삭제 지시는 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
A양호구체적인 디자인 자료와 사용자 배경 정보가 필요하며 추가 도구는 지정하지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

어느 항목이 왜 다르다고 생각하는지 적어 주세요. 로그인은 필요 없습니다. SKILL.md와 대조해 평가를 다시 만들고 이곳에 반영합니다.

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

포함된 파일(1)

  • SKILL.md4.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Product Design Critique

A structured critique pass for a screen, flow, or component. The output is a prioritized list of changes a designer or engineer can act on — not adjectives. Critique is not redesign; recommend, do not rebuild.

When to use

  • A designer or engineer asks for feedback on a screen, mock, or live UI.
  • A feature is shipping and someone wants a final UX read.
  • A flow is suspected of causing user drop-off and you want a pre-research read before instrumentation.

When not to use

  • The user wants a redesign. That is a design project, not a critique.
  • The work is so early that no concrete artifact exists. Sketch with them instead of critiquing air.
  • You have no context on the user job. Ask for it first; design critique without user context devolves into taste.

Pre-critique context

Before opening a screen, get:

  • Who is the user. Specific role and competence, not "users".
  • What job they are doing on this screen. One sentence.
  • What success looks like. What the user can do after this screen that they could not before.
  • Where this screen sits in the larger flow. What precedes and follows.

If any of these is missing, ask. Critique without these is opinion.

The pass (in order)

  1. Clarity of the user job.

    • Within 3 seconds of opening, is it obvious what this screen is for?
    • Does the primary action match the user's actual job, or a designer's preferred path?
  2. Visual hierarchy.

    • The most important thing on the screen should be the most prominent (size, weight, position, color).
    • Secondary actions should look secondary. Tertiary should be findable but not loud.
    • Headings should chunk content into the right groups for the task.
  3. Affordance and signifiers.

    • Clickable things look clickable.
    • Disabled things look disabled and explain why on hover/focus.
    • Drag, scroll, or swipe interactions are discoverable, not hidden.
  4. States.

    • Empty state (no data) is designed, not a blank rectangle.
    • Loading state communicates progress, not just spins.
    • Error states say what went wrong and what to do next, in the user's words.
    • Success state confirms without celebrating banal actions.
  5. Inputs and forms.

    • Labels visible, not just placeholders.
    • Validation runs at the right time (on blur, not on every keystroke unless the user is in a known-format field).
    • Required fields marked.
    • Field order matches the user's mental order, not the database order.
  6. Accessibility.

    • Sufficient color contrast (WCAG AA at minimum; AAA where reasonable).
    • Focus order is logical for keyboard navigation.
    • Interactive elements are reachable without a mouse.
    • Critical information is not color-only (icons, text, position back it up).
    • Touch targets at least 44×44 px on mobile.
  7. Consistency.

    • Tokens, components, and patterns match the rest of the product.
    • "Borrowed" patterns from other products are intentional, not accidental drift.
  8. Copy.

    • Buttons are verbs that name the outcome ("Save changes" beats "Submit").
    • Microcopy explains, does not decorate.
    • Tone matches the product voice.
  9. Edge cases.

    • Long content (long names, many items, RTL languages).
    • Tiny content (one item, zero items).
    • Slow network and offline behavior.
    • Permissions denied.

Output format

Group findings by severity, then by category. Each finding is one issue and one suggested fix.

## Design critique: <screen name>

### Must-fix (blocks ship)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Should-fix (before broader rollout)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Nice-to-fix (when there's room)
- **<category>:** <one-line issue>. **Try:** <one-line suggestion>.

### Strengths to keep
- <one-line thing the design got right>

Always include the "strengths to keep" section. It is not flattery — it is signal to the designer about what not to change in the next round.

Anti-patterns

  • "I would do it differently" without saying what or why. That is preference, not critique.
  • Long critiques that bury must-fix items under nice-to-haves.
  • Suggesting net-new features under the guise of a critique.
  • Ignoring user context and grading on taste.
  • Treating a critique as approval. State approval explicitly if asked; otherwise critique is feedback, not sign-off.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

add-product-e2e-eval

무료요약 있음AI 평가 90점

Paperclip에서 실제 브라우저부터 서버, 데이터베이스, runner까지 검증하는 E2E 평가를 추가·확장합니다. 테스트 데이터와 판정 조건, 증거를 기존 보고서에 연결합니다.

  • 전체 사용자 작업 흐름의 평가 추가
  • 테스트 데이터와 판정 조건 갱신
  • 평가 보고서에 스크린샷과 산출물 추가
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

add-runner-eval

무료요약 있음AI 평가 90점

Paperclip Runner의 동작 평가에 판정 조건, 실행 대상, 보고서 검증 데이터를 추가하고 증거와 실행 이력을 남겨 검증합니다.

  • Runner 동작 평가를 추가합니다
  • 정상 및 잘못된 증거로 판정을 검증합니다
  • 실행 대상 목록과 지속 평가를 갱신합니다
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

agent-browser

무료요약 있음AI 평가 90점

실제 브라우저로 웹페이지와 앱을 조작하며 화면과 동작을 검증합니다. 스크린샷, 간단한 양식 입력, 오류 및 통신 기록으로 문제 재현과 결과 확인을 돕습니다.

  • UI 변경 후 화면을 확인합니다
  • JavaScript로 렌더링된 내용을 읽습니다
  • 화면 문제와 오류를 재현합니다
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

agentmail

무료요약 있음AI 평가 100점

Paperclip에서 할당받은 AgentMail 수신함으로 작업에 연결된 메일을 확인하고, 새 메일 전송과 답장, 전송 결과 확인까지 수행합니다.

  • 담당 작업에 연결된 메일을 확인합니다
  • 할당된 수신함에서 새 메일을 보냅니다
  • 대화의 특정 메시지에 답장합니다
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

check-pr

무료요약 있음AI 평가 80점

GitHub, GitLab, Perforce 변경의 검토 의견, 자동 검사 실패와 설명 누락을 확인하고, 할 일을 정리하며 요청에 따라 수정과 처리된 스레드 해결을 지원합니다.

  • 변경 사항을 제출하기 전에 점검합니다
  • 실패한 검사와 수정할 항목을 확인합니다
  • 사람과 봇의 검토 의견을 정리합니다
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

company-creator

무료요약 있음AI 평가 100점

구상이나 기존 저장소를 바탕으로 AI 에이전트의 역할, 보고 체계, 작업 인계를 정리하고 규격에 맞는 회사 또는 팀 패키지를 만듭니다.

  • 구상에서 에이전트 회사를 만듭니다
  • 저장소를 팀 구성으로 정리합니다
  • 역할 분담과 작업 인계를 설계합니다
paperclipai/paperclip10.6만2026년 10월 21일 업데이트

paperclipai의 스킬 모두 보기

이 스킬의 문제 신고