Meaghan Choi가 Anthropic에서 설계한 Claude Code: 솔로 개발자가 갖지 못했던 디자인 파트너

Meaghan Choi는 Anthropic에서 Claude Code를 설계했습니다. 이 프롬프트는 Claude Code를 대부분의 독립 개발자들이 경험하지 못한 디자인 파트너로 변모시킵니다.

대부분의 사람들은 Claude에게 화면을 요청하고 diff(차이점 비교)를 통해 이를 판단합니다. 빌드는 성공적이고, 한 너비에서는 페이지가 괜찮아 보이며, 아무도 빈 상태(empty state)를 열어보지 않습니다.

그래서 이 프롬프트는 Claude Code가 코딩하는 디자이너처럼 작동하게 만듭니다. 순서대로 총 6단계의 검토 과정이 진행됩니다:

1. Brief (개요): 사용자 한 명, 작업 하나, 기분이 좋아야 하는 순간 하나에 초점을 맞춥니다. Claude는 개발자가 '예'라고 할 때까지 기다립니다.
2. Directions (지침): 실제 코드 3가지 버전을 제시합니다. 시스템에 가장 가까운 버전, 요소가 절반만 들어간 버전, 그리고 과감한(bold) 버전입니다.
3. Pick (선택): 명확성, 계층 구조, 밀도, 즐거움 네 가지 기준에 따라 점수가 매겨진 측면 비교 스크린샷 6개를 보여줍니다. 개발자가 직접 선택합니다. 어중간하게 타협하는 것은 없습니다.
4. Redline (세부 수정): Claude가 실행 중인 페이지를 열어 간격(spacing), 타이포그래피 스케일(type scale), 대비(contrast), 44px 목표 지점, 그리고 빈 상태, 로딩 상태, 에러 상태 등을 검사합니다. 놓친 모든 부분은 taste.md 파일의 한 줄이 됩니다.
5. Polish (다듬기): 한 번에 하나의 수정 사항을 적용하며, 수정할 때마다 새로운 스크린샷을 제공합니다.
6. Walkthrough (시연): 키보드만 사용하고 텍스트를 200%로 확대한 다크 모드로 진행됩니다. 코드 내용이 아닌 화면에서 본 것을 보고합니다.

개발자가 Claude의 취향(taste)을 수정할 때마다, 그 규칙은 CLAUDE.md 파일의 ## taste 섹션으로 기록됩니다. 다음 스크린샷은 이 모든 내용을 기반으로 시작됩니다.

핵심 구성 요소 (THE CORE)

1. Claude Code · 154,768 stars: 화면을 빌드하고, 실행하며, 스크린샷을 찍는 에이전트입니다.
2. Agent Skills · 188,060 stars: frontend-design 및 webapp-testing으로 시작합니다.

페이지를 볼 수 있게 하기 (LET IT SEE THE PAGE)
3. Playwright MCP · 39,261 stars: 실제 브라우저, 실제 스크린샷, 실제 클릭을 수행합니다.
4. Chrome DevTools MCP · 54,877 stars: redline 검토 단계를 위한 콘솔(console), 네트워크(network) 및 성능 추적 기능을 제공합니다.
5. Figma Context MCP · 16,173 stars: 목업의 평면적인 그림 대신 Claude에게 레이아웃 데이터를 전달합니다.

일관성을 유지하기 (KEEP IT CONSISTENT)
6. shadcn/ui · 127,504 stars: Claude가 새로운 것을 발명하기 전에 재사용할 수 있는 컴포넌트와 토큰입니다.
7. Storybook · 91,467 stars: 모든 빈 상태, 로딩 상태, 에러 상태를 한 곳에 모아둡니다.
8. axe-core · 7,769 stars: 'AA 또는 그 이상'의 대비 및 접근성 검사 기능을 담당합니다.

핵심 문제점
녹색 빌드(green build)가 좋은 화면을 의미하는 것은 아닙니다. 선택과 최종 승인은 인간의 판단이 필요합니다.

취향은 프롬프트가 아닙니다. 그것은 당신이 계속해서 작성해 나가는 규칙 목록입니다.

https://t.co/O9Jz4Kvgv8