AIOT-UI CLI

AI-powered design intelligence for building professional React/Next.js applications with Tailux UI Kit

AIOT-UI CLI provides intelligent design recommendations and code generation based on the Tailux UI Kit template. It automatically analyzes your requirements and generates tailored design systems with production-ready code.

✨ Features

• 🎨 57+ UI Components - Complete Tailux component library with variants
• 📐 3 Layout Patterns - MainLayout, HorizontalNav, Sideblock
• 📄 20+ Page Templates - Dashboards, forms, tables, apps
• 🧠 100 Industry Rules - Specialized design recommendations for SaaS, Fintech, Healthcare, etc.
• 🎭 20 Color Themes - Light and dark themes
• 🔤 7 Font Pairings - Typography combinations with Google Fonts
• 🤖 AI Reasoning Engine - Automatic design system generation
• 🛠️ 11 AI Assistants - Support for Claude, Cursor, Copilot, and more

🚀 Installation

# Install globally
npm install -g @phenikaax/aiot-ui-cli

💻 Usage

Initialize for AI Assistant

# Navigate to your project
cd /path/to/your/project

# Initialize for your AI assistant
aiot-ui init --ai claude       # Claude Code
aiot-ui init --ai cursor       # Cursor
aiot-ui init --ai copilot      # GitHub Copilot
aiot-ui init --ai kiro         # Kiro
aiot-ui init --ai codex        # Codex CLI
aiot-ui init --ai antigravity  # Antigravity

Generate Design System

# Generate design system with ASCII output
aiot-ui generate "saas dashboard" -p "MyApp"

# Generate with Markdown output
aiot-ui generate "fintech banking" -f markdown

# Generate with JSON output
aiot-ui generate "ecommerce" -f json

# Persist design system to file
aiot-ui generate "SaaS dashboard" --persist -p "MyApp"

# Page-specific override
aiot-ui generate "checkout" --persist -p "MyApp" --page "checkout"

Other Commands

aiot-ui info              # Show package information
aiot-ui --version         # Show version
aiot-ui --help            # Show help

🎯 How It Works

1. Initialize

Run aiot-ui init --ai claude in your project directory. The CLI will:

• Create necessary folders for your AI assistant
• Copy skill files with design system data
• Copy Python scripts for design generation
• Configure everything automatically

2. Use Your AI Assistant

Simply chat naturally with your AI assistant:

Build a SaaS dashboard for analytics

Create a healthcare patient management form

Design a fintech trading dashboard with dark mode

Make an e-commerce product listing with filters

3. Get Results

The AI will automatically:

1. Analyze your requirements
2. Generate a tailored design system
3. Create production-ready code with Tailux components
4. Apply proper colors, typography, and layouts

📦 What's Included

Component Library

Complete set of Tailux components:

• Actions: Button
• Forms: Input, Select, Checkbox, Switch, Textarea, FileUpload
• Layout: Card, Divider, Box
• Data Display: Table, Badge, Avatar, Timeline, Circlebar, Carousel, Tag, Legend
• Feedback: Alert, Progress, Skeleton, Spinner
• Navigation: Dropdown, Pagination, Tabs, Steps
• Overlay: Modal, Tooltip, Drawer, Popover
• Disclosure: Accordion

Layout Patterns

• MainLayout: Traditional sidebar + header layout
• HorizontalNav: Top navigation bar layout
• Sideblock: Alternative sidebar with block navigation

Industry-Specific Rules

Specialized design recommendations for:

• SaaS - Clean, professional with trust indicators
• Fintech - Secure, trustworthy with clear data visualization
• Healthcare - Calming, accessible with emergency contacts
• E-commerce - Visual, streamlined checkout
• CRM - Pipeline-focused with activity tracking
• Developer Tools - Dark mode, comprehensive docs
• Web3/Crypto - Wallet-first, real-time monitoring
• And 13+ more industries

🎨 Design System Example

+----------------------------------------------------------------------------------------+
|  TARGET: MyApp - RECOMMENDED DESIGN SYSTEM                                              |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: MainLayout                                                                   |
|     Layout: Traditional sidebar + header layout with responsive design                 |
|                                                                                        |
|  THEME: INDIGO Primary                                                                 |
|     Light: slate                                                                       |
|     Dark: cinder                                                                       |
|                                                                                        |
|  TYPOGRAPHY: Inter Only                                                                |
|     Mood: Clean, consistent, modern                                                    |
|     Google Fonts: https://fonts.google.com/share?selection?family=...                  |
|                                                                                        |
|  KEY COMPONENTS: Card, Table, Circlebar, Progress, Badge                              |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     - Information overload                                                             |
|     - Poor data visualization                                                          |
|     - Slow loading                                                                     |
|                                                                                        |
+----------------------------------------------------------------------------------------+

📚 Documentation

For complete documentation, visit:

• GitLab: https://gitlab.phenikaax.com/aiot-platform/aiot-ui-skill
• Tailux UI Kit: https://tailux.piniastudio.com/

🔧 Supported Tech Stacks

• React / Next.js (default)
• HTML + TailwindCSS
• Vue / Nuxt.js
• SwiftUI / React Native / Flutter

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📝 License

MIT © Nguyen Minh Phuong

📧 Support

• Issues: GitLab Issues
• Email: [email protected]
• Facebook: MinhPhuong.VN18

Built with ❤️ by Nguyen Minh Phuong

Based on Tailux UI Kit - A versatile Admin and Webapp UI Kit built on React and TailwindCSS.