技能详情（站内镜像，无评论）
作者：datnguyenaioz @datnguyen26730
许可证：MIT-0
MIT-0 ·免费使用、修改和重新分发。无需归因。
版本：v1.0.0
统计：⭐ 0 · 316 · 0 current installs · 0 all-time installs
⭐ 0
安装量（当前） 0
🛡 VirusTotal ：良性 · OpenClaw ：良性
Package：datnguyen26730/aioz-ui-v3
安全扫描（ClawHub）
- VirusTotal ：良性
- OpenClaw ：良性
OpenClaw 评估
This is an instruction-only skill that provides mapping rules and reference docs to convert Figma MCP output into React code for the AIOZ UI V3 design system; its requirements and behavior are consistent with that purpose.
目的
The name/description (AIOZ UI V3 → code) matches the content: mapping rules, component API, color/typography/icon references. The skill does not request unrelated credentials, binaries, or config paths.
说明范围
SKILL.md and the reference files only instruct how to translate Figma MCP tokens/names into imports, props, Tailwind classes, and component usage. There are no instructions to read arbitrary host files, access environment variables, call external endpoints, or exfiltrate data.
安装机制
This is instruction-only with no install spec and no code/executable artifacts. The references mention package imports (e.g. @aioz-ui/core-v3, @aioz-ui/icon-react) but the skill itself does not attempt to download or install anything.
证书
The skill declares no required environment variables, credentials, or config paths. The references include project-local tsconfig/package.json examples (workspace references) that are reasonable for a component library but do not request secrets.
持久
always:false and default model invocation are used. The skill does not request permanent presence or modify other skills or system-wide settings.
综合结论
This skill is a set of authoring rules and reference docs—it won't run code or ask for secrets. Before using generated code in a real project, check the imports it produces: you will likely need to install packages such as @aioz-ui/core-v3 and @aioz-ui/icon-react from your package registry, so verify those packages and versions come from a trusted source. Also review the setup examples (they reference a monorepo/workspace layout and local path…
安装（复制给龙虾 AI）
将下方整段复制到龙虾中文库对话中，由龙虾按 SKILL.md 完成安装。
请把本段交给龙虾中文库（龙虾 AI）执行：为本机安装 OpenClaw 技能「AIOZ UI V3 Skills」。简介：Build UI components and pages using AIOZ UI V3 design system. Use this skill wh…。
请 fetch 以下地址读取 SKILL.md 并按文档完成安装：https://raw.githubusercontent.com/openclaw/skills/refs/heads/main/skills/datnguyen26730/aioz-ui-v3/SKILL.md
（来源：yingzhi8.cn 技能库）SKILL.md
---
name: aioz-ui-v3
description: Build UI components and pages using AIOZ UI V3 design system. Use this skill whenever the user wants to create, edit, or style React components using AIOZ UI tokens, Tailwind classes, color tokens, typography utilities, icons from @aioz-ui/icon-react, or chart components (LineChart, AreaChart, BarChart, DonutChart). Trigger on any task involving AIOZ UI components, design tokens like --sf-neu-block or --text-neu-bold, brand colors, typography classes (text-title-01, text-body-02), icon imports, data visualization, or translating Figma MCP output into production-ready code.
---
# 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` | `shape="circle"` | |
| `Shape=Square` | `shape="square"` | |
| `Shape=Default` | `shape="default"` | |
| `State=Default` | _(no prop)_ | Default render state |
| `State=Hover` | _(no prop)_ | CSS handles it |
| `State=Focused` | _(no prop)_ | CSS handles it |
| `State=Pressed` | _(no prop)_ | CSS handles it |
| `State=Disabled` | `disabled` | |
| `State=Loading` | `loading` | |
| `Icon Only=True` | `size="icon"` | Button only |
---
## Full Translation Example
Given this Figma MCP output:
```json
{
"name": "Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Default",
"fills": [{ "token": "Sf/Pri/Pri" }],
"textColor": "Onsf/Bra/Default",
"typography": "Button/01"
}
```
Translate to:
```tsx
import { Button } from '@aioz-ui/core-v3/components'
;<Button variant="primary" size="md" shape="square">
Label
</Button>
```
> Colors and typography are handled by `Button` internally. Apply color/typography classes manually only when building **custom layouts** outside of component primitives.
---
## Core Rules
1. **Token-first** — Never use raw Tailwind colors or sizing.
```
❌ text-gray-500 bg-white border-gray-200 text-sm font-medium
✅ text-content-sec bg-sf-screen border-border-neutral text-body-02
```
2. **Component-first** — Use design system primitives over custom divs. See Component Map above.
3. **Typography is atomic** — Each `text-*` class already encodes font-size, line-height, weight, and font-family. Never stack additional font utilities on top.
4. **Icons only from `@aioz-ui/icon-react`** — Never SVG literals, emoji, or other libraries.
```tsx
import { Search01Icon } from '@aioz-ui/icon-react'
;<Search01Icon size={16} className="text-icon-neutral" />
```
5. **On-surface text** — Text on a `bg-sf-*` surface must use the matching `text-onsf-*` class:
```
bg-sf-pri → text-onsf-text-pri
bg-sf-error-sec → text-onsf-text-error
bg-sf-neutral → text-onsf-text-neutral
```
6. **Charts** — Always import from `@aioz-ui/core/components` (not `-v3`). Always wrap in the card shell. Always provide both `categories` and `overwriteCategories`. Read `references/charts.md` before writing any chart code.
---
## Reference Files
Open the relevant file for deep-dive API docs, full token lists, and component examples:
| File | Open When |
| -------------------------- | ---------------------------------------------------------------------------------- |
| `references/colors.md` | Full token → Tailwind class tables for text, background, and border tokens |
| `references/typography.md` | Full `text-*` class list with font-size, weight, and line-height specs |
| `references/icons.md` | Icon name transformation rule, size guide, and common icon import list |
| `references/components.md` | Full props, all variants, and ready-to-use code examples for every component |
| `references/charts.md` | LineChart, AreaChart, BarChart, DonutChart — APIs, variants, legend, hidden-series |