aioz-ui-v3
使用AIOZ UI V3设计系统构建UI组件和页面。每当用户想要使用 AIOZ UI 令牌、Tailwind 类、颜色令牌、版式实用程序、@aioz-ui/icon-react 中的图标或图表组件（LineChart、AreaChart、BarChart、DonutChart）创建、编辑或设计 React 组件样式时，请使用此技能。触发涉及 AIOZ UI 组件、设计标记（如 --sf-neu-block 或 --text-neu-bold）、品牌颜色、排版类（text-title-01、text-body-02）、图标导入、数据可视化或将 Figma MCP 输出转换为生产就绪代码的任何任务。
安装 / 下载方式
TotalClaw CLI推荐
totalclaw install totalclaw:totalclaw~datnguyen26730-aioz-ui-skillscURL直接下载，无需登录
curl -fsSL https://skills.taituai.com/api/skills/totalclaw%3Atotalclaw~datnguyen26730-aioz-ui-skills/file -o datnguyen26730-aioz-ui-skills.md## 概述（中文）
使用AIOZ UI V3设计系统构建UI组件和页面。每当用户想要使用 AIOZ UI 令牌、Tailwind 类、颜色令牌、版式实用程序、@aioz-ui/icon-react 中的图标或图表组件（LineChart、AreaChart、BarChart、DonutChart）创建、编辑或设计 React 组件样式时，请使用此技能。触发涉及 AIOZ UI 组件、设计标记（如 --sf-neu-block 或 --text-neu-bold）、品牌颜色、排版类（text-title-01、text-body-02）、图标导入、数据可视化或将 Figma MCP 输出转换为生产就绪代码的任何任务。
## 原文
# AIOZ UI V3 — Figma MCP → Code Mapping Skill
This skill defines exactly how to translate **Figma MCP output** into production React code using the AIOZ UI V3 design system.
> **Rule #1:** Never guess token names or class names. Always follow the mapping tables below.
---
## How Figma MCP Returns Data
When the Figma MCP agent inspects a node, it returns values in these formats:
| Data Type | Figma MCP Example | Action |
| -------------- | --------------------------------------------------- | --------------------------------------- |
| Color / fill | `Onsf/Error/Default`, `Sf/Pri/Pri` | → Look up in `references/colors.md` |
| Typography | `Button/01`, `Body/02`, `Subheadline/01` | → Look up in `references/typography.md` |
| Icon layer | `icon/24px/outline/wallet-01` | → Look up in `references/icons.md` |
| Component name | `Button/Primary`, `Badge/Success`, `Fields/Default` | → See **Component Map** below |
| Variant string | `Type=Primary, Size=Medium, Shape=Square` | → See **Variant → Prop Map** below |
| Variable value | `"Onsf/Bra/Default": "#121212"` | Slash-path format, never CSS `--var` |
| Setup / config | Project configuration questions | → Look up in `references/setup.md` |
> ⚠️ Figma MCP always returns token names with **slash separators** like `Onsf/Error/Default`.
> It does **NOT** return CSS custom property format like `--onsf-error-default`.
---
## ⚠️ Two Import Paths — Never Mix Them
```tsx
// Charts — @aioz-ui/core/components
import {
LineChart,
AreaChart,
BarChart,
DonutChart,
CustomLegend,
Separator,
useSeriesVisibility,
} from '@aioz-ui/core/components'
// All other UI components — @aioz-ui/core-v3/components
import {
Button,
Input,
Badge,
Table,
Header,
Body,
Row,
HeadCell,
Cell,
} from '@aioz-ui/core-v3/components'
// Icons — @aioz-ui/icon-react (always PascalCase + "Icon" suffix)
import { Search01Icon, Plus01Icon, Wallet01Icon } from '@aioz-ui/icon-react'
```
---
## Component Map
**Input:** Figma MCP `name` field on a symbol/instance node
**Output:** React component to use
| Figma Node Name Pattern | React Component | Import |
| ----------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `Button/*` | `Button` | `import { Button } from '@aioz-ui/core-v3/components'` |
| `Fields/*` | `Input` | `import { Input } from '@aioz-ui/core-v3/components'` |
| `Badge/*` | `Badge` | `import { Badge } from '@aioz-ui/core-v3/components'` |
| `Tag/*` | `Tag` | `import { Tag } from '@aioz-ui/core-v3/components'` |
| `Card/*` | `Card` | `import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@aioz-ui/core-v3/components'` |
| `Toggle/*` | `Switch` | `import { Switch } from '@aioz-ui/core-v3/components'` |
| `Checkbox/*` | `Checkbox` | `import { Checkbox } from '@aioz-ui/core-v3/components'` |
| `Tooltips/*` | `Tooltip` | `import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@aioz-ui/core-v3/components'` |
| `Tabs/*` | `Tabs` | `import { Tabs, TabsList, TabsTrigger, TabsContent } from '@aioz-ui/core-v3/components'` |
| `Table/*` | `Table` | `import { Table, Header, Body, Row, HeadCell, Cell } from '@aioz-ui/core-v3/components'` |
| `Separator/*` | `Separator` | `import { Separator } from '@aioz-ui/core-v3/components'` |
| `Pagination item/*` | `PaginationGroup` | `import { PaginationGroup } from '@aioz-ui/core-v3/components'` |
| `Progress bar/*` | `Progress` | `import { Progress } from '@aioz-ui/core-v3/components'` |
| `Slider/*` | `Slider` | `import { Slider } from '@aioz-ui/core-v3/components'` |
| `Upload file/*` | `UploadFile` | `import { UploadFile } from '@aioz-ui/core-v3/components'` |
| `Menu item/*` | `MenuItem` | `import { MenuItem } from '@aioz-ui/core-v3/components'` |
| `Dropdown item/*` | `DropdownMenu` | `import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@aioz-ui/core-v3/components'` |
| `Modal/*` | `Dialog` | `import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@aioz-ui/core-v3/components'` |
| `Block/*` | `Block` | `import { Block } from '@aioz-ui/core-v3/components'` |
| `IconBadge/*` | `IconBadge` | `import { IconBadge } from '@aioz-ui/core-v3/components'` |
| `Message/*` | `Message` | `import { Message } from '@aioz-ui/core-v3/components'` |
| `Breadcrumb/*` | `Breadcrumb` | `import { Breadcrumb } from '@aioz-ui/core-v3/components'` |
| `Date picker/*` | `DatePicker` | `import { DatePicker } from '@aioz-ui/core-v3/components'` |
---
## Variant → Prop Map
Figma MCP encodes variants as comma-separated `Key=Value` pairs in the node name:
```
"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Hover"
```
| Figma Variant | React Prop | Notes |
| ----------------------------- | --------------------- | -------------------- |
| `Type=Primary` | `variant="primary"` | |
| `Type=Secondary` | `variant="secondary"` | |
| `Type=Neutral` | `variant="neutral"` | |
| `Type=Text` | `variant="text"` | |
| `Type=Danger` / `Danger=True` | `variant="danger"` | |
| `Size=Large` | `size="lg"` | |
| `Size=Medium` | `size="md"` | |
| `Size=Small` | `size="sm"` | |
| `Shape=Circle`