Agent Skills
返回列表
UI UX Pro Max 专业设计资源库

UI UX Pro Max 专业设计资源库

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @zcwl/ui-ux-pro-max-plus。

技能介绍

问题在哪

让大模型画界面时,常见结果是「能看但不像产品」:风格漂移、配色随意、字体堆叠、组件各说各话。缺的不是生成能力,而是可引用的设计约束——风格名、色板、字配对、图表类型和 UX 模式,需要像查文档一样被 Agent 按步骤读取,而不是凭印象发挥。

技能如何工作

ui-ux-pro-max-plus 把设计知识拆成六类参考文件,按决策顺序使用:

  • references/ui-styles.md:50+ 界面风格(如 Minimalist、Glassmorphism),先定主风格再点缀元素
  • references/color-palettes.md:100+ 调色板,配合文档里的场景矩阵(科技、金融、电商等)选主色/辅助色/强调色
  • references/typography.md:标题+正文字体组合(如 Inter + JetBrains Mono)
  • references/charts.md:数据可视化类型与选用建议
  • references/ux-patterns.md:具体场景的交互与体验模式
  • references/components.md:常用组件的设计规范

推荐流程是:定风格 → 选配色 → 配字体 → 套 UX 模式;文档里还有「目标用户 / 产品类型 / 品牌调性」三问和 Tailwind 类名层面的实用提示(断点、间距、色阶命名)。

适用边界

这是参考库与决策框架,不会替你画 Figma,也不保证与某一设计系统版本逐字对齐。技能强调约束:一种主风格、颜色控制在五种以内、字体最多两种、一致性优先于炫技——若需求是品牌手册级定制或无障碍审计,仍需人工设计评审与实测。

使用场景

  • 用 AI 搭建 SaaS 或企业后台时,先读 `ui-styles.md` 在 Minimalist/Corporate 间选型,再按 `color-palettes.md` 锁定科技类主辅强调色。
  • 做电商落地页或活动页,需要 Modern E-commerce 等风格说明,并对照文档中的零售场景配色矩阵,避免多轮生成风格漂移。
  • 设计运营或营收数据看板,依据 `charts.md` 选定图表类型,并用 `components.md` 统一筛选区、卡片等组件表述。
  • 规划社交或工具类 App 的 onboarding、空状态等流程,查 `ux-patterns.md` 定交互模式,再用 `typography.md` 固定标题与正文字体对。

适合人员

  • 主要用 Tailwind 或类工具栈写界面、但没有完整设计系统的前端,想用文档里的色阶与字体配对减少反复改样式。
  • 依赖 Agent 快速出可点击原型、又需要约束为「一种主风格 + 有限色板」的独立开发者或技术创始人。
  • 在 PRD 或设计说明里要写清风格名、配色与字体方案的产品经理,便于设计与开发按同一套参考对齐。
  • 负责数据产品或分析页、要在折线/柱状/占比等图表间做一致选型的人,需要 charts 与 UX 模式作共同语言。