SSkills导航
首页/Skills/UI/UX Pro Max 设计与实现助手
内容创作中等风险

UI/UX Pro Max 设计与实现助手

面向 Web 与移动应用的 UI/UX 设计智能助手，覆盖设计系统、风格、配色、字体、图表、UX 审查及多技术栈实现指导。

by @easylongv1.0.06 浏览3 下载
#Next.js#React#Svelte#UI设计#UX设计#Vue#可访问性
推荐方式

直接交给 AI

无需安装文件。复制一句话，让 AI 在线读取这个 Skill。

下载 Skill ZIP ↓ 查看 SKILL.md 原文 ↗
01

它能帮你做什么

先看懂，再决定要不要交给 AI。

UI/UX Pro Max 是一个面向 Web 与移动应用场景的 UI/UX 设计智能 Skill，通过内置的 Python 搜索脚本作为统一入口，提供从设计系统生成、风格/配色/字体/图标研究、UX 审查到具体技术栈实现的一体化工作流。支持 React、Next.js、Vue、Nuxt、Svelte、Astro、SwiftUI、React Native、Flutter、Jetpack Compose、HTML + Tailwind、shadcn/ui 等主流前端与移动端框架，可生成持久化的 design-system/MASTER.md 及页面级覆盖文件，便于跨会话复用。输出以可落地的设计系统结果为准，强制进行可访问性、对比度、响应式、动效与焦点状态等交付前检查。

✓为 SaaS 产品构建落地页
✓为金融科技应用选择配色方案
✓对现有 UI 进行 UX 审查与问题诊断
✓为高端健康品牌推荐字体排版
✓为 React/Next.js/Vue/Svelte/SwiftUI/Flutter 等技术栈提供实现与性能建议
✓生成可在多会话复用的持久化设计系统
✓为 Dashboard、产品页、移动应用等场景生成设计系统与页面覆盖
02

怎么交给 AI

在线读取优先，本地安装作为备选。

◎
在线读取推荐 · 不需要安装

适合能访问网页的 ChatGPT、Agent 或其他 AI。

AI Prompt请访问 https://skills.dhmip.cn/skills/easylong/ui-ux-pro-max/SKILL.md，读取并按照该 Skill 完成任务；如当前环境支持本地安装，也可以下载该 Skill。
↓
下载安装到 Agent适合支持 Skills 的客户端

未登录时可使用公共安装文档；登录后可以按不同 AI 分开管理。

Install Prompt请根据 https://skills.dhmip.cn/install/skillhub.md，安装 @easylong/ui-ux-pro-max。
登录后管理多个 AI →
03

兼容性与要求

安装或使用前，先确认环境是否匹配。

适用客户端

clawopenclawclaude-codecursorwindsurfgeneric-cli

使用要求

  • Python 3（Windows 下可能需要使用 python 命令）
  • 本地访问 skill 目录下的 scripts/search.py 与 data/ 资源
  • 支持从 data/stacks/*.csv 动态加载技术栈数据
⌘技术详情查看完整 SKILL.md 与原始内容
⌄
SKILL.mdRaw ↗

name: ui_ux_pro_max
description: UI/UX design intelligence for web and mobile applications. Use for design systems, style selection, color palettes, typography, charts, UX review, and stack-specific implementation guidance.
metadata: {"openclaw":{"homepage":"https://uupm.cc","requires":{"bins":["python3","python"]}}}

UI/UX Pro Max

Use {baseDir}/scripts/search.py as the entrypoint for every task.

What It Covers

  • Design system generation for new pages, products, dashboards, and mobile apps.
  • Style, color, typography, landing-page, product, UX, chart, and icon research.
  • Stack-specific guidance for implementation and performance.
  • Persisted design systems using design-system/MASTER.md and page overrides.

When To Use

  • "Build a landing page for a SaaS product"
  • "Choose a color palette for a fintech app"
  • "Review this UI for UX issues"
  • "What typography works for a premium wellness brand?"
  • "Give me stack guidance for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, HTML + Tailwind, shadcn/ui, or Jetpack Compose"

Workflow

  1. Identify product type, audience, tone, and stack.
  2. Run the design-system generator first.
  3. Deep-dive any uncertain dimension with domain searches.
  4. Use stack search for implementation-specific guidance.
  5. Apply the pre-delivery checklist before final output.

Commands

Design system:

python3 {baseDir}/scripts/search.py "<query>" --design-system -p "Project Name"

Persisted design system:

python3 {baseDir}/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard"]

Domain search:

python3 {baseDir}/scripts/search.py "<query>" --domain style|color|typography|ux|landing|chart|product|prompt|icons|web|google-fonts

Stack search:

python3 {baseDir}/scripts/search.py "<query>" --stack <stack>

JSON output:

python3 {baseDir}/scripts/search.py "<query>" --json

Available Domains

  • style
  • color
  • typography
  • landing
  • product
  • ux
  • chart
  • prompt
  • icons
  • web
  • google-fonts

Available Stacks

The bundled stack data is discovered from data/stacks/*.csv at runtime. The current skill bundle includes:

  • astro
  • flutter
  • html-tailwind
  • jetpack-compose
  • nextjs
  • nuxt-ui
  • nuxtjs
  • react
  • react-native
  • shadcn
  • svelte
  • swiftui
  • vue

Output Guidance

  • Prefer the design system result over ad hoc taste.
  • Keep recommendations specific to the request and stack.
  • Call out accessibility, motion, responsive behavior, and contrast issues explicitly.
  • Use the generated persisted design-system files when the user wants repeated work across sessions.

Pre-Delivery Checklist

  • No emojis used as icons.
  • All interactive elements have clear hover or pressed feedback.
  • Contrast is at least 4.5:1 for body text.
  • Focus states are visible and keyboard-friendly.
  • Motion respects reduced-motion preferences.
  • Layout works at small-phone and desktop widths.
  • No content is hidden behind fixed headers or footers.

Notes

  • Python 3 is required for the bundled search script.
  • If the user is on Windows, python may be the usable command instead of python3.
  • If you need a persisted design system, keep the generated design-system/ directory with the project, not inside the skill bundle.