Communitygithub.com

creativetimofficial/ui

Creative Tim UI 组件库助手。用于添加、生成或修改来自 creative-tim.com/ui 的 UI 块/组件/页面。涵盖设计理念（极简主义、95% 法则、研究先行）、块探索、CLI 安装方法、PRO API 密钥设置以及 Creative Tim 设计规则（橙色品牌、shadcn/ui 基础、Tailwind v4）。生成的块精心设计且克制，而非堆砌。

ui 是什么？

该技能是为 Creative Tim UI 块库设计的综合助手，该库基于 shadcn/ui 构建，包含超过 390 个覆盖 40 多个类别的生产就绪 UI 块。它支持 Next.js (App Router)、Remix 和 Vite，所有块均使用 React + Tailwind CSS。该技能指导用户完成块的发现、安装（通过 Creative Tim CLI 或 shadcn CLI），以及 PRO 块的 API 密钥设置。其核心是有一套严格的设计理念：95% 法则（专注构建最常见用例）、‘Light’ 原则（少即是多）、研究先行（基于用户意图设计）以及基于 shadcn/ui 原语进行组合而非重新实现。技能还强制要求具体的设计规则，例如固定品牌色（橙色为主，避免 violet/purple/indigo）、Tailwind v4 编码约束（无任意值）、组件模式（优先使用 Card 结构、特定间距）以及水合安全性（避免在 useState 初始化中使用动态日期）。总之，该技能确保 AI 生成的 UI 代码符合 Creative Tim 的极简、实用且专业的设计标准，避免过度设计。

兼容平台✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/creativetimofficial/ui/tree/HEAD/skills/creative-tim-ui
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

Creative Tim UI

基于 shadcn/ui 构建的全面块库，提供 390 多个跨 40 多个类别的生产就绪块。所有块均为 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% 法则 —— 将常见用例做到极致。不要为极少出现的问题添加配置、抽象或灵活性。开发人员应该能够阅读一个块并立即理解它的用途。

“Light”原则 —— 一个块完成的标志是没有什么可以移除，而不是没有什么可以添加。质疑每一个 wrapper 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 代理ai-agents聊天界面、活动流、工具使用、转录
页面pages全页代理管理布局
账户account个人资料、设置、账单管理
身份验证authentication登录、注册、双因素认证流程
首屏hero着陆页首屏部分
定价pricing定价表和计费计划
图表charts数据可视化
KPIkpi指标卡片和仪表盘
统计stats统计部分
表格table带排序/筛选的数据表格
电子商务ecommerce产品列表、购物车、结账
博客blog文章列表、文章布局
推荐语testimonials社交证明部分
...[完整列表请查看 /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 — 通过 registry 配置设置 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] 或任何任意字号值

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-0，而非默认的 py-6）
  • 对任何可能溢出的列表使用 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

或者手动克隆并创建符号链接：

# 将技能目录克隆或复制到您的项目
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