Communitygithub.com

경쟁 리디자인

사용자가 자신의 앱 기능을 개선하거나 재구상하려고 할 때, 경쟁사 제품(예: Loom, Notion, Linear)에서 배우고, 제안된 개선 사항의 시각적 디자인(현재 UI와 리디자인의 비교)을 확인하려는 경우 사용합니다.

경쟁 리디자인란 무엇인가요?

이 스킬은 사용자가 경쟁사 분석을 통해 자신의 앱 기능을 개선하도록 돕는 완전한 워크플로우를 제공합니다. 먼저 병렬 서브에이전트가 자사 기능과 2~3개 경쟁사 제품의 스크린샷을 수집하고 분석합니다. 이 결과는 사용자에게 제시될 격차 분석 및 일괄 의사 결정 항목으로 종합되며, 선택된 방향은 현재 UI 스크린샷 옆에 개선된 모든 디자인 변경점을 표시한 디자인 캔버스로 이어집니다. 이 스킬은 실제 제품 코드를 작성하지 않으며, 최종 결과물은 의사 결정, 디자인, 그리고 요청 시 구현 계획을 포함합니다. 주로 Claude Code 환경에서 사용되며, Playwright MCP를 통한 스크린샷 수집, 코드 기반 분석, 그리고 Claude의 디자인 캔버스(Artifact)와 글쓰기 계획 하위 스킬을 활용합니다. 참고 실행에서 발생한 일반적인 문제(예: 브라우저 세션 오염, 로그인 오류)에 대한 해결 방법도 문서화되어 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Pure-Water-Automations/agent-skills/tree/HEAD/competitive-redesign
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

경쟁 리디자인은(는) 무엇을 하나요?

SKILL.md 옆에 LOCAL.md 파일이 있으면 먼저 읽으십시오 — 이 파일에는 이 워크스페이스의 특정 정보(경로, 도구, 예제)가 포함되어 있으며 아래의 일반 기본값을 재정의합니다.

연구 → 결정 → 디자인. 병렬 서브에이전트가 자사 기능과 2-3개의 경쟁사 제품 스크린샷을 캡처하고, 그 결과는 사용자를 위한 일괄 의사 결정과 함께 격차 분석이 되며, 선택된 방향은 디자인 캔버스가 됩니다: 현재 UI 스크린샷 옆에 모든 변경 사항이 표시된 리디자인 아트보드가 배치됩니다. 출력은 결정 + 디자인 (+ 선택적으로 구현 계획)입니다 — 이 스킬로 제품 코드가 작성되지는 않습니다.

아래 언급된 "참고 실행"은 이 스킬의 첫 번째 실제 실행(레코딩 라이브러리 리디자인)이며, LOCAL.md가 있으면 이를 가리킵니다. 단지 작동 예시일 뿐입니다 — 형식을 증명하고 깊이를 보정합니다. 새 기능의 내용을 위해 이를 참조하지 마십시오.

1단계 — 병렬 연구 (저렴한 모델 서브에이전트, 최대 3개까지 동시 실행)

최대 3개의 서브에이전트를 한 메시지에 실행합니다 — Agent 도구, general-purpose, model: "sonnet" (저렴한 모델은 기본 연구에 충분하며, 동시에 3개를 초과하지 마십시오 — 속도 제한으로 인해 생성 버스트가 실패합니다):

  1. 자사 — 자사 앱의 기능 스크린샷을 캡처합니다.
      1. 경쟁사 — 사용자가 지정한 제품이 먼저 이 슬롯을 채우며, 각각 하나의 에이전트를 할당합니다. 나머지 슬롯(사용자가 0개 또는 1개만 지정한 경우): 관련 기능 영역의 가장 풍부한 공개 문서를 가진 2-3개의 경쟁사를 선택하는 "설문 조사" 에이전트를 실행합니다. 사용자가 3개 이상 지정한 경우: 기본 에이전트 하나, 나머지는 일괄 처리 에이전트 하나를 할당합니다.

실행 중에 메인 스레드에서 우리 코드베이스를 파악하십시오: 기능의 스키마, 읽기/액션 레이어, 페이지. 권장 사항은 실제 필드에 매핑되어야 합니다 ("project 태그는 존재하지만 UI에서 노출되지 않음") — 코드 기반이 없는 경쟁사 연구는 아무도 구축할 수 없는 희망 사항 목록을 생성합니다.

서브에이전트 브리핑 — 생략 시 실패하는 부분:

  • Playwright MCP만 사용하고 Browser 창은 사용하지 마십시오 — Browser 창 스크린샷은 디스크에 저장할 수 없으며 오케스트레이터가 볼 수 없습니다. 에이전트에 명시적으로 지시하십시오: mcp__playwright__playwright_screenshot과 함께 savePng: true 및 downloadsDir을 에이전트별 스크래치패드 하위 디렉토리(ours/, loom/, competitors/)로 설정하고, 먼저 mkdir -p를 실행한 후 ls로 확인된 절대 경로를 보고하도록 합니다.
  • 동시 에이전트는 하나의 Playwright 브라우저를 공유하며 반드시 세션을 오염시킵니다 (한 에이전트가 다른 에이전트의 페이지 스크린샷을 찍음 — 참고 실행에서 발생). 모든 에이전트에 지시하십시오: 스크린샷을 저장하기 전에 각 스크린샷이 방금 이동한 URL과 시각적으로 일치하는지 확인하십시오. 오래되었거나 다른 세션의 캡처인 경우 Playwright 브라우저를 닫고 다시 열어 재촬영하십시오.
  • Playwright chromium이 누락될 수 있습니다 ("Executable doesn't exist …"): MCP의 npx 캐시 디렉토리에서 npx playwright install chromium을 실행한 후 계속 진행하십시오 (지속적인 문제이며 버전 업데이트 후에도 발생).
  • 자사 앱의 로그인: 에이전트에게 정확한 레시피를 제공하십시오 — 예를 들어 개발 전용 로그인 양식(/login에서 이메일 + 비밀번호)으로, 개발 데이터베이스에 활성 사용자로 존재하는 이메일과 개발 서버 환경의 개발 로그인 비밀번호를 사용합니다. 에이전트를 실행하기 전에 직접 확인하십시오 (개발 서버에서 환경 변수 값을 읽고, 개발 DB에서 활성 사용자를 조회). 참고 실행에서는 개발 DB에 없는 이메일로 인해 CredentialsSignin 오류가 발생하여 전체 에이전트를 소모했습니다. 앱의 AGENTS.md / README에서 개발 인증 경로를 찾으십시오. 에이전트를 프로덕션으로 절대 향하지 마십시오.
  • 경쟁사 라이브러리는 로그인 뒤에 있습니다 — 에이전트에게 헬프센터 문서, 마케팅/기능 페이지, 문서(support.loom.com 등)를 사용하도록 지시하고, 회원가입을 시도하지 않도록 하십시오. 구조화된 기능 인벤토리(조직, 검색/발견, 공유, 워크플로우, AI, 관리) + 핵심/사랑받는 기능과 엔터프라이즈 게이트 기능 구분 + "훔칠 가치가 있는 독특한 아이디어" 목록을 요청하십시오.

2단계 — 종합 + 일괄 의사 결정

사용자에게 하나의 메시지로 컴파일하십시오:

  1. 현재 상태 — 우리 기능이 무엇을 가지고 있고 무엇이 부족한지, 스크린샷과 코드 모두를 기준으로 확인(파일 인용).
  2. 경쟁사가 하는 일 — 제품당 몇 줄, 전환 가능한 부분만.
  3. 단계별 권장 사항 — 가장 저렴한 레버리지 우선: (a) 코드가 이미 지원하는 것을 노출, (b) 소규모 마이그레이션 조직 기능, (c) 워크플로우 기능. 사용자의 프롬프트에서 나온 아이디어를 포함하십시오. 의도적으로 건너뛴 부분(엔터프라이즈 형태, YAGNI)을 표시하십시오.
  4. 일괄 객관식 결정: 결과물을 변경하는 2-4개의 분기점, 문자 옵션 + 각각에 대한 권장 사항. 질문을 조금씩 드립풋 하지 마십시오.

중단하고 결정을 기다리십시오. 범위가 결정되지 않은 상태에서 디자인을 시작하지 마십시오.

3단계 — 선택된 방향의 디자인 캔버스

필수 하위 스킬: design 스킬 (Claude Design 캔버스 → Artifact). 이 스킬은 캔버스 메커니즘을 소유하며, 이 단계에서는 비교 규칙을 추가합니다:

  • 현재 UI 스크린샷을 자체 아트보드 ("현재 — X")로 리디자인 아트보드 ("리디자인 — X") 옆에 배치합니다. 스크린샷을 시딩하기 전에 약 70-100 KB JPEG로 다운샘플링합니다 (sips -Z 900 -s format jpeg -s formatOptions 60 …).
  • 리디자인 아트보드는 앱의 실제 디자인 시스템과 일치해야 합니다 — 먼저 토큰 파일과 컴포넌트를 읽고 정확한 값(글꼴, 색상 토큰, 카드 모서리 반경, 버튼 모양)을 복사하십시오.
  • 모든 변경 사항을 표시하십시오: 앱의 강조 색상으로 점선 윤곽선 + 오늘날 존재하지 않는 각 요소에 작은 "NEW" 레이블 변형(수정된 요소에는 "CHANGED"). 변경되지 않은 영역에는 장식이 없습니다 — 부재가 마커를 더 읽기 쉽게 만듭니다.
  • 캔버스 스티커 메모는 아트보드별 변경 사항을 요약하고 하나의 개요 메모를 포함합니다. 목업의 샘플 데이터는 괜찮습니다. 인계 시 그렇게 말하십시오.
  • 정적 목업이 기본 결과물이며, 사용자가 요청한 경우에만 클릭 가능한 프로토타입을 구축하십시오.

4단계 (사용자가 요청한 경우에만) — 구현 계획

필수 하위 스킬: superpowers:writing-plans. 모든 작업을 1단계의 코드 읽기에 기반하십시오. 단계별 범위와 결정을 그대로 전달하십시오. 실행 모드 옵션(병렬 팬아웃 / 서브에이전트 / 인라인)으로 종료하십시오. 요청 없이 구축을 시작하지 마십시오.

주의사항 (모두 참고 실행에서 발생)

증상해결 방법
에이전트가 스크린샷을 보고했지만 오케스트레이터가 볼 수 없음Browser 창이 사용됨 — 재브리핑: Playwright MCP savePng + downloadsDir
스크린샷에 에이전트가 이동한 사이트와 다른 사이트가 표시됨공유 Playwright 세션 오염 — 브라우저 닫고, 다시 열고, 재촬영, 시각적 확인
개발 로그인 시 CredentialsSignin이메일이 개발 DB의 활성 사용자가 아님 — 개발 DB를 조회하고 활성 사용자를 사용
"Executable doesn't exist … chromium"npx playwright install chromium (캐시 디렉토리별, Playwright 업데이트 후 재실행)
팬아웃이 빈 결과 반환 / 속도 제한 발생동시 에이전트 3개 초과 — 3개 이하의 웨이브, 실패한 부분 재시도, 부분 결과를 명확히 보고
권장 사항이 코드와 일치하지 않음1단계 메인 스레드 코드 기반이 건너뛰어짐 — 종합 전에 수행

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Pure-Water-Automations/agent-skills

Score any app (the user's own or a competitor's) on a research-backed rubric and produce a reusable, comparable scorecard — 0–5 per dimension with an evidence grade, noncompensatory gates checked first, and one "smallest fix" per weak dimension. Adapts to product stage: a pre-PMF app under ~100 users is scored on 9 dimensions, a growth-stage app on the full 23. Use whenever the user says "score this app", "grade the app", "rate the UI/UX", "how good is [app]", "app scorecard", "run the scorecard on [app]", "how does [app] stack up", "is this ready to launch / promote to prod", or wants a before/after number after a build sprint or a beta round. Reads the codebase + deploy + docs, optionally beta feedback / analytics, and refuses to invent retention, revenue, or PMF from code alone. Outputs a chat table plus a published HTML scorecard artifact. Pairs with ui-usability-audit (UI depth), qa-sweep (functional pass), dev-to-prod-promotion-review (release gate).

Pure-Water-Automations/agent-skills

Use when the user wants a multi-perspective brainstorm on a feature, app, or product area — "spin up agents with different personalities/job titles", "look at it from different angles", "panel of experts", "come up with 30 ideas and a top 5", "how can we make X more useful", "brainstorm what to do next with X" — especially when they also want to DECIDE on the ideas (implement / hold / reject) rather than just read a list. Also use when they ask to re-run or extend a previous panel, or to "make the ideas decidable like dev-to-prod-promotion-review".

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community