Back to Details

ui-ux

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Pro Max Skill

UI/UX Pro Max Skill

Version: 1.0.0 Source: Fork from nextlevelbuilder/ui-ux-pro-max-skill License: MIT
版本: 1.0.0 来源: Fork自 nextlevelbuilder/ui-ux-pro-max-skill 许可证: MIT

Module 01: Skill Identity

模块01：Skill标识

Core Mission

核心使命

Provide AI-assisted design intelligence for UI/UX decisions, enabling developers to create professional-grade interfaces without deep design expertise.
为UI/UX决策提供AI辅助设计智能，让开发者无需深厚的设计专业知识也能打造专业级界面。

Value Proposition

价值主张

  • 58+ UI styles with compatibility and performance ratings
  • 95+ color palettes categorized by industry
  • 56+ typography pairings with Google Fonts integration
  • 24+ chart types with accessibility guidance
  • 98+ UX guidelines for common anti-patterns
  • 58+种UI风格，附带兼容性和性能评级
  • 95+种配色方案，按行业分类
  • 56+种字体搭配，集成Google Fonts
  • 24+种图表类型，附带无障碍设计指南
  • 98+条UX准则，覆盖常见反模式

Applicable Scenarios

适用场景

  • Creating new website/app designs
  • Filling 
    site-design.contract.yaml
    for Builder system
  • Choosing color schemes for specific industries
  • Selecting typography for brand identity
  • Evaluating UX compliance
  • 创建新网站/应用设计
  • 为Builder系统填写
    site-design.contract.yaml
  • 为特定行业选择配色方案
  • 为品牌形象选择字体
  • 评估UX合规性

Boundaries

边界限制

  • Does NOT generate code directly (use Builder for that)
  • Does NOT make aesthetic judgments (provides options, user decides)
  • Does NOT replace professional design review for production
  • 不直接生成代码（请使用Builder完成）
  • 不做审美判断（仅提供选项，由用户决定）
  • 无法替代生产环境中的专业设计评审

Module 02: Capability Model

模块02：能力模型

CapabilityDescriptionProficiency
Style DiscoveryFind UI styles matching requirementsHigh
Color RecommendationSuggest palettes by industry/moodHigh
Typography PairingMatch fonts for heading/bodyHigh
Chart SelectionChoose visualization types for dataMedium
UX AuditIdentify anti-patterns and issuesMedium
Stack GuidelinesFramework-specific best practicesMedium
能力描述熟练度
风格发现找到符合需求的UI风格高
配色推荐按行业/氛围推荐配色方案高
字体搭配为标题/正文匹配字体高
图表选择为数据选择可视化类型中
UX审计识别反模式和问题中
技术栈准则特定框架的最佳实践中

Module 03: Mental Models

模块03：思维模型

BM25 Ranking

BM25排序

Search uses BM25 algorithm for relevance scoring:
  • TF-IDF weighting for term importance
  • Document length normalization
  • Query term frequency saturation
搜索使用BM25算法进行相关性评分：
  • 采用TF-IDF加权衡量术语重要性
  • 文档长度归一化
  • 查询词频饱和处理

Domain Detection

领域检测

Auto-detects search domain from keywords:
  • "color", "palette" → color domain
  • "SaaS", "dashboard" → product domain
  • "font", "typography" → typography domain
根据关键词自动检测搜索领域：
  • "color"、"palette" → 配色领域
  • "SaaS"、"dashboard" → 产品领域
  • "font"、"typography" → 字体领域

Module 04: Methods & SOPs

模块04：方法与标准操作流程（SOP）

SOP: Contract-Driven Design

SOP：契约驱动设计

Phase 1: Discover Style
bash
python scripts/search.py "modern SaaS dashboard" --domain style
Phase 2: Select Colors
bash
python scripts/search.py "SaaS enterprise" --domain color
Phase 3: Choose Typography
bash
python scripts/search.py "professional tech" --domain typography
Phase 4: Generate Contract Use results to fill 
site-design.contract.yaml
:
yaml
tokens:
  colors:
    primary: "#3B82F6"      # From color search
    background: "#FFFFFF"
  typography:
    primary_font: "Inter"    # From typography search
    heading_font: "Poppins"
Phase 5: Run Builder
bash
npx tsx builders/theme-factory/builder.ts <track-id>
阶段1：发现风格
bash
python scripts/search.py "modern SaaS dashboard" --domain style
阶段2：选择配色
bash
python scripts/search.py "SaaS enterprise" --domain color
阶段3：选择字体
bash
python scripts/search.py "professional tech" --domain typography
阶段4：生成契约 使用搜索结果填写
site-design.contract.yaml
：
yaml
tokens:
  colors:
    primary: "#3B82F6"      # 来自配色搜索
    background: "#FFFFFF"
  typography:
    primary_font: "Inter"    # 来自字体搜索
    heading_font: "Poppins"
阶段5：运行Builder
bash
npx tsx builders/theme-factory/builder.ts <track-id>

Module 05: Execution Protocols

模块05：执行协议

Pre-Checklist

预检查清单

  • User has described target audience
  • User has specified industry/domain
  • User has indicated mood/tone preference
  • 用户已描述目标受众
  • 用户已指定行业/领域
  • 用户已表明氛围/风格偏好

Decision Logic

决策逻辑

IF industry specified → search color with industry keyword
ELIF mood specified → search style with mood keyword
ELSE → search product with general keyword
如果指定了行业 → 使用行业关键词搜索配色
否则如果指定了氛围 → 使用氛围关键词搜索风格
否则 → 使用通用关键词搜索产品

Quality Standards

质量标准

  • Always provide 3+ options for user choice
  • Include accessibility ratings in recommendations
  • Note performance implications for complex styles
  • 始终提供3种以上选项供用户选择
  • 推荐内容中包含无障碍设计评级
  • 注明复杂风格对性能的影响

Module 06: Output Structure

模块06：输出结构

Style Recommendation Template

风格推荐模板

markdown
undefined
markdown
undefined

Recommended Style: [Style Name]

推荐风格：[风格名称]

Why this style:
  • [Reason 1]
  • [Reason 2]
Colors:
  • Primary: [hex] - [usage]
  • Background: [hex] - [usage]
Typography:
  • Heading: [font name]
  • Body: [font name]
Performance: [rating] Accessibility: [rating]

---
推荐理由：
  • [理由1]
  • [理由2]
配色：
  • 主色：[十六进制码] - [用途]
  • 背景色：[十六进制码] - [用途]
字体：
  • 标题：[字体名称]
  • 正文：[字体名称]
性能： [评级] 无障碍设计： [评级]

---

Module 07: Templates & Prompts

模块07：模板与提示词

Activation Prompt

激活提示词

Search UI/UX Pro Max for design recommendations:
- Industry: [specify]
- Style preference: [modern/classic/playful/professional]
- Color mood: [warm/cool/vibrant/muted]
搜索UI/UX Pro Max获取设计推荐：
- 行业：[请指定]
- 风格偏好：[现代/经典/活泼/专业]
- 配色氛围：[温暖/凉爽/鲜艳/柔和]

Quick Start

快速开始

bash
undefined
bash
undefined

Find styles for SaaS

查找SaaS相关风格

python scripts/search.py "SaaS modern" --domain style
python scripts/search.py "SaaS modern" --domain style

Find colors for healthcare

查找医疗健康行业配色

python scripts/search.py "healthcare trust" --domain color
python scripts/search.py "healthcare trust" --domain color

Find typography for tech startup

查找科技创业公司字体

python scripts/search.py "startup tech" --domain typography

---
python scripts/search.py "startup tech" --domain typography

---

Module 08: Tools Access

模块08：工具访问

Required Tools

必备工具

  • Python 3.x (no external dependencies)
  • CSV data files in 
    data/
    directory
  • Python 3.x（无外部依赖）
  • data/
    目录下的CSV数据文件

Knowledge Assets

知识资产

AssetFileRecords
Styles
styles.csv
58
Colors
colors.csv
95
Typography
typography.csv
56
Charts
charts.csv
24
UX Guidelines
ux-guidelines.csv
98
Icons
icons.csv
100
资产文件记录数
风格
styles.csv
58
配色
colors.csv
95
字体
typography.csv
56
图表
charts.csv
24
UX准则
ux-guidelines.csv
98
图标
icons.csv
100

Integration Points

集成点

  • Builder system reads Contract, this Skill helps write Contract
  • Assembler can trigger this Skill via keywords
  • Builder系统读取契约，本Skill帮助编写契约
  • 汇编器可通过关键词触发本Skill

Module 09: Evaluation & Scoring

模块09：评估与评分

Output Quality Metrics

输出质量指标

  • Relevance: Does recommendation match user intent?
  • Completeness: Are all required fields covered?
  • Actionability: Can user directly use in Contract?
  • 相关性：推荐内容是否匹配用户意图？
  • 完整性：是否覆盖所有必填字段？
  • 可操作性：用户能否直接用于契约？

Pass Criteria

通过标准

  • At least 1 relevant result per search
  • Accessibility rating provided
  • Performance impact noted
  • 每次搜索至少返回1个相关结果
  • 提供无障碍设计评级
  • 注明性能影响

Module 10: Feedback & Evolution

模块10：反馈与演进

Evolution Triggers

触发演进的条件

  • New UI style trends emerge
  • Framework compatibility changes
  • User feedback on missing categories
  • 出现新的UI风格趋势
  • 框架兼容性变化
  • 用户反馈缺少相关分类

Version History

版本历史

VersionDateChanges
1.0.02026-01-14Initial fork from UI UX Pro Max
版本日期变更
1.0.02026-01-14从UI UX Pro Max初始分叉

Upstream Sync

上游同步

bash
undefined
bash
undefined

Check for updates

检查更新

cd /tmp && git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd /tmp && git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git

Compare data/ directory

对比data/目录

undefined
undefined