文档

功能说明、输出格式、使用限制、版权与定价 — 你需要知道的一切。

快速开始输出说明示例使用限制版权与授权定价更新日志工具集成

快速开始

UI/UX Pro Max 无需注册、无需安装，打开网页即可使用。整个流程分两步：

Step 1：Logo 生成

输入品牌名称（必填）
选择图标方向和风格（可选，不选则 AI 自动决定）
点击「生成 Logo 系统」，等待 10-30 秒
查看四种变体：Icon / Wordmark / Stacked / Horizontal
点击「下载全部 SVG」获取源文件

Step 2：设计系统生成

输入项目名称（可选）和设计需求描述
需求可简短（一句话），点击「AI 扩写」自动补全细节
点击「生成设计系统」获取 JSON 格式的设计令牌
使用「AI 预览」查看可视化页面，「生成截图」导出 PNG
使用「AI 评审」获取专业设计改进建议

工作流示意

输入需求 → AI 扩写 → 生成设计系统 JSON → AI 预览 HTML → 截图 PNG → AI 评审报告

输出说明

Logo 生成输出

格式	内容	用途
`SVG`	四种变体矢量图	网页、App、印刷均可使用
JSON	品牌概念、配色、字体建议	设计规范文档参考

Logo 变体说明：

Icon — 独立图标，1:1 比例，适合 Favicon、App 图标
Wordmark — 纯文字标识，适合页眉、签名
Stacked — 图标+文字上下组合，适合社交媒体头像
Horizontal — 图标+文字左右排列，适合导航栏

设计系统输出

输出项	格式	包含内容
设计系统	JSON	配色、字体、间距、组件风格、排版规范
AI 预览	HTML	基于设计系统渲染的可视化页面
截图	PNG (1440px 宽)	完整页面截图，可用于方案演示
AI 评审	文本	配色、字体、布局、交互等多维度评审 + 改进建议

设计系统 JSON 结构：

{
  "category": "SaaS",
  "style": { "name": "Minimalism", "keywords": "..." },
  "colors": { "primary": "#2563EB", "secondary": "...", "cta": "..." },
  "typography": { "heading": "Inter", "body": "Inter", "google_fonts_url": "..." },
  "spacing": { "base": "8px", "scale": "..." },
  "components": { "buttons": "...", "cards": "...", "inputs": "..." },
  "pattern": { "sections": "Hero > Features > CTA" },
  "anti_patterns": "..."
}

输入示例

Logo 生成示例

品牌名	图标方向	风格
Acme Corp	科技	极简主义
花间集	自然	优雅高端
GameHub	动物	锐利大胆
123Pay	抽象	科技未来

设计需求示例

场景	输入
SaaS 后台	科技感 SaaS 后台，深色主题，数据仪表盘，展示关键指标和图表
电商小程序	粉色系美妆电商，女性用户群体，KOC 种草风格，商品瀑布流
企业官网	B2B 企业官网，蓝白配色，专业可信，突出案例和合作客户
社交 App	Z 世代社交应用，渐变色，大胆排版，Feed 流 + 短视频
简短描述	咖啡店（AI 会自动扩写为完整需求）

使用限制

功能限制

设计需求描述最长 2000 字符
Logo 品牌名最长 100 字符
截图尺寸固定 1440px 宽，全页高度
AI 预览为单页 HTML，不包含交互逻辑
Logo SVG 由 AI 生成，可能需要手动微调

并发与速率

项目	限制
并发请求	单 IP 同时 3 个请求
每分钟请求	10 次
单次超时	预览 90s / 截图 45s / Logo 120s

已知问题

AI 生成的 Logo SVG 偶尔包含无效路径，系统会自动尝试修复，修复失败时建议重试
中文品牌名的 Wordmark 字体渲染依赖系统字体，不同设备可能略有差异
AI 预览页面为静态 HTML，复杂动画和交互需自行开发

版权与授权

生成内容版权

通过 UI/UX Pro Max 生成的 Logo SVG、设计系统 JSON、预览 HTML，版权归使用者所有
可用于个人项目、商业项目、客户交付，无需额外授权
不限使用场景：网页、App、印刷品、社交媒体均可

AI 模型声明

Logo 生成使用智谱 GLM-4V 视觉大模型，设计系统生成基于 ui-ux-pro-max 专业设计数据库。AI 输出仅供参考，使用者需自行判断是否适合目标场景。

免责声明

AI 生成的设计可能无意中与已有设计相似。如用于品牌注册或商业用途，建议进行商标查重和专业设计审核。

定价

项目	免费版	Pro 版
设计系统生成	✓ 无限	✓ 无限
Logo 生成	✓ 10 次/天	✓ 无限
AI 预览	✓ 5 次/天	✓ 无限
截图导出	✓ 5 次/天	✓ 无限
AI 评审	✓ 3 次/天	✓ 无限
水印	无	无
API 访问	即将推出	即将推出
价格	¥0	即将公布

当前所有功能完全免费，无水印，生成内容版权归属使用者。Pro 版将提供更高频次和 API 接口，敬请期待。

更新日志

v2.0.0 — 2025-05-03

AI 模型升级至 GLM-4V（视觉模型），提升 Logo 和预览质量
截图引擎从 Playwright 切换至 Chrome Headless，修复截图失败问题
Logo 生成增加 SVG 自动校验和修复机制，失败自动重试
前端全面重构：glassmorphism 风格、导航栏、响应式适配
新增文档、帮助、关于页面
新增 Logo 下载全部 SVG、下拉选择预设风格
新增 AI 评审 tooltip 引导

v1.0.0 — 2025-04-30

首次上线
基础设计系统生成功能
Logo SVG 生成
AI 预览和评审

工具集成指南

生成的 JSON 设计令牌可以直接导入主流前端和设计工具。

Tailwind CSS

将配色和字体写入 tailwind.config.js 的 theme.extend：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563EB',
        cta: '#F97316',
      },
      fontFamily: {
        heading: ['Inter', 'sans-serif'],
      }
    }
  }
}

CSS Variables

通用方案，适用于任何前端框架：

:root {
  --color-primary: #2563EB;
  --color-cta: #F97316;
  --font-heading: 'Inter', sans-serif;
}

Figma Variables

打开 Figma → Variables → Create variable set
将 colors 映射为 Color 变量
将 typography 映射为 Font 变量
批量导入推荐 Token Studio 插件

Style Dictionary

使用 Style Dictionary 将 JSON Token 转换为多平台变量文件（CSS / SCSS / iOS / Android）：

npm install style-dictionary
npx style-dictionary build --config=config.json
# 输出: css/variables.css, scss/_variables.scss ...