Навык Cursor, который даёт агенту AI реальные знания о компонентах интерфейса — лучшие практики, шаблоны макета и конвенции дизайн-системы для 60+ компонентов интерфейса — чтобы он генерировал производственный UI, а не стандартный вывод.

Что он делает

Когда вы просите Cursor создать интерфейс, он обычно угадывает шаблоны компонентов. Этот навык заменяет угадывания на кураторскую базу знаний, полученную с component.gallery и обогащённую следующими:

• Лучшие практики для каждого компонента (доступность, размер, поведение)
• Общие раскладки — проверенные варианты для каждого узора
• Алиасы — то есть агент распознаёт компоненты по любому имену
• Философия дизайна — современные, минималистичные, SaaS-стандарты качества
• Антипаттерны — конкретные вещи, которых следует избегать

Результат: интерфейсы, которые кажутся разработанными старшим продуктовым дизайнером, а не собранными по шаблону.

Установка

Вариант A — Личный навык (все проекты)

Вариант B — навык проекта (совместно с командой)

Вариант C — Manual

Скопируйте файлы SKILL.md и components.md в один из них:

• ~/.cursor/skills/ui-design-brain/ (личное)
• .cursor/skills/ui-design-brain/ (проект)

Использование

UI Design Brain

A Cursor skill that gives the AI agent real UI component knowledge — best practices, layout patterns, and design-system conventions for 60+ interface components — so it generates production-grade UI instead of generic output.

What it does

When you ask Cursor to build a UI, it typically guesses at component patterns. This skill replaces guessing with a curated knowledge base sourced from component.gallery and enriched with:

• Best practices for every component (accessibility, sizing, behavior)
• Common layouts — proven arrangements for each pattern
• Aliases — so the agent recognizes components by any name
• Design philosophy — modern, minimal, SaaS-quality standards
• Anti-patterns — specific things to avoid

The result: interfaces that feel designed by a senior product designer, not assembled from a template.

Install

Option A — Personal skill (all projects)

# Clone into your Cursor skills directory
git clone https://github.com/carmahhawwari/ui-design-brain.git \
  ~/.cursor/skills/ui-design-brain

Option B — Project skill (shared with team)

# Clone into your project's .cursor/skills directory
git clone https://github.com/carmahhawwari/ui-design-brain.git \
  .cursor/skills/ui-design-brain

Option C — Manual

Copy the SKILL.md and components.md files into either:

• ~/.cursor/skills/ui-design-brain/ (personal)
• .cursor/skills/ui-design-brain/ (project)

Usage

Once installed, the skill activates automatically when you ask Cursor to build UI. You don’t need to reference it explicitly.

Examples

Just ask naturally:

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

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

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

The agent will automatically:

1. Identify which components your request needs
2. Look up best practices for each one
3. Apply the right design direction (SaaS, minimal, corporate, creative, or dashboard)
4. Generate production-ready code following the patterns

Design directions

The skill includes 5 built-in style presets. You can request one explicitly:

Build a pricing page with an Apple-minimal aesthetic.

What’s inside

ui-design-brain/
├── SKILL.md          # Main instructions — design philosophy, workflow, quick reference
├── components.md     # Full reference — 60 components with best practices and layouts