Claude Code를 사용하여 세련된 관리자 대시보드를 구축했습니다 — Vercel의 Geist 디자인 시스템 + bklit 차트

저는 완전 반응형 관리자 대시보드인 Limns Admin을 구축했으며, 거의 모든 부분을 Claude Code로 만들었습니다.

이것은 무엇인가
Next.js 16 (App Router), React 19, Tailwind CSS v4, 그리고 Bun으로 구축된 프론트엔드 쇼케이스 대시보드입니다. Vercel의 Geist 디자인 시스템(라이트 + 다크 모드)을 구현하였으며, 데이터 시각화(data viz)를 위해 bklit 차트 라이브러리를 사용합니다 — 영역(area), 막대(bar), 도넛(donut), 깔때기(funnel), 레이더(radar), 게이지(gauge), 생키(sankey), 단계구분도(choropleth) 등을 포함합니다. 프론트엔드 전용이며, 실제 백엔드는 없고 모의(mock)/시드(seeded) 데이터만 사용합니다.

Claude Code가 어떻게 도움이 되었나

• Geist 디자인 토큰과 가이드라인을 전달하자, Claude Code는 이를 Tailwind v4 @theme 토큰 시스템(semantic + gray + accent 스케일)으로 변환하여 라이트/다크 테마가 자동으로 작동하도록 만들었습니다.
• App Router 구조와 앱 셸(사이드바 + 상단 바 브레드크럼)의 스캐폴딩(scaffolded)을 수행하여, 내비게이션을 위한 단일 진실 공급원(single source of truth)을 유지했습니다.
• 서버/클라이언트 컴포넌트 경계(server/client component boundary)를 준수하면서 bklit 차트 래퍼(wrapper)를 구성하고 이를 모의 데이터 레이어에 연결했습니다.
• 반복적인 다듬기(polish) 작업을 처리했습니다 — 모션 타이밍(motion timing), 포커스 링(focus rings), 대비(contrast), 그리고 Geist의 보이스 가이드라인을 따르는 카피(copy) 작업 등입니다.
• 제 작업의 대부분은 검토, 조종(steering), 그리고 피드백을 주는 것이었으며, Claude Code가 코드베이스 전반에 걸쳐 구현의 대부분을 수행했습니다.

무료로 체험해 보세요
이 프로젝트는 무료이며 오픈 소스(MIT)입니다. 브라우저에서 라이브 데모를 열거나, 저장소(repo)를 클론한 후 로컬에서 bun install && bun run dev를 실행해 보세요 — 가입도 필요 없고, 유료 티어도 없습니다.

라이브 데모: https://limns-admin.vercel.app
GitHub: https://github.com/Franvy/limns-admin

submitted by /u/OwnAssistance1469
[link] [comments]