UI/UX Pro Max - 设计情报库

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 ...

aiskillstore/marketplace·0installs430stars

SKILL.md

Full skill instructions

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>]

推荐检索顺序：

Product - 获取产品类型的风格建议
Style - 获取详细风格指南（颜色、效果、框架）
Typography - 获取字体搭配与 Google Fonts 导入
Color - 获取配色方案（主色、辅色、CTA、背景、正文、边框）
Landing - 获取页面结构（如为落地页）
Chart - 获取图表推荐（如为数据看板/分析）
UX - 获取最佳实践与反模式
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
`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 关键词	(style name)

可用技术栈

Stack	关注点
`html-tailwind`	Tailwind 工具类、响应式、无障碍（默认）
`react`	状态、Hooks、性能、模式
`nextjs`	SSR、路由、图片、API routes
`vue`	Composition API、Pinia、Vue Router
`svelte`	Runes、stores、SvelteKit
`swiftui`	Views、State、Navigation、Animation
`react-native`	Components、Navigation、Lists
`flutter`	Widgets、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

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

提升结果质量的提示

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

专业 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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/aiskillstore/marketplace --skill ui-ux-pro-max

View on GitHub

skills/dcjanus/ui-ux-pro-max/SKILL.md

skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.
577 installs
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
237 installs
xlsx
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
233 installs
pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
220 installs

More skills from aiskillstore

aiskillstore/marketplace

docx

Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks

430 216

View

aiskillstore/marketplace

agent-development

This handles everything around building autonomous agents for Claude Code plugins.

430 197

View

aiskillstore/marketplace

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

430 196

View

aiskillstore/marketplace

skill-development

This is the meta-skill for building skills themselves.

430 196

View

aiskillstore/marketplace

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

430 193

View

aiskillstore/marketplace

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

430 191

View

aiskillstore/marketplace

hook-development

Helps you build event-driven automation for Claude Code using hooks that trigger on tool use, session events, and stop conditions.

430 187

View

aiskillstore/marketplace

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

430 185

View

aiskillstore/marketplace

command-development

Shows Claude Code how to build slash commands from markdown files, covering the YAML frontmatter options, dynamic arguments with $1/$2...

430 185

View

aiskillstore/marketplace

plugin-structure

This is your reference when scaffolding Claude Code plugins or figuring out why components aren't loading.

430 183

View

aiskillstore/marketplace

skill-installer

Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos).

430 180

View

aiskillstore/marketplace

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

430 177

View