wangdicoder · wangdicoder · Mar 25, 2026 · Mar 25, 2026 · Mar 25, 2026 · Mar 25, 2026
diff --git a/.changeset/add-cli-package.md b/.changeset/add-cli-package.md
@@ -0,0 +1,6 @@
+---
+"@tiny-design/cli": minor
+"@tiny-design/mcp": patch
+---
+
+Add @tiny-design/cli package for querying component metadata, docs, demos, tokens, and icons from the terminal. Extract shared extraction logic into internal @tiny-design/extract package. Add CLI docs page and reorganize Guide menu into grouped sections.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -13,5 +13,5 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["@tiny-design/docs"]
+  "ignore": ["@tiny-design/docs", "@tiny-design/extract"]
 }
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,10 @@ apps/docs/build
 .claude/*
 !.claude/skills/
 
+# Generated data
+packages/mcp/src/data
+packages/cli/src/data
+
 # Misc
 *.tgz
 *.log
diff --git a/apps/docs/guides/cli.md b/apps/docs/guides/cli.md
@@ -0,0 +1,165 @@
+# CLI
+
+`@tiny-design/cli` is an official command-line tool that brings Tiny Design component knowledge to your terminal. It ships all metadata locally — every prop, demo, token, and icon — queryable in milliseconds, fully offline.
+
+## Highlights
+
+- **Fully offline** — All metadata ships with the package. No network calls, no latency, no API keys.
+- **Agent-optimized** — `--format json` on every command. Structured output ready for AI tools.
+- **Bilingual** — Every component name and description has both English and Chinese. Switch with `--lang zh`.
+- **Smart matching** — Typo `Buttn`? The CLI suggests `Button` using fuzzy matching.
+
+## Install
+
+```bash
+npm install -g @tiny-design/cli
+```
+
+## Quick Start
+
+```bash
+tiny-design list                        # List all 80+ components by category
+tiny-design info Button                 # Component props, types, defaults
+tiny-design doc Select                  # Full markdown documentation
+tiny-design demo Button Type            # Runnable demo source code
+tiny-design token colors                # Design token values
+tiny-design icon arrow                  # Search icons by name
+tiny-design doctor                      # Diagnose project issues
+tiny-design usage ./src                 # Scan project for import stats
+```
+
+## Commands
+
+### Knowledge Query
+
+| Command | Description |
+|---------|-------------|
+| `tiny-design list [category]` | List all components grouped by category. Filter by: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
+| `tiny-design info <component>` | Props table with types, required flags, default values, and descriptions. |
+| `tiny-design doc <component>` | Full markdown documentation for a component. |
+| `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given. |
+| `tiny-design token [category]` | Design token values. Categories: colors, typography, spacing, breakpoints, shadows. |
+| `tiny-design icon [search]` | List all 240+ icons or search by name. |
+
+### Project Analysis
+
+| Command | Description |
+|---------|-------------|
+| `tiny-design doctor` | Diagnostic checks: package.json, React version, peer deps, TypeScript, duplicate React detection. |
+| `tiny-design usage [dir]` | Scan source files for `@tiny-design/react` imports. Shows component usage counts and file locations. |
+
+### Global Flags
+
+| Flag | Description | Default |
+|------|-------------|---------|
+| `--format json\|text\|markdown` | Output format | `text` |
+| `--lang en\|zh` | Output language | `en` |
+| `--detail` | Include extended information | `false` |
+
+## Examples
+
+### List components in a category
+
+```bash
+$ tiny-design list Foundation
+
+  Foundation
+
+   Component  | Description
+  ------------+----------------------------------------------
+   Button     | To trigger an operation.
+   Image      | The Image component is used to display images.
+   Link       | Displays a hyperlink.
+   Typography | Basic text writing, including headings, ...
+
+  4 components total
+```
+
+### Get component props (JSON for AI tools)
+
+```bash
+$ tiny-design info Modal --format json
+{
+  "name": "Modal",
+  "category": "Feedback",
+  "description": "Modal dialogs.",
+  "props": [
+    {
+      "name": "visible",
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the modal is visible"
+    },
+    ...
+  ]
+}
+```
+
+### Search icons
+
+```bash
+$ tiny-design icon arrow
+
+  Icons matching "arrow" (16 found)
+
+  • IconArrowRight
+  • IconArrowUp
+  • IconArrowLeft
+  • IconArrowDown
+  ...
+```
+
+### View a demo
+
+```bash
+$ tiny-design demo Button Type
+
+  Button / Type
+
+import React from 'react';
+import { Button, Flex } from '@tiny-design/react';
+
+export default function TypeDemo() {
+  return (
+    <Flex gap="sm">
+      <Button>Default</Button>
+      <Button btnType="primary">Primary</Button>
+      <Button btnType="outline">Outline</Button>
+    </Flex>
+  );
+}
+```
+
+### Diagnose project setup
+
+```bash
+$ tiny-design doctor
+
+  Tiny Design Doctor
+
+  ✓ package.json: Found
+  ✓ @tiny-design/react: v1.6.1 installed
+  ✓ React version: v18.3.1
+  ✓ TypeScript: v5.4.5
+  ✓ Peer dependencies: react-dom found
+  ✓ Duplicate React: No duplicates found
+
+  All checks passed!
+```
+
+## Usage with AI Tools
+
+The CLI is designed to work seamlessly with AI coding assistants. Use `--format json` for structured output:
+
+```bash
+# Get component info as JSON for an AI agent
+tiny-design info DatePicker --format json
+
+# List all icons as JSON
+tiny-design icon --format json
+
+# Get design tokens as JSON
+tiny-design token colors --format json
+```
+
+For a richer AI integration that works inside your editor, check out the [MCP Server](/guide/mcp-server) which provides the same data through the Model Context Protocol.
diff --git a/apps/docs/guides/cli.zh_CN.md b/apps/docs/guides/cli.zh_CN.md
@@ -0,0 +1,165 @@
+# CLI
+
+`@tiny-design/cli` 是官方命令行工具，将 Tiny Design 组件知识带到你的终端。所有元数据随包附带——每个属性、演示、令牌和图标——毫秒级查询，完全离线。
+
+## 特性
+
+- **完全离线** — 所有元数据随包附带，无需网络请求、无延迟、无需 API 密钥。
+- **AI 友好** — 所有命令支持 `--format json` 输出，结构化数据适配 AI 工具。
+- **双语支持** — 所有组件名称和描述同时提供中英文，使用 `--lang zh` 切换。
+- **智能匹配** — 输错 `Buttn`？CLI 会通过模糊匹配建议 `Button`。
+
+## 安装
+
+```bash
+npm install -g @tiny-design/cli
+```
+
+## 快速开始
+
+```bash
+tiny-design list                        # 列出所有 80+ 个组件（按分类）
+tiny-design info Button                 # 组件属性、类型、默认值
+tiny-design doc Select                  # 完整的 Markdown 文档
+tiny-design demo Button Type            # 可运行的演示源代码
+tiny-design token colors                # 设计令牌值
+tiny-design icon arrow                  # 按名称搜索图标
+tiny-design doctor                      # 诊断项目问题
+tiny-design usage ./src                 # 扫描项目中的导入统计
+```
+
+## 命令
+
+### 知识查询
+
+| 命令 | 描述 |
+|------|------|
+| `tiny-design list [category]` | 按分类列出所有组件。可筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
+| `tiny-design info <component>` | 属性表，包含类型、是否必填、默认值和描述。 |
+| `tiny-design doc <component>` | 组件的完整 Markdown 文档。 |
+| `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。 |
+| `tiny-design token [category]` | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。 |
+| `tiny-design icon [search]` | 列出所有 240+ 个图标或按名称搜索。 |
+
+### 项目分析
+
+| 命令 | 描述 |
+|------|------|
+| `tiny-design doctor` | 诊断检查：package.json、React 版本、对等依赖、TypeScript、重复 React 检测。 |
+| `tiny-design usage [dir]` | 扫描源文件中的 `@tiny-design/react` 导入，显示组件使用次数和文件位置。 |
+
+### 全局参数
+
+| 参数 | 描述 | 默认值 |
+|------|------|--------|
+| `--format json\|text\|markdown` | 输出格式 | `text` |
+| `--lang en\|zh` | 输出语言 | `en` |
+| `--detail` | 显示扩展信息 | `false` |
+
+## 示例
+
+### 按分类列出组件
+
+```bash
+$ tiny-design list Foundation --lang zh
+
+  Foundation
+
+   Component  | Description
+  ------------+----------------------------------------------
+   Button     | 用于触发一个操作。
+   Image      | Image 组件用于显示图片。
+   Link       | 显示超链接。
+   Typography | 基本的文字排版，包括标题、正文、列表等。
+
+  4 components total
+```
+
+### 获取组件属性（JSON 格式，适合 AI 工具）
+
+```bash
+$ tiny-design info Modal --format json
+{
+  "name": "Modal",
+  "category": "Feedback",
+  "description": "Modal dialogs.",
+  "props": [
+    {
+      "name": "visible",
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the modal is visible"
+    },
+    ...
+  ]
+}
+```
+
+### 搜索图标
+
+```bash
+$ tiny-design icon arrow
+
+  Icons matching "arrow" (16 found)
+
+  • IconArrowRight
+  • IconArrowUp
+  • IconArrowLeft
+  • IconArrowDown
+  ...
+```
+
+### 查看演示
+
+```bash
+$ tiny-design demo Button Type
+
+  Button / Type
+
+import React from 'react';
+import { Button, Flex } from '@tiny-design/react';
+
+export default function TypeDemo() {
+  return (
+    <Flex gap="sm">
+      <Button>Default</Button>
+      <Button btnType="primary">Primary</Button>
+      <Button btnType="outline">Outline</Button>
+    </Flex>
+  );
+}
+```
+
+### 诊断项目配置
+
+```bash
+$ tiny-design doctor
+
+  Tiny Design Doctor
+
+  ✓ package.json: Found
+  ✓ @tiny-design/react: v1.6.1 installed
+  ✓ React version: v18.3.1
+  ✓ TypeScript: v5.4.5
+  ✓ Peer dependencies: react-dom found
+  ✓ Duplicate React: No duplicates found
+
+  All checks passed!
+```
+
+## 与 AI 工具配合使用
+
+CLI 专为 AI 编程助手设计。使用 `--format json` 获取结构化输出：
+
+```bash
+# 以 JSON 格式获取组件信息
+tiny-design info DatePicker --format json
+
+# 以 JSON 列出所有图标
+tiny-design icon --format json
+
+# 以 JSON 获取设计令牌
+tiny-design token colors --format json
+```
+
+如需在编辑器内更丰富的 AI 集成体验，请查看 [MCP Server](/guide/mcp-server)，它通过 Model Context Protocol 提供相同的数据。