Communitygithub.com

Creative Tim UI

Creative Tim UI 블록 라이브러리 도우미입니다. creative-tim.com/ui에서 UI 블록/컴포넌트/페이지를 추가, 생성 또는 수정할 때 사용합니다. 디자인 철학(미니멀리즘, 95% 규칙, 연구 우선), 블록 검색, 두 가지 CLI 설치 방법, PRO API 키 설정, Creative Tim 디자인 규칙(오렌지 브랜드, shadcn/ui 기반, Tailwind v4)을 다룹니다. 최대한이 아닌 의도적이고 절제된 블록을 생성합니다.

Creative Tim UI란 무엇인가요?

Creative Tim UI 스킬은 40개 이상의 카테고리에서 390개 이상의 프로덕션 준비가 완료된 블록을 제공하는 포괄적인 UI 블록 라이브러리입니다. 모든 블록은 React + Tailwind CSS로 구축되었으며, Next.js(App Router), Remix, Vite와 호환됩니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트와 함께 사용하도록 설계되어, 설치, 사용자 정의 및 새로운 블록 생성 시 Creative Tim의 디자인 시스템을 자동으로 적용합니다. 핵심 디자인 철학은 '95% 규칙'으로, 자주 사용되는 일반적인 사례를 뛰어나게 구축하고 불필요한 구성이나 추상화를 피합니다. 또한 '빛(Light) 원칙'에 따라 불필요한 요소를 모두 제거할 때까지 블록을 완성된 것으로 간주하지 않습니다. 이 스킬은 shadcn/ui 프리미티브(Card, Table, Button, Badge) 위에 구축되어 있으며, Creative Tim의 기여는 이러한 프리미티브의 구성과 판단에 있습니다. PRO 블록은 API 키가 필요하며, 이 스킬은 키 설정 및 인증을 안내합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/creativetimofficial/ui/tree/HEAD/skills/creative-tim-ui
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Creative Tim UI은(는) 무엇을 하나요?

shadcn/ui를 기반으로 구축된 포괄적인 블록 라이브러리로, 40개 이상의 카테고리에서 390개 이상의 프로덕션 준비가 완료된 블록을 제공합니다. 모든 블록은 React + Tailwind CSS이며, Next.js(App Router), Remix 및 Vite와 호환됩니다.

전체 라이브러리 둘러보기: https://www.creative-tim.com/ui AI 읽기 가능 인덱스: https://www.creative-tim.com/ui/llms.txt

이 스킬 설치하기

# skills CLI를 통해 설치 (권장)
npx skills add creativetimofficial/ui

# 전역 설치 (모든 프로젝트에서 사용 가능)
npx skills add creativetimofficial/ui -g

# 특정 에이전트에만 설치
npx skills add creativetimofficial/ui --agent claude-code

스킬 페이지: https://skills.sh/creativetimofficial/ui/creative-tim-ui

디자인 철학

300개 이상의 제품과 카테고리에 걸쳐 Creative Tim은 동일한 규율을 적용했습니다. 개발자가 실제로 필요로 하는 것을 식별하고, 그것을 뛰어나게 구축하며, 나머지는 모두 제거하는 것입니다. 이러한 절제가 라이브러리의 핵심입니다.

블록을 생성하거나 수정할 때는 다음 원칙을 따르세요:

95% 규칙 — 일반적인 경우를 뛰어나게 구축하세요. 드물게 발생하는 문제를 위해 구성, 추상화 또는 유연성을 추가하지 마세요. 개발자가 블록을 읽고 즉시 무엇을 하는지 이해할 수 있어야 합니다.

"빛" 원칙 — 블록은 추가할 것이 없을 때가 아니라 제거할 것이 없을 때 완성됩니다. 모든 래퍼 div, 모든 prop, 모든 애니메이션, 모든 아이콘에 의문을 제기하세요. 블록이 그것 없이도 작동한다면, 아마 그래야 합니다.

렌더링 전 연구 — 이 화면을 보고 있는 사람이 무엇을 하려고 하는지 물어보세요. 대시보드는 누군가가 조치를 취해야 하는 숫자를 표면에 드러냅니다. 양식은 가장 적은 저항으로 정보를 수집합니다. 표면이 아닌 목적을 향해 디자인하세요.

기반 위에 구축 — shadcn/ui 프리미티브(Card, Table, Button, Badge)는 잘 설계되고 유지 관리됩니다. 이를 구성하고, 다시 구현하지 마세요. Creative Tim의 기여는 프리미티브 자체가 아니라 구성과 판단에 있습니다.

데모용이 아닌 실제 사용 — 기준은 다음과 같습니다. 실제 팀이 프로덕션 앱에서 이것을 출시할까요? 정보를 전달하지 않는 시각적 복잡성은 피하세요. 의사소통이 장식보다 항상 우선합니다.

전체 세부 사항과 코드 예제: rules/brand-philosophy.md

적용 시기

다음과 같은 경우 이 스킬을 사용하세요:

  • 프로젝트에 Creative Tim UI 블록을 설치하거나 사용자 정의할 때
  • Creative Tim의 디자인 시스템과 일치해야 하는 새 블록을 생성할 때
  • 생성된 UI 코드를 브랜드/스타일 준수 여부로 검토할 때
  • 프리미엄 블록에 대한 PRO API 키 액세스를 설정할 때
  • Creative Tim UI 라이브러리를 사용하도록 새 프로젝트를 온보딩할 때

블록 카테고리

카테고리슬러그설명
AI Agentsai-agents채팅 인터페이스, 활동 피드, 도구 사용, 전사
Pagespages전체 페이지 에이전트 관리 레이아웃
Accountaccount프로필, 설정, 결제 관리
Authenticationauthentication로그인, 회원가입, 2FA 흐름
Herohero랜딩 페이지 히어로 섹션
Pricingpricing가격표 및 요금제
Chartscharts데이터 시각화
KPIkpi지표 카드 및 대시보드
Statsstats통계 섹션
Tablestable정렬/필터링 기능이 있는 데이터 테이블
Ecommerceecommerce제품 목록, 장바구니, 체크아웃
Blogblog아티클 목록, 포스트 레이아웃
Testimonialstestimonials사회적 증명 섹션
...[전체 목록은 /ui/llms.txt 참조]

블록 설치하기

두 가지 방법이 완전히 지원됩니다. 설정에 맞는 방법을 선택하세요.

옵션 1 — Creative Tim CLI (권장)

npx @creative-tim/ui@latest add <block-name>

먼저 새 프로젝트를 초기화합니다 (Next.js / Vite / Remix / Astro 자동 감지):

npx @creative-tim/ui@latest init

예시:

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

이 패키지는 명명된 바이너리(creative-tim-ui, creative-tim)도 제공합니다. 동일한 명령어입니다:

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

옵션 2 — shadcn CLI (전체 URL)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

예시:

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

두 방법 모두 컴포넌트 소스를 프로젝트에 복사하고 필요한 모든 shadcn/ui 프리미티브(Button, Card, Badge 등)를 자동으로 설치합니다.

PRO 블록 (API 키)

일부 블록은 PRO로 표시되어 있으며 Creative Tim API 키가 필요합니다. **https://www.creative-tim.com/ui**에서 무료 키를 받을 수 있습니다.

설정

환경에 키를 추가하세요:

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

CLI 중 하나를 사용할 때 키를 전달하세요:

# Creative Tim CLI
npx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY

# shadcn CLI — 레지스트리 구성을 통해 Authorization 헤더 설정

또는 Creative Tim CLI 구성을 통해 전역으로 설정하세요:

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

키를 설정하면 PRO 블록은 무료 블록과 동일하게 설치됩니다.

디자인 규칙

전체 세부 사항은 개별 규칙 파일을 참조하세요. 빠른 요약:

브랜드 색상

  • 주요 악센트: 오렌지(orange-500 / orange-600) — Creative Tim의 브랜드 색상
  • 악센트 색상으로 violet, purple 또는 indigo를 절대 사용하지 마세요. 이는 AI 생성 기본값을 나타냅니다.
  • 중립 표면: slate, gray, zinc
  • 상태: emerald(성공), amber(경고), red(오류), blue(정보)

타이포그래피

  • 모든 읽을 수 있는 본문 콘텐츠(레이블, 설명, 테이블 셀, 목록 항목)에는 text-sm 사용
  • text-xs는 다음에만 사용: 아바타 이니셜, font-mono 타임스탬프, 배지 알약(상태/우선순위), 사이드바 그룹 헤더(대문자 + tracking-wider), 작은 h-6/h-7 액션 버튼
  • text-[10px], text-[11px] 또는 임의의 font-size 값은 절대 사용하지 마세요.

Tailwind v4 — 임의 값 없음

  • 간격/크기 조정에는 숫자 스케일 사용: h-8, w-12, gap-3, p-4 — h-[32px] 사용 금지
  • 너비에는 표준 분수 사용: max-w-sm, max-w-2xl, w-1/2 — max-w-[85%] 사용 금지
  • 반응형 중단점만 사용: sm:, md:, lg:, xl: — [@media(min-width:640px)]: 사용 금지

컴포넌트 패턴

  • 콘텐츠 그룹화에는 Card > CardHeader + CardContent 선호
  • KPI / 통계 카드: CardContent className="px-4 py-0" (기본 py-6 대신 py-0)
  • 오버플로우될 수 있는 목록에는 ScrollArea 사용
  • 사이드바 탐색: 64(w-64), border-r, bg-muted/30
  • 인라인 style={{}} 사용 금지 — 항상 Tailwind 클래스 사용

하이드레이션 안전

  • useState 초기화 프로그램에서 new Date(), Date.now() 또는 toLocaleTimeString()을 절대 사용하지 마세요.
  • SSR 안전 초기 상태에는 정적/하드코딩된 문자열을 사용하고, useEffect / setInterval 내부에서 라이브 값으로 전환하세요.

전체 디자인 가이드

전체 규칙과 코드 예제는 다음을 참조하세요: AGENTS.md

개별 규칙:

rules/install-blocks.md     — CLI 설치 과정
rules/pro-api-key.md        — PRO 키 설정 및 인증
rules/design-brand.md       — 브랜드 색상 및 아이덴티티
rules/tailwind-rules.md     — Tailwind v4 코딩 제약 조건
rules/component-patterns.md — 선호되는 컴포넌트 패턴
rules/hydration-safety.md   — SSR/CSR 하이드레이션 규칙

이 스킬 배포하기

이 스킬은 .claude/skills/creative-tim-ui/ 저장소에 있습니다. 누구든지 다음 명령을 실행하여 자신의 Claude Code 설정에 설치할 수 있습니다:

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

또는 수동으로 클론 및 심볼릭 링크:

# skills 디렉토리를 프로젝트에 복사 또는 복제
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

설치가 완료되면 해당 프로젝트 내 모든 Claude Code 세션에서 /creative-tim-ui 스킬을 사용할 수 있습니다.

관련 스킬

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