Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/Prorise-cool/prorise-claude-skills --skill ui-ux-pro-maxEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Mostrando SKILL.md
| name | ui-ux-pro-max |
| description | UI/UX 设计智能，在设计页面时必须使用 |
基准路径:
.claude/skills/design-specialist/references/domains/ui-design/
ui-design/
├── data/
│ ├── stacks/
│ │ ├── flutter.csv
│ │ ├── html-tailwind.csv
│ │ ├── nextjs.csv
│ │ ├── nuxt-ui.csv
│ │ ├── nuxtjs.csv
│ │ ├── react-native.csv
│ │ ├── react.csv
│ │ ├── shadcn.csv
│ │ ├── svelte.csv
│ │ ├── swiftui.csv
│ │ └── vue.csv
│ ├── charts.csv
│ ├── colors.csv
│ ├── icons.csv
│ ├── landing.csv
│ ├── products.csv
│ ├── prompts.csv
│ ├── styles.csv
│ ├── typography.csv
│ └── ux-guidelines.csv
├── scripts/
│ ├── core.py
│ └── search.py
└── SKILL.md
一个可搜索的数据库，包含 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 准则以及特定技术栈的最佳实践。
检查是否已安装 Python：
python3 --version || python --version
如果未安装 Python，请根据用户的操作系统进行安装：
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
当用户请求进行 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，请遵循以下工作流程：
从用户请求中提取关键信息：
html-tailwind。多次使用 search.py 以收集全面的信息。持续搜索直到获得足够的上下文。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
如果用户未指定技术栈，**默认为 html-tailwind**。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
领域 (domain) | 用途 | 关键词示例 |
|---|---|---|
product | 产品类型推荐 | SaaS, e-commerce (电商), portfolio (作品集), healthcare (医疗), beauty (美业), service (服务) |
style | UI 风格、颜色、特效 | glassmorphism (玻璃拟态), minimalism (极简), dark mode (暗黑), brutalism (粗野主义) |
typography | 字体搭配, Google Fonts | elegant (优雅), playful (俏皮), professional (专业), modern (现代) |
color | 按产品类型的配色方案 | saas, ecommerce, healthcare, beauty, fintech (金融), service |
landing | 页面结构, CTA 策略 | hero (首屏), hero-centric, testimonial (评价), pricing (定价), social-proof (社会证明) |
chart | 图表类型, 库推荐 | trend (趋势), comparison (对比), timeline (时间轴), funnel (漏斗), pie (饼图) |
ux | 最佳实践, 反模式 | animation (动画), accessibility (无障碍), z-index, loading (加载) |
prompt | AI 提示词, CSS 关键词 | (风格名称) |
技术栈 (stack) | 侧重点 |
|---|---|
html-tailwind | Tailwind 工具类, 响应式, 无障碍性 (默认) |
react | 状态管理, hooks, 性能, 模式 |
nextjs | SSR (服务端渲染), 路由, 图片优化, API 路由 |
vue | 组合式 API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | 视图, 状态, 导航, 动画 |
react-native | 组件, 导航, 列表 |
flutter | Widgets, 状态, 布局, 主题 |
shadcn | shadcn/ui 组件, 主题定制, 表单, 模式 |
用户请求： "为专业护肤服务制作一个落地页 (Landing page)"
AI 应当执行：
# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 搜索风格 (基于行业: 美业, 优雅)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. 搜索排版/字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. 搜索配色方案
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. 搜索落地页结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. 搜索 UX 准则
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. 搜索技术栈指南 (默认: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
然后： 综合所有搜索结果并实现设计。
这些是经常被忽视的问题，它们会让 UI 看起来不专业：
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 不要使用 Emoji 图标 | 使用 SVG 图标 (Heroicons, Lucide, Simple Icons) | 使用 🎨 🚀 ⚙️ 等 Emoji 作为 UI 图标 |
| 稳定的悬停状态 | 悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
| 正确的品牌 Logo | 从 Simple Icons 查找官方 SVG | 猜测或使用错误的 Logo 路径 |
| 一致的图标尺寸 | 使用固定的 viewBox (24x24) 和 w-6 h-6 | 随意混合不同尺寸的图标 |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 指针光标 (Cursor pointer) | 给所有可点击/可悬停的卡片添加 cursor-pointer | 在交互元素上保留默认光标 |
| 悬停反馈 | 提供视觉反馈（颜色、阴影、边框） | 没有任何指示表明元素可交互 |
| 平滑过渡 | 使用 transition-colors duration-200 | 状态瞬间切换或过慢 (>500ms) |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 亮色模式下的玻璃卡片 | 使用 bg-white/80 或更高不透明度 | 使用 bg-white/10 (太透明) |
| 亮色文本对比度 | 文本使用 #0F172A (slate-900) | 正文使用 #94A3B8 (slate-400) |
| 柔和/次级文本 (亮色) | 最低使用 #475569 (slate-600) | 使用 gray-400 或更浅的颜色 |
| 边框可见性 | 亮色模式使用 border-gray-200 | 使用 border-white/10 (不可见) |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 悬浮导航栏 | 添加 top-4 left-4 right-4 间距 | 将导航栏紧贴 top-0 left-0 right-0 |
| 内容内边距 (Padding) | 考虑到固定导航栏的高度 | 让内容隐藏在固定元素后面 |
| 一致的最大宽度 | 使用统一的 max-w-6xl 或 max-w-7xl | 混合使用不同的容器宽度 |
在交付 UI 代码之前，请验证这些项目：
cursor-pointerprefers-reduced-motion（减少动态效果）设置Autonomous pipeline manager that orchestrates the entire development workflow. You are the leader of this process.
Specialist in self-healing data pipelines — uses air-gapped local SLMs and semantic clustering to automatically detect, classify, and fix data anomalies at scale. Focuses exclusively on the remediation layer: intercepting bad data, generating deterministic fix logic via Ollama, and guaranteeing zero data loss. Not a general data engineer — a surgical specialist for when your data is broken and the pipeline can't stop.
Expert AI/ML engineer specializing in machine learning model development, deployment, and integration into production systems. Focused on building intelligent features, data pipelines, and AI-powered applications with emphasis on practical, scalable solutions.
Basado en la clasificación ocupacional SOC