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

``bash


Install globally


npm install -g @phenikaax/aiot-ui-cli
`

💻 Usage

$3

`bash


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
`

$3

`bash


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"
`

$3

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

🎯 How It Works

$3

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

$3

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

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

$3

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

$3

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

$3

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: minhphuongitst@gmail.com
- 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.