これは、AIエージェントに60+インターフェースコンポーネントのベストプラクティス、レイアウトパターン、デザインシステムの慣習などのリアルUIコンポーネント知識を与えるカーソルスキルで、汎用的な出力ではなく本番レベルのUIを生成します。

それが何をするのか

CursorにUIを作成してもらうと、通常はコンポーネントパターンを推測します。このスキルは、component.galleryから得られたキュレーションされたナレッジベースに置き換え、以下のように強化されます:

• すべてのコンポーネント(アクセシビリティ、サイズ、挙動)に関するベストプラクティス
• 一般的なレイアウト — 各パターンの実証済み配置
• エイリアス — エージェントが任意の名前でコンポーネントを認識できるようにする
• デザイン哲学 — 現代的で最小限のSaaS品質基準
• アンチパターン — 避けるべき具体的なこと

その結果、テンプレートから組み立てられたものではなく、シニアプロダクトデザイナーが設計したかのようなインターフェースが生まれました。

インストール

オプションA — 個人スキル(全プロジェクト)

オプションB — プロジェクトスキル(チームと共有)

オプションC — マニュアル

[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