uupm 页面截图
产品页面 点击查看大图

uupm

面向 Claude Code 的 AI 设计智能工具,提供可检索的 UI 样式、配色方案、字体配对、图表类型和 UX 指南,帮助用户从提示词生成美观的界面。

skillAI设计前端设计
平台
Claude Code
价格
开源项目,可通过 GitHub 获取。
01

Overview

产品概述

UI/UX Pro Max 是一个开源的 AI 设计智能工具,兼容 Claude Code。它内置可检索的设计数据库,覆盖 UI 风格、色彩、字体配对、图表类型和 UX 准则;支持从产品提示词出发,通过 6 步智能流程检索设计推荐并生成界面代码,并为 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter 和 Tailwind CSS 等技术栈提供框架级最佳实践。
02

Capabilities

核心能力

01

AI 驱动的设计推荐

根据用户输入的产品类型、风格、页面目标和 CTA,自动检索设计数据库,并输出配色、字体、排版、落地页结构和 UX 规则等推荐。

02

可检索的设计智能数据库

收录 57 种 UI 风格、95 套配色、56 组字体配对、24 种图表类型和 29 种落地页模式,支持按需检索和参考。

03

多技术栈最佳实践

针对 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter 和 Tailwind CSS 提供框架特定的模式、状态管理和性能建议,并输出代码示例。

04

从提示词到生产代码

通过 6 步智能流程,将产品描述转化为包含风格、字体、配色和 CTA 的界面代码,并附 SVG 图标、悬停反馈、深色模式对比和响应式布局等质量检查。

03

Use Cases

适用场景

  1. 01

    快速搭建落地页

    输入如“宠物美容服务的落地页”等提示词,获得包含风格、字体、配色和 CTA 的完整界面设计建议与代码。

  2. 02

    产品专属视觉方案

    为 SaaS、电商、医疗、金融科技等产品选择匹配的配色系统,并搭配字型与风格。

  3. 03

    数据可视化选型与落地

    根据数据类型推荐折线图、柱状图、饼图、热力图等图表,并给出 Chart.js、Recharts、D3.js 等库建议和无障碍说明。

04

Integrations

集成能力

01

Claude Code

作为 Claude Code 兼容的 skill 使用,可在 Claude Code 环境中直接调用设计智能。

02

Google Fonts

字体配对建议支持 Google Fonts 集成,便于直接使用对应的字体资源。

03

Tailwind CSS

提供 Tailwind 配置与工具类建议,可生成 Tailwind 风格的响应式界面代码。

04

Chart.js / Recharts / D3.js

在数据可视化场景中推荐这些 JavaScript 图表库,并附带无障碍提示。