UI UX Pro Max：AI 设计智能与前端实现 - Openclaw Skills

什么是 UI UX Pro Max？

UI UX Pro Max 是专为 AI 代理设计的综合设计智能技能，旨在弥合抽象设计概念与生产级代码之间的差距。它为现代框架（如 React、Next.js 和 Svelte）的视觉风格方向、信息架构和组件规范提供结构化指导。通过在 Openclaw Skills 生态系统中使用此技能，开发人员可以确保其应用程序在遵循专业设计令牌和交互模式的同时，保持高标准的可访问性。

该技能擅长将高层级需求转化为具体的交付成果，涵盖从视觉概念和布局网格到文件级代码编辑的各个方面。它通过遵循严格的分类和实施工作流，专注于以最少的往返沟通交付高质量的 UI/UX 输出。

下载入口:https://github.com/openclaw/skills/tree/main/skills/xobi667/ui-ux-pro-max

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

UI UX Pro Max 应用场景

• 为 Web、iOS 和 Android 平台生成新的 UI 布局和样式。
• 通过绘制用户旅程并识别摩擦点来改进现有的 UX 流程。
• 生成全面的设计系统，包括调色板、排版规范和间距规则。
• 将抽象的 UX 建议转换为具体的 React 或 Tailwind CSS 代码更改。
• 审计界面的可访问性，包括键盘导航和 WCAG 对比度合规性。

1. 执行分类步骤以确定目标平台、技术栈、品牌约束和可访问性要求。
2. 绘制用户旅程以识别关键路径，包括加载中、错误和空状态等边缘情况。
3. 访问绑定的设计智能数据，从成熟的调色板、模式和启发式方法中获取灵感。
4. 执行设计系统生成脚本以生成结构化令牌和组件指南。
5. 生成具体的实施计划，包括前端组件的文件级编辑和验收标准。

UI UX Pro Max 配置指南

要使用此技能，请确保项目中正确映射了目录结构。您可以通过 CLI 访问内置的设计系统生成器：

python3 skills/ui-ux-pro-max/scripts/design_system.py --help

设计智能和参考材料存储在 assets 和 references 目录中，供代理在生成过程中引用。

UI UX Pro Max 数据架构与分类体系

该技能通过 Openclaw Skills 框架内的结构化文件系统组织其智能和参考：

name: ui-ux-pro-max
description: UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.

Follow these steps to deliver high-quality UI/UX output with minimal back-and-forth.

1) Triage

Ask only what you must to avoid wrong work:

• Target platform: web / iOS / Android / desktop
• Stack (if code changes): React/Next/Vue/Svelte, CSS/Tailwind, component library
• Goal and constraints: conversion, speed, brand vibe, accessibility level (WCAG AA?)
• What you have: screenshot, Figma, repo, URL, user journey

If the user says "全部都要" (design + UX + code + design system), treat it as four deliverables and ship in that order.

2) Produce Deliverables (pick what fits)

Always be concrete: name components, states, spacing, typography, and interactions.

• UI concept + layout: Provide a clear visual direction, grid, typography, color system, key screens/sections.
• UX flow: Map the user journey, critical paths, error/empty/loading states, edge cases.
• Design system: Tokens (color/typography/spacing/radius/shadow), component rules, accessibility notes.
• Implementation plan: Exact file-level edits, component breakdown, and acceptance criteria.

3) Use Bundled Assets

This skill bundles data you can cite for inspiration/standards.

• Design intelligence data: Read from skills/ui-ux-pro-max/assets/data/ when you need palettes, patterns, or UI/UX heuristics.
• Upstream reference: If you need more phrasing/examples, consult skills/ui-ux-pro-max/references/upstream-skill-content.md.

4) Optional Script (Design System Generator)

If you need to quickly generate tokens and page-specific overrides, use the bundled script:

python3 skills/ui-ux-pro-max/scripts/design_system.py --help

Prefer running it when the user wants a structured token output (ASCII-friendly).

Output Standards

• Default to ASCII-only tokens/variables unless the project already uses Unicode.
• Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.
• Always cover: empty/loading/error, keyboard navigation, focus states, contrast.