UI/UX CraftKit — 设计智能

面向 Web 与移动应用的完整设计指南。涵盖 50+ 种 UI 风格、161 套配色方案、57 组字体搭配、161 类产品类型及其推理规则、99 条 UX 准则，以及覆盖 10 种技术栈的 25 类图表类型。支持按优先级排序的可搜索数据库。

开源地址（GitHub）：github.com/hardikamal/ui-ux-craft-kit

搜索命令

python3 /scripts/search.py "" --domain  [-n ]

请将 替换为该技能目录的绝对路径。

可用领域（Domains）：

• product — 产品类型推荐（SaaS、电商、作品集等）
• style — UI 风格（玻璃拟态、极简主义、粗野主义等）＋ AI 提示词
• typography — 字体搭配（含 Google Fonts 引入方式）
• color — 按产品类型划分的配色方案
• landing — 着陆页结构与 CTA 策略
• chart — 图表类型及对应库推荐
• ux — 最佳实践与反模式
• icons — 图标库推荐
• react — React/Next.js 性能规范
• web — Web 可访问性与界面模式
• google-fonts — Google Fonts 搜索

按技术栈搜索：

python3 /scripts/search.py "" --stack react-native

设计系统生成：

python3 /scripts/search.py "" --design-system [-p "Project Name"]

适用场景

当任务涉及 UI 结构、视觉设计决策、交互模式或用户体验质量控制 时，请使用本技能。

必须使用

• 新建页面（着陆页、仪表盘、后台管理页、SaaS 应用、移动应用）
• 创建或重构 UI 组件（按钮、模态框、表单、表格、图表）
• 选择配色方案、字体系统、间距标准或布局系统
• 审查 UI 代码的可访问性或视觉一致性
• 实现导航结构、动效或响应式行为
• 进行产品级设计决策（风格、信息层级、品牌表达）
• 提升界面的感知质量、清晰度或可用性

跳过使用

• 纯后端逻辑开发
• 仅涉及 API 或数据库设计
• 与界面无关的性能优化
• 基础设施或 DevOps 工作

判断准则：若任务会改变某项功能的 外观、触感、动效表现或用户交互方式 → 请使用本技能。

使用方法（分步说明）

步骤 1：识别任务所属领域

在生成 UI 代码前，先执行搜索以获取相关的设计上下文：

# 获取某类产品类型的风格推荐
python3 /scripts/search.py "SaaS dashboard" --domain product

# 获取配色方案
python3 /scripts/search.py "fintech app" --domain color

# 获取字体搭配
python3 /scripts/search.py "modern minimal" --domain typography

# 生成完整设计系统
python3 /scripts/search.py "fitness tracking app" --design-system -p "FitTrack"

步骤 2：应用搜索结果

依据搜索返回的结果指导你的设计决策。所有结果均按优先级排序，来源于本地结构化数据库。

步骤 3：依据优先级规则进行质量核查

速查参考

可访问性（CRITICAL）

• 正文文本最低对比度需达 4.5:1
• 所有可交互元素必须显示焦点轮廓（focus ring）
• 对具有语义意义的图片提供描述性 alt 文本
• 仅含图标的按钮须添加 aria-label
• Tab 键顺序须与视觉顺序一致
• 支持 prefers-reduced-motion 媒体查询

触控与交互（CRITICAL）

• 最小触控目标尺寸：Apple 规范为 44×44pt，Material 规范为 48×48dp
• 触控目标之间最小间距为 8px
• 主交互应基于点击/轻触（tap），避免仅依赖悬停（hover）
• 异步操作期间禁用按钮并显示加载指示器（spinner）
• 所有可点击元素应添加 cursor-pointer 样式

性能（HIGH）

• 图片优先选用 WebP/AVIF 格式，并配合响应式 srcset
• 显式声明 width/height 属性以防止 CLS
• CSS 字体加载使用 font-display: swap 避免 FOIT
• 对视口以下图片启用懒加载
• 列表项超过 50 条时须启用虚拟滚动（virtualization）

风格选择（HIGH）

• 风格须与产品类型匹配（建议运行 --domain product 查询）
• 图标统一使用 SVG（如 Heroicons、Lucide），禁止使用 emoji 替代图标
• 全产品范围内只使用一套图标集与视觉语言
• 每屏仅设置一个主要 CTA 按钮

布局与响应式（HIGH）

• HTML 中需包含 viewport meta：width=device-width, initial-scale=1
• 采用移动优先设计流程：375px → 768px → 1024px → 1440px
• 移动端禁止出现水平滚动
• 统一使用 4pt / 8dp 的间距比例尺（spacing scale）
• 移动端推荐使用 min-h-dvh 替代 100vh

排版与配色（MEDIUM）

• 正文字号不得小于 16px（避免 iOS 自动缩放）
• 正文行高建议为 1.5–1.75
• 桌面端每行字符数建议控制在 65–75 个
• 组件内应使用语义化颜色 Token，而非直接写死 hex 值
• 标题加粗（600–700）、正文常规（400）、标签中等（500）

动效（MEDIUM）

• 微交互时长控制在 150–300ms
• 仅允许使用 transform 和 opacity 属性做动画，禁止对 width/height 动画
• 尊重 prefers-reduced-motion 用户偏好
• 退出动画时长约为进入动画的 60–70%
• 每个动画都必须承载明确意图，不可仅为装饰而存在

表单与反馈（MEDIUM）

• 每个输入框必须配有可见标签（不可仅依赖 placeholder）
• 错误提示应显示在对应字段下方
• 校验应在失去焦点（blur）时触发，而非逐字（keystroke）校验
• 执行破坏性操作前须二次确认
• Toasts 通知应在 3–5 秒后自动消失

导航（HIGH）

• 底部导航栏最多显示 5 项，且每项均需附带文字标签
• 返回导航行为必须可预测、符合用户心智模型
• 所有关键页面均应支持深度链接（deep link）直达
• 返回时需保留页面状态（state preservation）

图表与数据（LOW）

• 图表类型须匹配数据类型（趋势类 → 折线图，对比类 → 柱状图）
• 图例须紧邻图表展示
• 图表须支持悬停（hover）或点击（tap）触发 Tooltip
• 配色方案须满足无障碍要求（不可仅依赖红/绿色区分）