>_

ui-ux-pro-max

UI/UX 设计情报库：50 种风格、21 套配色、50 组字体搭配、20 类图表、8 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。动作：plan、build、create、design、implement、review、fix、improve、optimize、enhance、refactor、check UI/UX code。项目：website、landing page、dashboard、admin panel、e-commerce、SaaS、portfolio、blog、mobile app、.html、.tsx、.vue、.svelte。元素：button、modal、navbar、sidebar、card、table、form、chart。风格：glassmorphism、claymorphism、minimalism、brutalism、neumorphism、bento grid、dark mode、responsive、skeuomorphism、flat design。主题：color palette、accessibility、animation、layout、typography、font pairing、spacing、hover、shadow、gradient。

$ Installieren

git clone https://github.com/DCjanus/prompts /tmp/prompts && cp -r /tmp/prompts/skills/ui-ux-pro-max ~/.claude/skills/prompts

// tip: Run this command in your terminal to install the skill

SKILL.md
View on GitHub →

name: ui-ux-pro-max description: "UI/UX 设计情报库：50 种风格、21 套配色、50 组字体搭配、20 类图表、8 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。动作：plan、build、create、design、implement、review、fix、improve、optimize、enhance、refactor、check UI/UX code。项目：website、landing page、dashboard、admin panel、e-commerce、SaaS、portfolio、blog、mobile app、.html、.tsx、.vue、.svelte。元素：button、modal、navbar、sidebar、card、table、form、chart。风格：glassmorphism、claymorphism、minimalism、brutalism、neumorphism、bento grid、dark mode、responsive、skeuomorphism、flat design。主题：color palette、accessibility、animation、layout、typography、font pairing、spacing、hover、shadow、gradient。"

UI/UX Pro Max - 设计情报库

可搜索的 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 指南与技术栈最佳实践数据库。

使用方法

当用户提出 UI/UX 相关需求（design、build、create、implement、review、fix、improve）时，遵循以下流程：

Step 1：分析用户需求

从用户请求中提取关键信息：

  • 产品类型：SaaS、电商、作品集、仪表盘、落地页等。
  • 风格关键词：极简、活泼、专业、优雅、暗黑模式等。
  • 行业领域：医疗、金融科技、游戏、教育等。
  • 技术栈：React、Vue、Next.js，默认 html-tailwind。

Step 2：检索相关领域

多次使用 search.py 获取完整信息，直到具备足够上下文。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

推荐检索顺序：

  1. Product - 获取产品类型的风格建议
  2. Style - 获取详细风格指南（颜色、效果、框架）
  3. Typography - 获取字体搭配与 Google Fonts 导入
  4. Color - 获取配色方案（主色、辅色、CTA、背景、正文、边框）
  5. Landing - 获取页面结构（如为落地页）
  6. Chart - 获取图表推荐（如为数据看板/分析）
  7. UX - 获取最佳实践与反模式
  8. Stack - 获取技术栈最佳实践（默认 html-tailwind）

Step 3：技术栈指南（默认：html-tailwind）

如果用户未指定技术栈，默认使用 html-tailwind。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter

检索参考

可用 Domain

Domain用途示例关键词
product产品类型推荐SaaS、e-commerce、portfolio、healthcare、beauty、service
styleUI 风格、颜色、效果glassmorphism、minimalism、dark mode、brutalism
typography字体搭配、Google Fontselegant、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
promptAI 提示词、CSS 关键词(style name)

可用技术栈

Stack关注点
html-tailwindTailwind 工具类、响应式、无障碍（默认）
react状态、Hooks、性能、模式
nextjsSSR、路由、图片、API routes
vueComposition API、Pinia、Vue Router
svelteRunes、stores、SvelteKit
swiftuiViews、State、Navigation、Animation
react-nativeComponents、Navigation、Lists
flutterWidgets、State、Layout、Theming

示例流程

用户请求： "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

AI 应该：

# 1. 检索产品类型
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. 检索风格（基于行业：beauty、elegant）
python3 skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. 检索字体搭配
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. 检索配色
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. 检索落地页结构
python3 skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. 检索 UX 指南
python3 skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. 检索技术栈指南（默认：html-tailwind）
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

然后： 综合所有检索结果并实现设计。

提升结果质量的提示

  1. 关键词尽量具体 - "healthcare SaaS dashboard" > "app"
  2. 多次检索 - 不同关键词会揭示不同信息
  3. 组合多个领域 - Style + Typography + Color = 完整设计系统
  4. 始终检查 UX - 检索 "animation"、"z-index"、"accessibility" 规避常见问题
  5. 使用 stack 参数 - 获取实现层面的最佳实践
  6. 迭代搜索 - 首次结果不匹配就换关键词重试

专业 UI 的常见规则

这些问题经常被忽视，会让 UI 看起来不专业：

图标与视觉元素

规则建议避免
不要用 emoji 图标使用 SVG 图标（Heroicons、Lucide、Simple Icons）用 🎨 🚀 ⚙️ 等 emoji 充当 UI 图标
悬停状态稳定悬停使用颜色/透明度过渡使用缩放导致布局抖动
品牌 Logo 正确从 Simple Icons 获取官方 SVG猜测或使用错误 Logo
图标尺寸一致固定 viewBox（24x24）并使用 w-6 h-6混用不同尺寸

交互与指针

规则建议避免
鼠标指针提示所有可点击卡片加 cursor-pointer交互元素仍是默认指针
悬停反馈提供颜色/阴影/边框反馈交互无可见提示
过渡要顺滑transition-colors duration-200突变或过慢（>500ms）

明暗对比

规则建议避免
浅色玻璃卡片使用 bg-white/80 或更高不透明度bg-white/10（太透明）
浅色文字对比正文用 #0F172A（slate-900）用 #94A3B8（slate-400）
浅色次级文字最低 #475569（slate-600）用 gray-400 或更浅
边框可见性浅色用 border-gray-200用 border-white/10（看不见）

布局与间距

规则建议避免
悬浮导航栏增加 top-4 left-4 right-4 间距直接贴 top-0 left-0 right-0
内容内边距预留固定导航的高度内容被固定元素遮挡
一致的最大宽度统一使用 max-w-6xl 或 max-w-7xl混用不同容器宽度

交付前检查清单

在交付 UI 代码前，确认以下事项：

视觉质量

  • 不使用 emoji 作为图标（改用 SVG）
  • 图标来自一致的图标集（Heroicons/Lucide）
  • 品牌 Logo 正确（从 Simple Icons 验证）
  • 悬停状态不引发布局抖动
  • 直接使用主题色（如 bg-primary），不包一层 var()

交互

  • 所有可点击元素有 cursor-pointer
  • 悬停反馈清晰可见
  • 过渡动画顺滑（150-300ms）
  • 键盘导航有可见的 focus 状态

明暗模式

  • 浅色模式文本对比度满足 4.5:1 最低要求
  • 浅色模式玻璃/透明元素可见
  • 明暗模式下边框都可见
  • 交付前测试明暗两套主题

布局

  • 悬浮元素与边缘有足够间距
  • 内容不会被固定导航遮挡
  • 在 320px、768px、1024px、1440px 下响应正常
  • 移动端不出现横向滚动

无障碍

  • 所有图片有 alt 文本
  • 表单输入有 label
  • 颜色不是唯一信息传达方式
  • 尊重 prefers-reduced-motion

Repository

DCjanus
DCjanus
Author
DCjanus/prompts/skills/ui-ux-pro-max
12
Stars
1
Forks
Updated3d ago
Added6d ago

Actions

View on GitHubDownload ZIPReport Issue

Related Skills

skill-writer
pytorch/pytorch
95.4k
docstring
pytorch/pytorch
95.4k
at-dispatch-v2
pytorch/pytorch
95.4k
add-uint-support
pytorch/pytorch
95.4k
skill-creator
openai/codex
54.7k