UI UX Pro Max 专业设计资源库
将以下提示词粘贴到你的 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 模式作共同语言。