Menü
UI/UX 设计智能，在设计页面时必须使用
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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.
Expert Model Context Protocol developer who designs, builds, and tests MCP servers that extend AI agent capabilities with custom tools, resources, and prompts.
创建高质量 MCP（模型上下文协议）服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。在构建 MCP 服务器以集成外部 API 或服务时使用，无论是 Python (FastMCP) 还是 Node/TypeScript (MCP SDK)。
Independent model QA expert who audits ML and statistical models end-to-end - from documentation review and data reconstruction to replication, calibration testing, interpretability analysis, performance monitoring, and audit-grade reporting.
| 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（减少动态效果）设置