UIUX设计助手(免费版)

UI/UX设计助手免费版为个人开发者提供基础的UI/UX设计指导,涵盖布局方向、配色系统、排版规模与设计令牌输出。核心能力: - UI概念与布局方向快速建议 - 配色系统生成(主色/辅色/语义色) - 排版规模(字号/行高/字重)建议 - 基础设计令牌输出(ASCII友好) - 响应式断点推荐 适用场景: - 个人项目界面设计快速起步 - 学习UI/UX设计基础概念 - 生成基础设计令牌用于CSS变量 差异化:免费版聚焦个人开发者的基础设计需求,输出ASCII友好令牌

概述

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:个人博客界面设计

text

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

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

场景 2:配色系统生成

text

帮我生成一个面向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:排版规模建议

text

我的内容站需要一套排版规模,正文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建模和动画制作
• 照片级写实渲染
• 手绘原创插画

触发条件

、品牌视觉时使用。不适用于非本工具能力范围的需求.

快速开始

第一步:回答分诊问题

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

text

平台: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
}