An automated bridge for converting Figma MCP design data into production-ready React components using the AIOZ UI V3 design system.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install aioz-ui-v3
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install aioz-ui-v3 using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is AIOZ UI V3 Design System Skill?
The AIOZ UI V3 skill is a specialized tool designed for AI coding agents to accurately interpret and implement UI designs. It provides a strict mapping framework that translates Figma MCP slash-path tokens and variant strings directly into React props and design-system-compliant Tailwind classes. This ensures high-fidelity code generation that matches the brand's specific design tokens for colors, typography, and iconography.
By utilizing Openclaw Skills, developers can automate the repetitive task of UI implementation while maintaining architectural integrity. The skill enforces strict rules around component imports and token usage, preventing the guessing of styles and ensuring consistent use of the AIOZ UI library.
AIOZ UI V3 Design System Skill Use Cases
- Converting Figma symbol instances into functional React components.
- Automatically applying design tokens for colors and typography to custom layouts.
- Implementing complex data visualizations using AIOZ UI chart components.
- Ensuring design system compliance across large-scale frontend projects using Openclaw Skills.
How AIOZ UI V3 Design System Skill Works
- Receive raw design data from a Figma MCP agent, including layer names and slash-path tokens.
- Analyze component names and variant strings like Type=Primary or Size=Medium to identify the correct React component and props.
- Map Figma color and typography tokens to the appropriate Tailwind CSS utility classes defined in the design system.
- Generate the React component code with optimized imports from @aioz-ui/core-v3/components or @aioz-ui/core/components.
- Apply final styling rules, such as on-surface text logic, to ensure visual consistency.
AIOZ UI V3 Design System Skill Setup
To integrate this skill into your environment, ensure you have the AIOZ UI packages installed in your React project.
npm install @aioz-ui/core-v3 @aioz-ui/core @aioz-ui/icon-react
Configure your AI agent to reference the SKILL.md rules and the provided reference files to ensure accurate token mapping within Openclaw Skills.
AIOZ UI V3 Design System Skill Data Schema & Taxonomy
The skill organizes data mapping through structured tables that correlate Figma attributes to React implementation details:
| Category | Source Data (Figma) | Target Implementation (React) |
|---|---|---|
| Components | Node Name Pattern (e.g., Button/*) | Component Name & Import Path |
| Variants | Key=Value pairs | Prop names (e.g., variant, size, shape) |
| Colors | Slash-path tokens (Sf/Pri/Pri) | Tailwind Classes (text-content-sec) |
| Icons | Path strings (icon/24px/...) | PascalCase Icon Components |
AIOZ UI V3 Design System Skill Advanced Features
- Intelligent variant-to-prop mapping for complex Figma component states.
- Multi-library import management segregating V3 components from legacy chart components.
- Atomic typography enforcement to prevent CSS utility bloat.
- Automated on-surface color logic for accessible UI contrast.
- Seamless integration with Openclaw Skills for automated frontend development.
SKILL.md
Loading
Related Openclaw Skills
AIOZ UI V3 Figma-to-Code
A specialized developer tool for mapping Figma design tokens and components directly to the AIOZ UI V3 React framework.
XML Reader for Construction Data
A specialized Python-based parser designed to convert complex construction industry XML files into structured pandas DataFrames.
Weather API for Construction
A Python-powered weather intelligence tool designed specifically for construction site risk management and schedule optimization.
Validation Rules Builder
A Python-based rule engine designed to validate construction data, ranging from BIM metadata to cost codes and schedule IDs.
Sentry Issue Tracker
A specialized tool for fetching and analyzing Sentry error reports and stack traces directly within AI agent workflows.
Agent Contact Card
A standardized, vCard-like format for publishing and discovering how AI agents can be contacted across different platforms.
Featured*
