简介

面向 AI Agent

Name: UI Lab
Author: UI Lab

UI Lab 把整套视觉词汇暴露给 Agent——不只是组件，还有设计 token、图标、风格、配色、整套设计系统。两条路：给有 shell 的 Agent 用 ui-lab CLI 和 skill，或任意 Agent 直接调用 HTTP 端点。

CLI 与 skill

编码 Agent 最快的方式：ui-lab CLI 从终端发现并取用一切。bun link 后它在 PATH 上，或在仓库内跑 bun cli/src/index.ts。

Shellterminal

# `ui-lab` is on PATH after `bun link` (or run `bun cli/src/index.ts` in the repo)
ui-lab search "bottom sheet"     # find across every kind
ui-lab list --kind icon-motion   # browse one kind
ui-lab show pearl        # description, AI prompt, page URL, and the fetch block
ui-lab add bottom-sheet          # prints the shadcn install command (never runs it)
# add --json to any command for structured, agent-friendly output

ui-lab skill 打包了「何时来 UI Lab、怎么按类应用」——桥接到 Claude Code、Codex、通用 Agents 和 Grok。

端点

/catalog.jsoncatalog.json
整套词汇的结构化 JSON——组件、token、图标、风格、配色、设计系统。
打开
/llms.txtllms.txt
整套词汇的分组 Markdown 索引，每项带取用提示。
打开
/llms-full.txtllms-full.txt
每项的 prompt 或 token 块内联——一次拉取拿全部。
打开
/rRegistry index
所有组件的 JSON 目录。
打开
/r/{slug}Component detail
包含文件、依赖、源码的 JSON。
/r/{slug}.jsonshadcn item
包含内联文件内容的安装条目。
/r/{slug}/rawRaw source
可直接使用的纯文本 .tsx 源码。

Agent 流程

从 catalog 发现，再按类取用——组件走 shadcn 安装，其余都以内联 prompt 或 token 块给到。

TSagent.ts

// 1. Discover the whole vocabulary in one call
const { items } = await fetch('https://ui-lab-ten.vercel.app/catalog.json').then((r) => r.json());

// 2. Pick what you need, then fetch it by kind
const item = items.find((i) => i.slug === slug);

if (item.kind === 'component') {
  // components install through the shadcn registry
  await runShell(item.fetch.command.split(' '));
} else {
  // tokens, icons, styles, palettes, design systems arrive inline
  applyPromptOrTokens(item.fetch.value);
}

shadcn 流程

shadcn 条目会安装源码文件和依赖包。组件直接使用 shadcn 语义化颜色工具类，因此无需 UI Lab 专属的颜色变量即可继承目标应用的主题。

Shellterminal

# Registry namespace (after adding this registry to components.json)
npx shadcn@latest add @uilab/animated-toast-stack

# Direct URL, no namespace needed
npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-toast-stack.json

条目结构

内部辅助模块（例如 @/lib/utils）以 type: util 的形式内联提供，Agent 无需再追踪 import 依赖。

JSONr/swap.json

{
  "slug": "swap",
  "name": "Multi-chain Swap",
  "description": "Cross-chain swap widget with chain + token selectors, animated flip and quote.",
  "category": "motion",
  "page_url": "https://ui-lab-ten.vercel.app/components/motion/swap",
  "detail_url": "https://ui-lab-ten.vercel.app/r/swap",
  "raw_url": "https://ui-lab-ten.vercel.app/r/swap/raw",
  "dependencies": ["motion", "lucide-react", "react"],
  "internal": ["@/lib/utils"],
  "files": [
    { "path": "components/motion/swap.tsx", "type": "component", "content": "..." },
    { "path": "components/previews/motion/swap.preview.tsx", "type": "preview", "content": "..." },
    { "path": "lib/utils.ts", "type": "util", "content": "..." }
  ]
}