한 줄 정의
Claude Code를 활용하여 프로덕션 수준의 대시보드를 효율적으로 설계 및 구현하는 4단계 프로세스.
핵심 요지
대시보드의 고품질 구현은 AI 모델의 역량보다 사용자가 제공하는 ‘제품 맥락(Context)‘과 ‘디자인 프로세스(계획, 맥락 제공, 자가 검열)‘의 준수 여부에 달려 있다.
상세
- 1단계: 사용자 중심 정의: 타깃 사용자와 그들이 해결해야 할 핵심 의사결정 질문 5가지를 명확히 정의하여 대시보드 구성의 기준 마련 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L15.
- 2단계: 기획 모드 분리: 구현 전 Claude가 기획안(Spec)을 먼저 작성하게 하고, 이를 반복 수정하여 견고한 제품 명세로 완성 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L45.
- 3단계: 컨텍스트 주입: 기존 디자인 시스템 소스 코드나 라이브러리 정보를 Claude에게 제공하여 이질감 없는 일관된 UI 구현 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L112.
- 4단계: 자가 검열(Critique): 디자인, 접근성, 아키텍처 등 다양한 가상 페르소나 관점에서 코드와 UI를 비판하고 수정 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L153.
예시
디자인 시스템 저장소 링크를 제공하여 IBM Carbon 등 특정 시스템의 디자인 토큰을 강제 적용하는 방식 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L124.
충돌
Figma MCP 등 디자인 툴에서 디자인 명세를 직접 코드로 컴파일하면 시각적 일관성이 깨질 위험이 있어 지양하고, 실제 코드로 된 디자인 시스템을 참조하는 것을 권장 raw/How to Design a Production-Ready Dashboard with Claude Code.md#L141.