UI Pro Forge

🇺🇸 English (top)  ·  🇮🇷 فارسی (پایین)  ·  🇨🇳 简体中文

The design-intelligence skill for AI coding agents. Give Claude Code, Cursor, and 15+ other AI assistants a searchable, offline database of professional UI/UX knowledge — 85 UI styles, 193 color palettes, 74 font pairings, and stack-specific guidelines for 21 frameworks — so the code they generate actually looks designed, not defaulted.

Why this exists: AI agents are great at writing components but reach for the same generic Tailwind gray every single time. UI Pro Forge gives your agent a curated design brain it can query before it writes a line of code — matched to your industry, your stack, and WCAG accessibility rules.

# One command — works with Claude Code, Cursor, Windsurf, and more
npx ui-pro-forge-cli init --ai claude

Left: a plain AI agent's generic defaults　·　Right: the same page with UI Pro Forge — designed and on-brand.

---

🌟 What This Fork Adds

UI Pro Forge is an independently maintained, streamlined build focused on real-world, multilingual product design. Value it adds on top of a stock design database:

Added value	Why it matters
🇮🇷 First-class RTL support	A dedicated Persian Modern / RTL-Native style + Persian Turquoise & Terracotta palette — most design skills only think left-to-right. Build fully Persian/Arabic products, not mirrored LTR templates.
⚡ SolidJS stack	Added stack-specific guidelines for SolidJS (signals, stores, control-flow) — reactive-framework coverage the original didn't have.
🧹 Leaner framework set	Dropped legacy Windows-only stacks (WPF, UWP) so recommendations stay focused on frameworks people actually ship today.
🔒 Zero telemetry, fully offline	Pure-Python BM25 search, no API keys, no network calls — safe to run inside any agent sandbox.
📦 One-command install	Published to npm as ui-pro-forge-cli; works with 15+ AI assistants out of the box.

🇮🇷 ⭐ Built for Persian / RTL — the standout feature

Unlike design skills that only reason left-to-right, UI Pro Forge treats right-to-left as a first-class citizen:

• 🎨 "Persian Modern / RTL-Native" style — full RTL layout with CSS logical properties, correct directional-icon flipping, and Persian fonts (Vazirmatn / IRANSans).
• 🏛 "Persian Turquoise & Terracotta" palette — colors drawn from Iranian tilework and architecture (turquoise, terracotta, saffron, indigo), WCAG-verified.

Your AI agent can build a genuinely Persian, right-to-left storefront or dashboard — not a mirrored LTR afterthought.

Example storefront generated with the Persian RTL style & Iranian palette — full RTL layout, Persian numerals, Vazirmatn typography.

---

✨ Features

• 85 UI Styles — Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, Persian Modern / RTL-Native, and more.
• 193 Color Palettes — Industry-aligned palettes, including a Persian Turquoise & Terracotta set inspired by Iranian tilework.
• 74 Font Pairings — Curated typography with ready-to-use Google Fonts imports.
• 21 Tech Stacks — React, Next.js, Vue, Svelte, SolidJS, Astro, Nuxt.js, Nuxt UI, Angular, Laravel, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Three.js, JavaFX, WinUI 3, Avalonia, Uno Platform.
• 25 Chart Types — Recommendations for dashboards and analytics.
• 98 UX Guidelines — Best practices, anti-patterns, and accessibility rules.
• Offline BM25 search engine — Pure Python standard library. No API keys, no network calls, no telemetry.

A few of the 85 built-in styles — including the Persian RTL style.

Industry-aligned palettes, all WCAG-checked — plus the signature Persian set.

🚀 Installation

Recommended — no install needed

Run it straight from npm with npx (nothing to install, always the latest version):

# Initialize for your assistant (run inside your project)
npx ui-pro-forge-cli init --ai claude      # Claude Code
npx ui-pro-forge-cli init --ai cursor      # Cursor
npx ui-pro-forge-cli init --ai windsurf    # Windsurf
npx ui-pro-forge-cli init --ai copilot     # GitHub Copilot
npx ui-pro-forge-cli init --ai all         # Every supported assistant

Install once for all projects (writes to your home directory instead of the current project):

npx ui-pro-forge-cli init --ai claude --global   # → ~/.claude/skills/
npx ui-pro-forge-cli init --ai cursor --global   # → ~/.cursor/skills/

Other commands:

npx ui-pro-forge-cli update              # Refresh skill files
npx ui-pro-forge-cli uninstall           # Remove the skill
npx ui-pro-forge-cli uninstall --global  # Remove the global install

Prerequisite: Python 3.x (standard library only — the scripts install nothing and make no network calls). Install it yourself from python.org if it's missing.

💡 Usage

The skill activates automatically when you ask for UI/UX work — just chat naturally:

Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a Persian (RTL) storefront with a warm palette
Make a mobile app UI for e-commerce in Flutter

How it works:

1. You ask for any UI/UX task (build, design, review, improve).
2. The reasoning engine matches your product type to styles, palettes, and typography.
3. It returns a complete, tailored design system — colors, fonts, spacing, effects.
4. Your agent implements it with accessibility and anti-pattern checks baked in.

Supported stacks

Category	Stacks
Web (HTML)	HTML + Tailwind (default)
React	React, Next.js, shadcn/ui
Vue	Vue, Nuxt.js, Nuxt UI
Other Web	Svelte, SolidJS, Astro, Angular, Three.js
PHP	Laravel (Blade, Livewire, Inertia.js)
Mobile	SwiftUI, Jetpack Compose, React Native, Flutter
Desktop	JavaFX, WinUI 3, Avalonia, Uno Platform

Responsive down to mobile — RTL layout holds at 375px.

🛠 Design System Command (Advanced)

Query the engine directly from the shell:

# Generate a full design system
python3 .claude/skills/ui-pro-forge/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Domain-specific search
python3 .claude/skills/ui-pro-forge/scripts/search.py "rtl persian" --domain style
python3 .claude/skills/ui-pro-forge/scripts/search.py "persian turquoise" --domain color
python3 .claude/skills/ui-pro-forge/scripts/search.py "reactivity signal" --stack solidjs

One command returns a complete, industry-matched design system.

🤝 Contributing

The source of truth lives in src/ui-pro-forge/ (CSV data, Python scripts, platform templates). The CLI generates every platform's files from there.

git clone https://github.com/kterfan/ui-pro-forge.git
cd ui-pro-forge/cli
npm run validate:csv && npm run smoke:stacks   # verify data integrity

See CLAUDE.md for detailed development guidelines.

📄 License & Acknowledgements

Licensed under the MIT License. UI Pro Forge builds on the open-source UI/UX Pro Max project (MIT), retained in the copyright notice per the license, and is independently maintained by kterfan with its own branding, an added SolidJS stack, an RTL-native Persian style and palette, and a streamlined framework set.

---

---

🇮🇷 فارسی

یو‌آی پرو فورج (UI Pro Forge)

مغزِ طراحی برای ایجنت‌های کدنویسی هوش مصنوعی. به Claude Code، Cursor و بیش از ۱۵ دستیار هوش مصنوعی دیگر، یک پایگاه‌دانشِ قابل‌جست‌وجو و آفلاین از دانش حرفه‌ای UI/UX می‌دهد — ۸۵ استایل رابط کاربری، ۱۹۳ پالت رنگی، ۷۴ ترکیب فونت و راهنمای اختصاصی برای ۲۱ فریمورک — تا کدی که تولید می‌کنند واقعاً طراحی‌شده به‌نظر برسد، نه پیش‌فرض و کلیشه‌ای.

چرا لازمه: ایجنت‌های هوش مصنوعی در نوشتن کامپوننت عالی‌اند، اما هر بار سراغ همان خاکستریِ همیشگیِ Tailwind می‌روند. UI Pro Forge به ایجنت تو یک «مغز طراحیِ منتخب» می‌دهد که قبل از نوشتن حتی یک خط کد آن را جست‌وجو کند — متناسب با صنعت تو، استکِ تو و قواعد دسترس‌پذیریِ WCAG.

# فقط یک دستور — سازگار با Claude Code، Cursor، Windsurf و بیشتر
npx ui-pro-forge-cli init --ai claude

🌟 ارزش افزودهٔ این فورک

این نسخه یک بیلدِ مستقل، بهینه‌شده و متمرکز بر طراحیِ واقعیِ محصولاتِ چندزبانه است. مزیت‌هایی که نسبت به یک پایگاه‌دانشِ طراحیِ معمولی اضافه می‌کند:

ارزش افزوده	چرا مهم است
🇮🇷 پشتیبانی درجه‌یک از راست‌به‌چپ	یک استایلِ اختصاصیِ Persian Modern / RTL-Native به‌همراه پالتِ Persian Turquoise & Terracotta — بیشتر اسکیل‌های طراحی فقط چپ‌به‌راست فکر می‌کنند. اینجا محصولِ کاملاً فارسی/عربی می‌سازی، نه قالبِ آینه‌شده.
⚡ استکِ SolidJS	افزودنِ راهنمای اختصاصیِ SolidJS (سیگنال‌ها، استورها، کنترل‌فلو) — پوششی که نسخهٔ اصلی نداشت.
🧹 مجموعه‌فریمورکِ سبک‌تر	حذفِ استک‌های قدیمیِ مخصوصِ ویندوز (WPF و UWP) تا پیشنهادها روی فریمورک‌هایی که امروز واقعاً استفاده می‌شوند متمرکز بماند.
🔒 بدون تله‌متری، کاملاً آفلاین	موتور جست‌وجوی BM25 با پایتونِ خالص، بدون کلید API و بدون درخواست شبکه — امن برای اجرا داخل هر سندباکسِ ایجنت.
📦 نصب با یک دستور	منتشرشده روی npm با نامِ ui-pro-forge-cli؛ سازگار با بیش از ۱۵ دستیار هوش مصنوعی.

✨ امکانات

🇮🇷 ⭐ ویژهٔ فارسی‌زبان‌ها — نقطهٔ تمایز این پروژه

برخلاف بقیهٔ اسکیل‌های طراحی که فقط چپ‌به‌راست فکر می‌کنند، این پروژه راست‌به‌چپ را به‌صورت درجه‌یک (first-class) پشتیبانی می‌کند:

• 🎨 استایل «Persian Modern / RTL-Native» — طراحیِ کاملاً راست‌به‌چپ با فاصله‌گذاریِ منطقی (logical properties)، فلیپِ درستِ آیکون‌های جهت‌دار، و فونت‌های فارسی (Vazirmatn / IRANSans).
• 🏛 پالتِ «Persian Turquoise & Terracotta» — رنگ‌های الهام‌گرفته از کاشی‌کاری و معماری ایرانی (فیروزه‌ای، آجری، زعفرانی، لاجوردی)، با کنتراستِ تأییدشدهٔ WCAG.

یعنی ایجنتِ هوش مصنوعی‌ات می‌تواند یک فروشگاه یا داشبوردِ کاملاً فارسی و راست‌به‌چپ را درست بسازد — نه یک قالبِ چپ‌به‌راستِ آینه‌شده.

نمونه فروشگاهِ ساخته‌شده با استایلِ RTL فارسی و پالتِ ایرانی — چیدمانِ کاملاً راست‌به‌چپ، اعداد فارسی، تایپوگرافیِ وزیرمتن.

• ۸۵ استایل رابط کاربری — گلس‌مورفیسم، کلی‌مورفیسم، مینیمالیسم، بروتالیسم، نئومورفیسم، بنتو گرید، دارک‌مود، رابط بومیِ هوش مصنوعی، و ⭐ استایل «Persian Modern / RTL-Native» برای طراحی راست‌به‌چپ.
• ۱۹۳ پالت رنگی — پالت‌های متناسب با صنعت، شامل ⭐ مجموعهٔ «Persian Turquoise & Terracotta» با الهام از کاشی‌کاری ایرانی.
• ۷۴ ترکیب فونت — تایپوگرافیِ منتخب همراه با ایمپورت آمادهٔ Google Fonts.
• ۲۱ استکِ فنی — React، Next.js، Vue، Svelte، SolidJS، Astro، Nuxt، Angular، Laravel، SwiftUI، React Native، Flutter، HTML+Tailwind، shadcn/ui، Jetpack Compose، Three.js، JavaFX، WinUI 3، Avalonia، Uno Platform.
• موتور جست‌وجوی BM25 آفلاین — کاملاً با کتابخانهٔ استاندارد پایتون. بدون کلید API، بدون درخواست شبکه، بدون تله‌متری.

نمونه‌ای از ۸۵ استایلِ داخلی — شاملِ استایلِ فارسیِ راست‌به‌چپ.

پالت‌های متناسب با صنعت، همه با کنتراستِ تأییدشدهٔ WCAG — به‌همراه مجموعهٔ ویژهٔ ایرانی.

ریسپانسیو تا موبایل — چیدمانِ راست‌به‌چپ در ۳۷۵ پیکسل هم درست می‌ماند.

🚀 نصب

روش پیشنهادی — بدون نیاز به نصب

مستقیم از npm با npx اجرا کن (چیزی نصب نمی‌شود و همیشه آخرین نسخه است):

# راه‌اندازی برای دستیارِ تو (داخل پوشهٔ پروژه اجرا کن)
npx ui-pro-forge-cli init --ai claude      # کلود کد
npx ui-pro-forge-cli init --ai cursor      # کرسر
npx ui-pro-forge-cli init --ai windsurf    # ویندسرف
npx ui-pro-forge-cli init --ai all         # همهٔ دستیارهای پشتیبانی‌شده

نصب یک‌بار برای همهٔ پروژه‌ها (به‌جای پوشهٔ پروژه، در پوشهٔ خانگی نصب می‌شود):

npx ui-pro-forge-cli init --ai claude --global   # ← ~/.claude/skills/
npx ui-pro-forge-cli init --ai cursor --global   # ← ~/.cursor/skills/

دستورات دیگر:

npx ui-pro-forge-cli update              # به‌روزرسانی فایل‌های اسکیل
npx ui-pro-forge-cli uninstall           # حذف اسکیل
npx ui-pro-forge-cli uninstall --global  # حذف نصبِ سراسری

پیش‌نیاز: پایتون ۳ (فقط کتابخانهٔ استاندارد — اسکریپت‌ها چیزی نصب نمی‌کنند و به شبکه وصل نمی‌شوند). اگر نصب نیست، خودت از python.org نصبش کن.

💡 استفاده

اسکیل به‌محضِ درخواست کارِ UI/UX خودکار فعال می‌شود — کافی است طبیعی حرف بزنی:

یک لندینگ‌پیج برای محصول SaaS من بساز
یک داشبورد برای تحلیل داده‌های سلامت طراحی کن
یک فروشگاه فارسی (راست‌به‌چپ) با پالت گرم بساز
رابط اپ موبایل فروشگاهی با Flutter طراحی کن

چطور کار می‌کند: ۱. تو درخواست کارِ UI/UX می‌دهی (ساختن، طراحی، بازبینی، بهبود). ۲. موتور استدلال، نوعِ محصولت را با استایل‌ها، پالت‌ها و تایپوگرافی تطبیق می‌دهد. ۳. یک سیستم طراحیِ کامل و اختصاصی برمی‌گرداند — رنگ، فونت، فاصله‌گذاری، افکت. ۴. ایجنتِ تو آن را با بررسیِ دسترس‌پذیری و ضدالگوها پیاده‌سازی می‌کند.

🛠 دستور سیستم طراحی (پیشرفته)

پرس‌وجوی مستقیم از موتور، در ترمینال:

# ساخت یک سیستم طراحی کامل
python3 .claude/skills/ui-pro-forge/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# جست‌وجوی حوزه‌ای
python3 .claude/skills/ui-pro-forge/scripts/search.py "rtl persian" --domain style
python3 .claude/skills/ui-pro-forge/scripts/search.py "persian turquoise" --domain color
python3 .claude/skills/ui-pro-forge/scripts/search.py "reactivity signal" --stack solidjs

📄 لایسنس و قدردانی

تحت لایسنس MIT منتشر شده است. UI Pro Forge بر پایهٔ پروژهٔ متن‌بازِ UI/UX Pro Max (با لایسنس MIT) ساخته شده که طبق شرایط لایسنس، اعلان کپی‌رایتش حفظ شده است؛ و به‌صورت مستقل توسط kterfan با برندینگ اختصاصی، افزودن استکِ SolidJS، یک استایل و پالتِ راست‌به‌چپِ فارسی، و مجموعه‌فریمورکِ بهینه‌شده نگهداری می‌شود.