UI UX Pro Max

Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...

Security Scan

This is an instruction-only UI/UX design resource pack that is internally consistent with its description and does not request credentials, installs, or external endpoints.

Purpose & Capability

The name/description (UI/UX design resource library) matches the included files (ui-styles, color-palettes, typography, charts, ux-patterns, components). There are no unrelated requirements (no binaries, no cloud creds) that would be disproportionate for a design resource.

Instruction Scope

SKILL.md and README instruct the agent to read and use the bundled reference files. All referenced paths are present in the package. There are no instructions to read system files, secrets, or to transmit data to external endpoints.

Install Mechanism

No install spec and no code files — this is instruction-only. Nothing in the package downloads or extracts external code or writes binaries to disk.

Credentials

No environment variables, credentials, or config paths are requested. The content references public resources like Google Fonts but does not require tokens or secrets.

Persistence & Privilege

The skill uses default autonomy (disable-model-invocation: false) and always: false. Autonomous invocation is normal for skills; this skill does not request elevated or persistent system privileges.

Assessment

This package appears coherent and safe: it only contains offline design reference files and usage instructions. Before installing, note the source is unknown (no homepage/author link) — if you need provenance, try to verify the author. Also review licensing for any fonts or assets you plan to redistribute, and avoid providing any sensitive project secrets when invoking third-party skills (although this skill does not ask for any).

UI UX Pro Max - 专业设计资源库

完整的 UI/UX 设计资源库，让 AI 生成的界面像专业设计师作品一样精美。

何时使用此 Skill

• 设计任何用户界面时需要专业参考
• 选择配色方案（品牌色、功能色、中性色）
• 挑选字体组合（标题+正文）
• 设计数据可视化图表
• 需要 UX 最佳实践指导
• 寻找特定行业/风格的设计灵感

资源导航

资源类型	文件	内容
🎨 UI 风格库	references/ui-styles.md	50+ 种界面设计风格
🌈 配色方案	references/color-palettes.md	100+ 专业调色板
🔤 字体配对	references/typography.md	精选字体组合
📊 图表类型	references/charts.md	数据可视化指南
📘 UX 模式	references/ux-patterns.md	用户体验最佳实践
🎯 组件库	references/components.md	常用组件设计规范

快速开始

1. 确定设计风格

先读取 references/ui-styles.md，选择适合项目的设计风格：

• SaaS/企业应用 → Minimalist / Corporate
• 电商 → Modern E-commerce / Luxury
• 创意作品 → Brutalist / Glassmorphism
• 社交应用 → Neumorphism / Soft UI

2. 选择配色

读取 references/color-palettes.md，根据品牌调性选择：

• 科技/专业 → Blue/Cyan 系列
• 自然/健康 → Green/Earth 系列
• 时尚/美妆 → Purple/Pink 系列
• 金融/法律 → Navy/Gray 系列

3. 搭配字体

读取 references/typography.md：

• 现代科技感 → Inter + JetBrains Mono
• 优雅精致 → Playfair Display + Inter
• 友好亲和 → Nunito + Open Sans

4. 应用 UX 模式

读取 references/ux-patterns.md 获取具体场景的交互模式。

设计决策框架

选择 UI 风格的 3 个问题

1. 目标用户是谁？

   • 企业用户 → 简洁、专业、高效
   • 年轻消费者 → 活泼、大胆、有趣
   • 高端客户 → 精致、留白、质感

2. 产品类型是什么？

   • 工具类 → 功能优先，清晰直观
   • 内容类 → 阅读体验，排版优雅
   • 社交类 → 情感连接，互动感强

3. 品牌调性如何？

   • 创新先锋 → 尝试新风格（Glassmorphism）
   • 稳定可靠 → 经典风格（Material Design）
   • 独特个性 → 大胆风格（Brutalist）

配色选择矩阵

场景	主色	辅助色	强调色
科技产品	Blue-600	Slate-500	Cyan-400
健康医疗	Teal-600	Gray-500	Emerald-400
金融科技	Indigo-700	Gray-600	Amber-500
电商零售	Rose-600	Gray-500	Violet-500
教育培训	Violet-600	Slate-500	Yellow-400
娱乐社交	Fuchsia-600	Gray-500	Pink-500

实用技巧

Tailwind CSS 快速应用

/* 配色示例 */
.bg-brand { @apply bg-blue-600; }
.text-muted { @apply text-gray-500; }
.border-accent { @apply border-cyan-400; }

/* 字体示例 */
.font-heading { @apply font-display text-3xl font-bold; }
.font-body { @apply font-sans text-base leading-relaxed; }

响应式断点建议

Mobile First:
- 默认: 320px+
- sm: 640px+
- md: 768px+
- lg: 1024px+
- xl: 1280px+

间距系统

/* 8px 基础倍数 */
space-1: 4px
space-2: 8px
space-3: 12px
space-4: 16px
space-6: 24px
space-8: 32px
space-12: 48px
space-16: 64px

专业提示

1. 不要混合太多风格 - 选择1种主风格，2-3个设计元素点缀
2. 颜色不超过5种 - 主色、辅助色、中性色、成功色、错误色
3. 字体最多2种 - 1种标题字体 + 1种正文字体
4. 留白是设计 - 不要害怕空白，它是呼吸空间
5. 一致性 > 创新 - 保持设计系统的一致性比追求独特更重要

参考资源

• UI Styles → 选择界面风格
• Color Palettes → 选择配色方案
• Typography → 选择字体配对
• Charts → 选择图表类型
• UX Patterns → 学习交互模式
• Components → 查看组件规范

---

记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。