Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...
Real data. Real impact.
Emerging
Developers
Per week
Open source
Skills give you superpowers. Install in 30 seconds.
完整的 UI/UX 设计资源库，让 AI 生成的界面像专业设计师作品一样精美。
| 资源类型 | 文件 | 内容 |
|---|---|---|
| 🎨 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 | 常用组件设计规范 |
先读取
references/ui-styles.md读取
references/color-palettes.md读取
references/typography.md读取
references/ux-patterns.md目标用户是谁？
产品类型是什么？
品牌调性如何？
| 场景 | 主色 | 辅助色 | 强调色 |
|---|---|---|---|
| 科技产品 | 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 |
/* 配色示例 */ .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
记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。
No automatic installation available. Please visit the source repository for installation instructions.
View Installation Instructions
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.