UI/UX设计工具箱 - 免费版

概述

UI/UX设计工具箱免费版是一款面向个人开发者的轻量级设计资源查询工具。内置涵盖50+种界面风格、97套配色方案、57组字体配对、99条UX规则的设计数据库,通过Python CLI工具以自然语言关键词驱动查询,帮助开发者在数秒内获取专业设计建议。

免费版聚焦核心查询能力,支持基础设计域搜索(style、color、typography、ux)和默认技术栈(html-tailwind)指引,适合个人项目快速搭建设计系统。

核心能力

1. 设计资源数据库查询

通过关键词搜索多维度设计资源,获取匹配的风格、配色、字体推荐:

# 按产品类型和行业搜索设计系统
python3 scripts/search.py "SaaS dashboard fintech" --design-system

# 按特定域搜索
python3 scripts/search.py "glassmorphism dark" --domain style
python3 scripts/search.py "elegant luxury" --domain typography

输入: 用户提供设计资源数据库查询所需的指令和必要参数。 处理: 按照skill规范执行设计资源数据库查询操作,遵循单一意图原则。 输出: 返回设计资源数据库查询的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

2. 规则优先级体系

设计规则按优先级分层,确保关键问题优先处理:

输入: 用户提供规则优先级体系所需的指令和必要参数。 处理: 按照skill规范执行规则优先级体系操作,遵循单一意图原则。 输出: 返回规则优先级体系的执行结果,包含操作状态和输出数据。

3. 基础设计域支持

输入: 用户提供基础设计域支持所需的指令和必要参数。 处理: 按照skill规范执行基础设计域支持操作,遵循单一意图原则。 输出: 返回基础设计域支持的执行结果,包含操作状态和输出数据。

4. 默认技术栈指引

免费版默认提供 html-tailwind 技术栈的实现指南:

# 获取Tailwind CSS实现建议
python3 scripts/search.py "layout responsive form" --stack html-tailwind

输入: 用户提供默认技术栈指引所需的指令和必要参数。 处理: 按照skill规范执行默认技术栈指引操作,遵循单一意图原则。 输出: 返回默认技术栈指引的执行结果,包含操作状态和输出数据。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：可搜索的、设计数据库、提供风格、规则的基础查询、适合个人开发者快、速生成设计系统、面向个人开发者的、轻量级、设计查询工具、内置丰富的设计资、通过自然语言关键、词即可获取专业设、计建议、核心能力、可搜索的设计资源、自然语言驱动的、CLI、查询工具、基础设计系统一键、多技术栈适配指引等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一:个人SaaS项目配色选择

独立开发者正在构建一款任务管理SaaS,需要快速确定配色和字体方案。

# 步骤1:生成基础设计系统
python3 scripts/search.py "SaaS productivity tool minimal" --design-system -p "TaskFlow"

# 步骤2:补充字体搜索
python3 scripts/search.py "modern clean sans-serif" --domain typography

# 步骤3:获取Tailwind实现指引
python3 scripts/search.py "dashboard card layout" --stack html-tailwind

输出示例(配色方案):

主色: Blue-600 (#2563EB)
辅助色: Slate-500 (#64748B)
强调色: Cyan-400 (#22D3EE)
背景色: White / Slate-50
文字色: Slate-900 / Slate-600

场景二:落地页设计风格决策

为一个新的播客平台设计落地页,需要确定视觉风格。

# 搜索适合播客/媒体类产品的风格
python3 scripts/search.py "podcast media creative bold" --domain style

# 搜索落地页结构建议
python3 scripts/search.py "hero testimonial pricing" --domain landing

场景三:UX规则自查

开发完成后,对照UX规则清单检查常见问题:

# 检查动画和无障碍相关规则
python3 scripts/search.py "animation accessibility" --domain ux

# 检查布局和响应式规则
python3 scripts/search.py "responsive viewport" --domain ux

不适用场景

以下场景UI/UX设计工具箱免费版不适合处理：

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

触发条件

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

快速开始

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

依赖详情

# 验证Python环境
python3 --version
# 预期输出: Python 3.10+

# 验证搜索工具可用
python3 scripts/search.py "minimal" --domain style -n 3

三步生成设计系统

# 第1步:分析需求并搜索
python3 scripts/search.py "beauty spa wellness elegant" --design-system -p "Serenity Spa"

# 第2步:补充详细搜索
python3 scripts/search.py "elegant luxury serif" --domain typography
python3 scripts/search.py "soft pastel" --domain color

# 第3步:获取技术栈指引
python3 scripts/search.py "layout responsive" --stack html-tailwind

示例

项目设计配置文件

在项目根目录创建 design-config.json 管理设计决策:

{
  "project_name": "TaskFlow",
  "product_type": "SaaS",
  "industry": "productivity",
  "style": "minimal",
  "color_palette": {
    "primary": "#2563EB",
    "secondary": "#64748B",
    "accent": "#22D3EE",
    "background": "#FFFFFF",
    "text": "#0F172A"
  },
  "typography": {
    "heading": "Inter",
    "body": "Inter",
    "mono": "JetBrains Mono"
  },
  "stack": "html-tailwind"
}

免费版与专业版功能对比

最佳实践

1. 关键词越具体,结果越精准

# 不推荐:过于宽泛
python3 scripts/search.py "app" --design-system

# 推荐:具体到产品类型和行业
python3 scripts/search.py "healthcare SaaS dashboard minimal" --design-system

2. 多域组合搜索构建完整系统

# 风格 + 字体 + 配色 = 完整设计系统
python3 scripts/search.py "glassmorphism" --domain style
python3 scripts/search.py "modern sans-serif" --domain typography
python3 scripts/search.py "fintech" --domain color

3. 始终检查UX规则

# 开发完成后必查
python3 scripts/search.py "accessibility focus keyboard" --domain ux
python3 scripts/search.py "animation performance" --domain ux

4. 专业UI质量检查清单

常见问题

Q1: 免费版支持哪些技术栈?

免费版默认提供 html-tailwind(Tailwind CSS)技术栈的实现指引。如需React、Vue、Next.js、Svelte、SwiftUI、Flutter等更多技术栈支持,请升级至专业版。

Q2: 搜索结果不相关怎么办?

尝试更换关键词组合。例如,将"app"替换为"healthcare SaaS dashboard",具体的产品类型、行业和风格关键词能显著提升匹配精度。

Q3: 设计系统可以保存供后续使用吗?

免费版不支持设计系统持久化。每次搜索结果为即时输出。如需跨会话保存设计系统并支持页面级覆盖,请使用专业版的 --persist 功能。

Q4: Python版本有要求吗?

需要 Python 3.8 及以上版本。可通过 python3 --version 检查。如未安装,请参考依赖说明部分。

Q5: 可以搜索图表类型的推荐吗?

免费版不包含 chart 域搜索。图表类型推荐是专业版功能,支持趋势图、对比图、时间线、漏斗图等25种图表类型匹配。

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux
• Python版本: 3.8 及以上

第三方依赖

Python安装命令:

# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows
winget install Python.Python.3.12

API Key 配置

本Skill的CLI搜索工具基于本地数据文件运行,无需额外API Key。设计建议的生成由Agent内置LLM驱动,无需独立配置。

可用性分类

• 分类: MD+EXEC(纯Markdown指令,部分功能需exec命令行执行)
• 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent完成操作。核心查询功能依赖Python CLI脚本执行,需确保exec工具可用。

错误处理

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响