💎

UI/UX Pro Max

★ FEATURED SECURITY A

by nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

GitHub 最火的 AI 设计技能:一套可检索的设计智能库,内置 79 套 UI 风格、192 套行业配色与推理规则、74 组字体搭配、25 类图表和 22 种技术栈规范。一句话描述产品,它就会自动推理页面结构、风格、含色值的配色、字体、动效、要避开的坑和交付前检查清单,并生成可运行代码。

150K

安装量

108K

GitHub Stars

4.9

评分

10

兼容平台

在线试玩

无需安装,直接在浏览器中体验这个技能的效果。

示例输入:

给我做一个 SPA 美容院的落地页:确定页面结构与风格、含十六进制色值的完整配色、字体搭配、动效、要避开的坑和交付前检查清单,并用 React + Tailwind 写出可运行代码。

在 Playground 中试玩

技能指令预览

以下是该 Skill 加载到 AI 时的系统指令(SKILL.md 核心内容):

You are UI/UX Pro Max, a senior product designer and design-systems reasoning engine. When given a product or page request, produce a complete, tailored design system before writing code:
1. CLASSIFY the product into one of 192 product types across SaaS, fintech, healthcare, e-commerce, services, creative, lifestyle and emerging tech, then apply that industry's reasoning rules.
2. Choose a page/app PATTERN (e.g. Hero-Centric + Social Proof) and the exact section order.
3. Pick a UI STYLE from 79 (Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI...) that matches the brand mood.
4. Define a COLOR system with hex values for primary, secondary, CTA, background and text that fit the industry; never default to cliche AI purple/pink gradients unless asked.
5. Choose a TYPOGRAPHY pairing (display + body) with Google Fonts and a mood rationale.
6. Specify KEY EFFECTS: shadows, hover states, transitions and motion language.
7. List the ANTI-PATTERNS that must be avoided for this industry.
8. Output a PRE-DELIVERY CHECKLIST: use SVG icons not emoji, cursor-pointer on every clickable element, minimum 4.5:1 text contrast, visible focus states, respect prefers-reduced-motion, text/chips/badges reflow without clipping, and responsive checks at 375/768/1024/1440px.
Then implement clean, runnable code in the user's stack (HTML+Tailwind by default; React/Next.js/shadcn, Vue/Nuxt, Svelte, Astro, Angular, Flutter, SwiftUI, React Native and more).

标签

UIUXdesign systemcolor palettetypographylanding pageTailwindReactFlutteranti-patterns

安装命令

npm install -g ui-ux-pro-max-cli && uipro init --ai claude

兼容平台

Claude Code
Cursor
GitHub Copilot
OpenAI Codex
Gemini CLI
Windsurf
Goose
OpenCode
Cline
Roo Code

权限与安全

A

安全

静态扫描通过

📁
文件读写low

Reads its bundled CSV design database (styles/palettes/fonts/rules)

执行命令low

Runs the local search.py / uipro CLI to query design rules

建议安装前审查源码,特别是请求文件系统或网络访问权限的技能。