A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.
Claude Code
> /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill> /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Codex
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill -a codex
Cursor
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill -a cursor
Gemini CLI
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill$ copilot plugin install ui-ux-pro-max@ui-ux-pro-max-skill
OpenCode
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill -a opencode
Windsurf
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill -a windsurf
๐ฆ๐ฟ Azษrbaycanca | ๐ฎ๐ฉ Bahasa Indonesia | ๐ฐ๐ท ํ๊ตญ์ด | ๐ป๐ณ Tiแบฟng Viแปt | ๐จ๐ณ ็ฎไฝไธญๆ | ๐บ๐ธ English
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
If you find this useful, consider supporting the project:
Other projects NextLevelBuilder.io | GoClaw.sh | AgentKit.best | TOSE.sh
Check Out Our New Skill:
Visual inspiration, not a benchmark. An author-supplied project recorded before this skill existed; its UI contains Vietnamese. Historical footage, not an English demo or a runtime test of the skill โ see media provenance.
๐ค Website: https://3dviz.dev/
The flagship feature of v2.0 is the Design System Generator - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
+----------------------------------------------------------------------------------------+
| |
| PATTERN: Hero-Centric + Social Proof |
| Conversion: Emotion-driven with trust elements |
| CTA: Above fold, repeated after testimonials |
| Sections: |
| 1. Hero |
| 2. Services |
| 3. Testimonials |
| 4. Booking |
| 5. Contact |
| |
| STYLE: Soft UI Evolution |
| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |
| Best For: Wellness, beauty, lifestyle brands, premium services |
| Performance: cost:low | Accessibility: risk:conditional; verify requirements |
| |
| COLORS: |
| Primary: #E8B4B8 (Soft Pink) |
| Secondary: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Text: #2D3436 (Charcoal) |
| Notes: Calming palette with gold accents for luxury feel |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| Best For: Luxury brands, wellness, beauty, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| KEY EFFECTS: |
| Soft shadows + Context-appropriate transitions + Gentle hover states |
| |
| AVOID (Anti-patterns): |
| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |
| |
| PRE-DELIVERY CHECKLIST: |
| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |
| [ ] cursor-pointer on all clickable elements |
| [ ] Interaction timing follows the platform, component, and user preference |
| [ ] Light mode: text contrast 4.5:1 minimum |
| [ ] Focus states visible for keyboard nav |
| [ ] prefers-reduced-motion respected |
| [ ] Text, chips, and badges reflow without clipping or broken labels |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
| |
+----------------------------------------------------------------------------------------+
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ 1. USER REQUEST โ
โ "Build a landing page for my beauty spa" โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ 2. MULTI-DOMAIN SEARCH (5 parallel searches) โ
โ โข Product type matching (192 categories) โ
โ โข Style recommendations (79 searchable; 50 active) โ
โ โข Color palette selection (192 palettes) โ
โ โข Landing page patterns (34 patterns) โ
โ โข Typography pairing (74 font combinations) โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ 3. REASONING ENGINE โ
โ โข Match product โ UI category rules โ
โ โข Apply style priorities (BM25 ranking) โ
โ โข Filter anti-patterns for industry โ
โ โข Process decision rules (JSON conditions) โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ 4. COMPLETE DESIGN SYSTEM OUTPUT โ
โ Pattern + Style + Colors + Typography + Effects โ
โ + Anti-patterns to avoid + Pre-delivery checklist โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
The reasoning engine includes specialized rules for:
| Category | Examples |
|---|---|
| Tech & SaaS | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform |
| Finance | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool |
| Healthcare | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder |
| E-commerce | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery |
| Services | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment |
| Creative | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor |
| Lifestyle | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker |
| Emerging Tech | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet |
Each rule includes:
Stars on GitHub
See 12 ui-ux-pro-max alternatives
Design guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.
@pbakausTurns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.
@nexu-ioCreates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.
@cathrynlaverySkills that help designers and engineers make better UI animation decisions faster, covering when to animate, which properties and curves to use, keeping web motion within the frame budget, and React Native and Expo animation.
@emilkowalskiInstall it with the command on its page. It includes banner-design, brand, design-system. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it