UI 设计大脑

这是一项 Cursor 技能，为 AI 代理提供真实的 UI 组件知识——包括 60 多种界面组件的最佳实践、布局模式和设计系统规范——使其生成生产级的 UI，而非通用输出。

功能简介

当您让 Cursor 构建 UI 时，它通常会猜测组件的使用方式。而这项技能则用精心整理的知识库取代了这种猜测，该知识库源自 component.gallery，并进一步丰富了以下内容：

• 每个组件的 最佳实践（如可访问性、尺寸、行为等）
• 常见布局——每种模式下经过验证的排列方式
• 别名——使代理能够识别任何名称的组件
• 设计哲学——现代、极简、SaaS 级别的设计标准
• 反模式——需要避免的具体事项

最终结果是：界面看起来像是由资深产品设计师精心设计的，而不是简单地从模板中拼凑出来的。

安装方法

方法 A — 个人技能（适用于所有项目）

# 克隆到您的 Cursor 技能目录
git clone https://github.com/carmahhawwari/ui-design-brain.git \
  ~/.cursor/skills/ui-design-brain

方法 B — 项目技能（与团队共享）

# 克隆到您项目的 .cursor/skills 目录
git clone https://github.com/carmahhawwari/ui-design-brain.git \
  .cursor/skills/ui-design-brain

方法 C — 手动安装

将 SKILL.md 和 components.md 文件复制到以下任一位置：

• ~/.cursor/skills/ui-design-brain/（个人技能）
• .cursor/skills/ui-design-brain/（项目技能）

使用方法

安装完成后，当您要求 Cursor 构建 UI 时，该技能会自动激活，无需您显式引用。

示例

只需自然地提出需求即可：

构建一个带有侧边导航栏、开关偏好设置和个人资料部分的设置页面。

创建一个包含搜索、筛选、可排序列和分页的数据表格。

设计一个 SaaS 仪表盘，包含 KPI 卡片、图表区域和活动信息侧边栏。

代理将自动执行以下步骤：

1. 识别您的请求所需的组件
2. 查找每个组件的最佳实践
3. 应用合适的设计方向（SaaS、极简、企业级、创意或仪表盘风格）
4. 按照既定模式生成可直接投入生产的代码

设计方向

该技能内置了 5 种样式预设，您可以明确指定其中一种：

预设	适用场景
现代 SaaS	默认选项——简洁、宽敞、专业
苹果级极简	极致简约，留白充足
企业/公司级	信息密集，支持键盘导航
创意/作品集	大胆、富有表现力，采用编辑风格排版
数据仪表盘	优化数据的可读性和扫描效率

构建一个具有苹果级极简风格的定价页面。

内容概览

ui-design-brain/
├── SKILL.md          # 主要说明文档——设计哲学、工作流程、快速参考
├── components.md     # 完整参考——60 种组件及其最佳实践和布局
├── LICENSE.txt       # MIT 许可证
└── README.md         # 当前文件

组件覆盖范围

涵盖 60 种组件，包括：折叠面板、警告框、头像、徽章、面包屑导航、按钮、按钮组、卡片、轮播图、复选框、颜色选择器、组合框、日期输入、日历选择器、抽屉菜单、下拉菜单、空状态提示、字段集、文件、文件上传、页脚、表单、页眉、标题、英雄区、图标、图片、标签、链接、列表、模态框、导航栏、分页控件、弹出框、进度条、进度指示器、引用、单选按钮、评分组件、富文本编辑器、搜索框、分段控件、下拉选择框、分隔线、骨架屏、跳转链接、滑块、加载动画、堆栈布局、步进器、表格、选项卡、文本输入框、文本域、通知气泡、切换开关、工具提示、树形视图、视频、视觉隐藏元素等。

与通用前端技能的区别

	通用前端技能	UI 设计大脑
组件知识	缺乏——依赖模型训练	包含 60 种组件及具体最佳实践
布局指导	一般性建议	针对每个组件的具体布局模式
反模式	未提及	明确列出需避免的事项
可访问性	仅笼统提及	针对每个组件制定具体规则（焦点锁定、ARIA 属性、键盘导航等）
设计系统基础	模型的一般知识	来自 real design systems 的实际数据，通过 component.gallery 提供

贡献指南

欢迎提交 PR。如需添加或更新组件：

1. 编辑 components.md——请遵循现有格式（名称、别名、描述、最佳实践、常见布局）
2. 如果该组件较为常用，请将其加入 SKILL.md 中的快速参考表格
3. 保持 SKILL.md 文件不超过 500 行

许可证

MIT 许可证——详情请参阅 LICENSE.txt。

组件数据来源于 component.gallery。

UI Design Brain 快速上手指南

UI Design Brain 是一款专为 Cursor 编辑器设计的技能插件。它为 AI 代理注入了 60+ 种 UI 组件的专业知识（包括最佳实践、布局模式和设计规范），使其能够生成生产级的高质量界面代码，而非通用的模板化输出。

环境准备

• 编辑器：已安装 Cursor 编辑器。
• 系统要求：支持 macOS、Linux 或 Windows（需具备 Git 环境）。
• 前置依赖：
  • 确保系统已安装 git。
  • 无需额外配置 Node.js 或 Python 环境，该工具纯文本驱动，由 Cursor 原生加载。

安装步骤

你可以选择将技能安装为个人全局技能（适用于所有项目）或项目局部技能（仅适用于当前项目，便于团队共享）。

选项 A：个人全局技能（推荐个人开发者）

将仓库克隆至 Cursor 的全局技能目录：

git clone https://github.com/carmahhawwari/ui-design-brain.git \
  ~/.cursor/skills/ui-design-brain

注意：Windows 用户请将路径替换为 %USERPROFILE%\.cursor\skills\ui-design-brain。

选项 B：项目局部技能（推荐团队协作）

将仓库克隆至当前项目的 .cursor/skills 目录：

git clone https://github.com/carmahhawwari/ui-design-brain.git \
  .cursor/skills/ui-design-brain

选项 C：手动安装

如果不使用 Git，可直接下载仓库中的 SKILL.md 和 components.md 文件，并将其放入以下任一目录：

• 个人模式：~/.cursor/skills/ui-design-brain/
• 项目模式：.cursor/skills/ui-design-brain/

基本使用

安装完成后，无需任何额外配置或显式调用。当你在 Cursor 中请求构建 UI 时，该技能会自动激活。

1. 自然语言指令

直接在 Chat 面板中输入自然语言描述，AI 将自动识别组件、应用最佳实践并生成代码。

示例 1：构建设置页面

Build a settings page with a sidebar navigation, toggle preferences, and a profile section.

示例 2：创建数据表格

Create a data table with search, filters, sortable columns, and pagination.

示例 3：设计 SaaS 仪表盘

Design a SaaS dashboard with KPI cards, a chart area, and an activity feed sidebar.

2. 指定设计风格

该技能内置了 5 种设计预设，你可以在指令中明确指定风格：

预设风格	适用场景
Modern SaaS	默认风格，干净、宽敞、专业
Apple-level Minimal	极致简洁，大量留白
Enterprise / Corporate	信息密集，强调键盘导航
Creative / Portfolio	大胆、表现力强，适合作品集
Data Dashboard	针对数据可读性优化

使用示例：

Build a pricing page with an Apple-minimal aesthetic.

AI 将自动执行以下步骤：

1. 识别需求中的组件（如侧边栏、开关、卡片等）。
2. 查询每个组件的最佳实践（无障碍访问、尺寸、行为）。
3. 应用指定的设计方向。
4. 生成符合生产标准的代码。