القائمة
当用户需要设计系统推荐、配色方案、字体搭配、UX 规范或跨技术栈的设计指南时使用。此 Skill 包含 67 种风格、96 种配色方案、57 种字体搭配和 99 条 UX 指南，支持设计系统自动生成。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。
当用户需要将需求转化为可执行任务、进行技术选型或协调多个专业 Skill 协作时使用。此 Skill 充当任务调度中心，接收需求文档并智能路由到合适的专业领域。
当用户需要从零开始构建完整项目或需要多角色协作时使用。此 Skill 充当全能开发团队，包含产品经理、架构师、设计师、开发者和测试人员，指导从想法到上线的全过程。
当用户在项目初期或重大功能迭代时需要进行技术选型时使用。此 Skill 根据需求自动生成 2-3 套技术方案对比，涵盖前端、后端、数据库及中间件，并提供优劣势分析和最终选型建议。
当用户在开始开发前需要搜索现有的开源库、工具、MCP Server 或最佳实践代码时使用。帮助避免重复造轮子，找到最适合当前需求的现成解决方案。
当用户需要进行创意发散、需求探索或产品规划时使用（无论是创建功能、构建组件、添加功能还是修改行为）。此 Skill 通过协作对话将想法转化为完整的设计方案和需求规格说明书。
| name | UI/UX Intelligence Expert |
| description | 当用户需要设计系统推荐、配色方案、字体搭配、UX 规范或跨技术栈的设计指南时使用。此 Skill 包含 67 种风格、96 种配色方案、57 种字体搭配和 99 条 UX 指南，支持设计系统自动生成。 |
⚠️ 性能提示: 此 Skill 包含大量 CSV 数据文件（~500KB）和 12 个技术栈指南。建议使用
scripts/search.py脚本进行查询，而不是直接加载全部数据文件。
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
Reference these guidelines when:
| Priority | Category | Impact | Domain |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux |
| 2 | Touch & Interaction | CRITICAL | ux |
| 3 | Performance | HIGH | ux |
| 4 | Layout & Responsive | HIGH | ux |
| 5 | Typography & Color | MEDIUM | typography, color |
| 6 | Animation | MEDIUM | ux |
| 7 | Style Selection | MEDIUM | style, product |
| 8 | Charts & Data | LOW | chart |
color-contrast - Minimum 4.5:1 ratio for normal textfocus-states - Visible focus rings on interactive elementsalt-text - Descriptive alt text for meaningful imagesaria-labels - aria-label for icon-only buttonskeyboard-nav - Tab order matches visual orderform-labels - Use label with for attributetouch-target-size - Minimum 44x44px touch targetshover-vs-tap - Use click/tap for primary interactionsloading-buttons - Disable button during async operationserror-feedback - Clear error messages near problemcursor-pointer - Add cursor-pointer to clickable elementsimage-optimization - Use WebP, srcset, lazy loadingreduced-motion - Check prefers-reduced-motioncontent-jumping - Reserve space for async contentviewport-meta - width=device-width initial-scale=1readable-font-size - Minimum 16px body text on mobilehorizontal-scroll - Ensure content fits viewport widthz-index-management - Define z-index scale (10, 20, 30, 50)When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Extract key information from user request:
html-tailwindAlways start with --design-system to get comprehensive recommendations with reasoning:
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
ui-reasoning.csv to select best matchesExample:
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
After getting the design system, use domain searches to get additional details:
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need | Domain | Example |
|---|---|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
The --design-system flag supports two output formats:
# ASCII box (default) - best for terminal display
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 /Volumes/MacOS/个人项目/skills/GitHub/TraeSkill/.trae/Skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Before delivering UI code, verify these items:
cursor-pointerprefers-reduced-motion respected