Ui Ux Promax Tool Free

SKILL.md

---
slug: ui-ux-promax-tool-free
name: ui-ux-promax-tool-free
version: 1.0.0
displayName: UIUX设计助手(免费版)
summary: 面向个人开发者的UI/UX设计指导工具,提供布局、配色、排版的快速建议与设计令牌输出。
license: Proprietary
edition: free
description: 'UI/UX设计助手免费版为个人开发者提供基础的UI/UX设计指导,涵盖布局方向、配色系统、排版规模与设计令牌输出。核心能力:

  - UI概念与布局方向快速建议

  - 配色系统生成(主色/辅色/语义色)

  - 排版规模(字号/行高/字重)建议

  - 基础设计令牌输出(ASCII友好)

  - 响应式断点推荐


  适用场景:

  - 个人项目界面设计快速起步

  - 学习UI/UX设计基础概念

  - 生成基础设计令牌用于CSS变量


  差异化:免费版聚焦个人开发者的基础设计需求,输出ASCII友好令牌'
tags:
- UI/UX
- 设计系统
- 前端开发
- 个人开发
- 设计令牌
tools:
- - read
- exec
homepage: https://skillhub.cn
pricing_tier: L3
pricing_model: per_use
suggested_price: 29.9
tools: ["read", "write", "exec"]
tags: "UI设计,前端,设计"
---
# UI/UX 设计助手(免费版)

## 概述

`ui-ux-promax-tool-free` 为个人开发者提供基础的 UI/UX 设计指导。它帮助你快速确定布局方向、配色系统、排版规模,并输出 ASCII 友好的设计令牌,可直接作为 CSS 变量使用。免费版聚焦核心设计决策,适合个人项目快速起步。

本工具通过自然语言对话收集关键信息后输出具体建议,无需安装额外脚本。

## 核心能力

| 能力 | 说明 |
|---|---|
| 分诊提问 | 快速确认目标平台、技术栈、设计目标与现有素材 |
| UI 概念与布局 | 视觉方向、网格、关键屏幕布局建议 |
| 配色系统 | 主色、辅色、语义色生成与对比度检查 |
| 排版规模 | 字号、行高、字重比例建议 |
| 基础设计令牌 | ASCII 友好的令牌输出,可直接用作 CSS 变量 |
| 响应式断点 | 移动/平板/桌面断点推荐 |
**技术实现要点**：核心能力基于`input_params`参数与`output_format`配置实现,支持创建/查询/修改/删除等操作模式,通过`config_options`进行运行时配置。

### 核心功能执行
用`input_params`参数进行配置。

**输入**: 用户提供核心功能执行所需的指令和必要参数。
**处理**: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回核心功能执行的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作

### 参数配置与调用
用`config_options`参数进行配置。

**输入**: 用户提供参数配置与调用所需的指令和必要参数。
**处理**: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回参数配置与调用的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`config_options`参数,支持修改/重置/导入操作

### 结果处理与输出
用`output_format`参数进行配置。

**输入**: 用户提供结果处理与输出所需的指令和必要参数。
**处理**: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回结果处理与输出的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`output_format`参数,支持导出/保存/转换操作
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、设计指导工具、提供布局、排版的快速建议与、设计令牌输出、设计助手免费版为、个人开发者提供基、设计指导、涵盖布局方向、排版规模与设计令、概念与布局方向快、速建议、配色系统生成、基础设计令牌输出、响应式断点推荐等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

## 使用场景

### 场景 1:个人博客界面设计

```
我在做一个个人技术博客,想用 Next.js + Tailwind,目标是阅读舒适、加载快。
帮我定一个布局方向和配色。
```

工具会输出布局建议(单栏阅读、侧边目录)、配色(主色 `#0066ff`、背景 `#ffffff`、文字 `#1a1a1a`)与排版规模。

### 场景 2:配色系统生成

```
帮我生成一个面向SaaS产品的配色系统,主色是蓝色,需要语义色(成功/警告/危险)。
```

```css
:root {
  /* 主色阶 */
  --color-primary-50: #e6f0ff;
  --color-primary-100: #b3d1ff;
  --color-primary-500: #0066ff;
  --color-primary-700: #0052cc;
  --color-primary-900: #003d99;
// ...
  /* 语义色 */
  --color-success: #00875a;
  --color-warning: #ffab00;
  --color-danger: #cc0000;
  --color-info: #0066ff;
// ...
  /* 中性色 */
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #e0e0e0;
}
```

### 场景 3:排版规模建议

```
我的内容站需要一套排版规模,正文16px,层级清晰。
```

```css
:root {
  --font-size-xs: 0.75rem;    /* 12px - 辅助文字 */
  --font-size-sm: 0.875rem;   /* 14px - 次要文字 */
  --font-size-base: 1rem;     /* 16px - 正文 */
  --font-size-lg: 1.125rem;   /* 18px - 小标题 */
  --font-size-xl: 1.25rem;    /* 20px - 标题 */
  --font-size-2xl: 1.5rem;    /* 24px - 大标题 */
  --font-size-3xl: 2rem;      /* 32px - 页面标题 */
// ...
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
// ...
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}
```

## 不适用场景

以下场景UIUX设计助手(免费版)不适合处理：

- 3D建模和动画制作
- 照片级写实渲染
- 手绘原创插画

## 触发条件

需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于非本工具能力范围的需求。

## 快速开始

### 第一步:回答分诊问题

工具会快速询问:目标平台(web/iOS/Android)、技术栈、设计目标、现有素材。

```
平台:Web(移动端优先)
技术栈:React + Tailwind
目标:转化率优先,品牌偏科技感
现有素材:有 Logo,无设计稿
```

### 第二步:获取设计建议

工具会输出布局方向、配色、排版与基础令牌。

### 第三步:应用到项目

```bash
# 将令牌保存为 CSS 文件
cp tokens.css src/styles/tokens.css
# ...
# 在 Tailwind 配置中引用
# tailwind.config.js
```

## 示例

### 个人项目响应式断点

```css
/* 移动端优先断点 */
/* 默认:手机(<640px) */
@media (min-width: 640px)  { /* 平板竖屏 */ }
@media (min-width: 768px)  { /* 平板横屏 */ }
@media (min-width: 1024px) { /* 桌面 */ }
@media (min-width: 1280px) { /* 大桌面 */ }
```

### 间距系统(8px 基准)

```css
:root {
  --spacing-0: 0;
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */
}
```

## 最佳实践

1. **ASCII 优先**:令牌命名使用 ASCII 字符,避免 Unicode 导致的编码问题。
2. **8px 间距基准**:所有间距使用 8 的倍数,保证视觉节奏一致。
3. **配色阶数 5-9 级**:主色生成 5-9 级色阶(50/100/500/700/900),覆盖浅色到深色。
4. **对比度达标**:正文与背景对比度 ≥ 4.5:1,大文字 ≥ 3:1。
5. **移动端优先**:从小屏开始设计,通过 `min-width` 媒体查询向大屏扩展。
6. **令牌驱动**:所有颜色、间距、字号引用令牌变量,禁止硬编码。
7. **覆盖空/加载/错误状态**:设计时必须考虑空状态、加载状态、错误状态,而非仅理想态。

## 常见问题

### Q1: 如何选择主色?

主色应与品牌调性一致:科技感偏蓝/紫,温暖品牌偏橙/红,健康/环保偏绿。生成色阶时,500 级为主色,50/100 为浅背景,700/900 为深色文字或强调。

### Q2: 排版规模用哪种比例?

常用比例:1.125(大调音阶,适合正文密集站点)、1.2(小调音阶,适合内容站)、1.25(纯四度,适合设计感强的站点)。个人博客推荐 1.2。

### Q3: 如何检查对比度?

使用浏览器开发者工具的"Lighthouse"或在线工具 WebAIM Contrast Checker。免费版会标注建议对比度,但不做自动审查。

### Q4: 免费版与 Pro 版的区别?

免费版提供基础设计建议与 ASCII 令牌输出;Pro 版扩展完整设计系统(含间距/圆角/阴影/动效令牌)、用户体验流程图、可访问性 WCAG AA 审查、设计系统脚本与企业级规范。

## 依赖说明

### 运行环境

- **Agent 平台**:支持 SKILL.md 的任意 AI Agent(Claude Code / Cursor / Codex / Gemini CLI 等)
- **操作系统**:Windows / macOS / Linux
- **浏览器**:任意现代浏览器用于预览效果

### 依赖详情

| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-----|:-----|:-----|:-----|
| 浏览器 | 系统工具 | 必需 | 系统预装 |
| 文本编辑器 | 系统工具 | 必需 | 系统预装 |
| LLM API | API | 必需 | 由 Agent 内置 LLM 提供 |

### API Key 配置

- 本 Skill 完全基于 Markdown 指令,无需额外 API Key
- 设计令牌完全本地生成,不涉及任何外部 API

### 可用性分类

- **分类**: MD+EXEC(纯 Markdown 指令,部分功能需要 exec 命令行执行能力)
- **说明**: 基于自然语言指令驱动 Agent 输出设计建议与令牌;用户将令牌应用到本地项目

## 错误处理

| 错误场景 | 原因 | 处理方式 |
|---:|---:|---:|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案 |

## 已知限制

- 需LLM支持,无LLM环境不可用
- 复杂业务场景建议结合人工经验判断
- 执行效率受模型能力与网络环境影响
- 当前为免费版本,如需完整功能请升级到付费版获取全部能力

## 输出格式
```json
{
  "success": true,
  "data": {
    "result": "UIUX设计助手(免费版)处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "ui ux promax"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}
```