ui-ux

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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：能力模型

Capability	Description	Proficiency
Style Discovery	Find UI styles matching requirements	High
Color Recommendation	Suggest palettes by industry/mood	High
Typography Pairing	Match fonts for heading/body	High
Chart Selection	Choose visualization types for data	Medium
UX Audit	Identify anti-patterns and issues	Medium
Stack Guidelines	Framework-specific best practices	Medium

能力	描述	熟练度
风格发现	找到符合需求的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

Find colors for healthcare

查找医疗健康行业配色

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

知识资产

Asset	File	Records
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

版本历史

Version	Date	Changes
1.0.0	2026-01-14	Initial fork from UI UX Pro Max

版本	日期	变更
1.0.0	2026-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

Compare data/ directory

对比data/目录

undefined

undefined