ui-design-brain by carmahhawwari/ui-design-brain
npx skills add https://github.com/carmahhawwari/ui-design-brain --skill ui-design-brain此技能提供了一个精选的知识库,包含 60 多种 UI 组件模式,源自 component.gallery,并融入了最佳实践、布局指导和用法规则。在生成界面时,它用真实的设计系统知识取代了通用猜测。
在编写任何 UI 代码之前,请咨询此技能以选择合适的组件并遵循其最佳实践。完整参考请阅读 components.md。
当用户要求构建、设计或生成以下内容时应用:
每个生成的界面都应该感觉现代、极简且可用于生产环境——而不是像一个模板。
输出应匹配您对顶级 SaaS 公司高级产品设计师的期望:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
阅读用户的请求,确定需要哪些 UI 组件。参考 components.md,按名称或别名查找每个组件。
常见映射:
对于界面中的每个组件,遵循参考中的最佳实践。广泛适用的关键规则:
布局
交互
排版与间距
状态
选择最符合用户意图的样式预设,如果不清楚则询问:
现代 SaaS(默认)
苹果级极简
企业 / 公司
创意 / 作品集
数据仪表板
遵循以下规则编写可用于生产环境的代码:
Stack: React + Tailwind CSS (除非用户另有指定)
Spacing: Tailwind 间距比例(p-2, gap-4 等),基于 8px 网格
Colors: CSS 变量或 Tailwind 配置,确保调色板一致性
Typography: Tailwind 文本工具类;通过 Google Fonts 使用富有表现力的字体配对
States: 为所有交互元素实现悬停、焦点、激活、禁用状态
Responsive: 移动优先;在 375、768、1440 像素处测试
Accessibility: 语义化 HTML,需要时使用 ARIA,焦点管理
以下是 15 个最常用的组件。有关包含最佳实践、别名和布局示例的完整 60+ 组件参考,请参阅 components.md。
| 组件 | 何时使用 | 关键规则 |
|---|---|---|
| 按钮 | 触发操作 | 动词优先标签;每个区域一个主要按钮 |
| 卡片 | 表示实体 | 媒体 → 标题 → 元信息 → 操作;阴影或边框,不同时使用 |
| 模态框 | 集中注意力 | 捕获焦点;关闭按钮 + 取消按钮 + Escape 键关闭 |
| 导航 | 页面/部分链接 | 最多 5–7 项;清晰的激活状态 |
| 表格 | 结构化数据 | 固定表头;数字右对齐;可排序列 |
| 标签页 | 切换面板 | 2–7 个标签页;激活指示器;移动端使用手风琴式 |
| 表单 | 收集输入 | 单列;标签在上方;失焦时内联验证 |
| 轻提示 | 简短确认 | 自动关闭 4–6 秒;破坏性操作提供撤销选项 |
| 警告框 | 重要状态 | 语义颜色 + 图标;最多 2 句话 |
| 抽屉 | 次要面板 | 右侧用于详情,左侧用于导航;桌面端宽度 320–480 像素 |
| 搜索输入框 | 查找内容 | Cmd/Ctrl+K 快捷键;防抖 200–300 毫秒 |
| 空状态 | 无数据 | 插图 + 标题 + 行动号召;积极措辞 |
| 骨架屏 | 加载占位符 | 匹配实际布局形状;微光动画 |
| 徽章 | 状态/元数据标签 | 1–2 个词;状态使用药丸形状;有限的调色板 |
| 下拉菜单 | 操作/导航选项 | 7±2 项;破坏性操作放在最后并用红色表示 |
切勿生成这些——它们标志着通用、低质量的 UI:
每周安装次数
36
仓库
GitHub 星标数
545
首次出现
11 天前
安全审计
安装于
kimi-cli34
gemini-cli34
codex34
cursor34
opencode34
amp34
This skill provides a curated knowledge base of 60+ UI component patterns sourced from component.gallery and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.
Before writing any UI code , consult this skill to select the right components and follow their best practices. Read components.md for the full reference.
Apply whenever the user asks to build, design, or generate:
Every generated interface should feel modern, minimal, and production-ready — not like a template.
The output should match what you'd expect from a senior product designer at a top SaaS company:
Read the user's request and determine which UI components are needed. Reference components.md to find each component by name or alias.
Common mappings:
For each component in the interface, follow its best practices from the reference. Key rules that apply broadly:
Layout
Interaction
Typography & Spacing
States
Select the style preset that best matches the user's intent, or ask if unclear:
Modern SaaS (default)
Apple-level Minimal
Enterprise / Corporate
Creative / Portfolio
Data Dashboard
Write production-ready code following these rules:
Stack: React + Tailwind CSS (unless user specifies otherwise)
Spacing: Tailwind spacing scale (p-2, gap-4, etc.) on an 8px grid
Colors: CSS variables or Tailwind config for palette consistency
Typography: Tailwind text utilities; expressive font pairings via Google Fonts
States: Implement hover, focus, active, disabled for all interactive elements
Responsive: Mobile-first; test at 375, 768, 1440 px
Accessibility: Semantic HTML, ARIA where needed, focus management
Below are the 15 most commonly needed components. For the full 60+ component reference with best practices, aliases, and layout examples, see components.md.
| Component | When to use | Key rule |
|---|---|---|
| Button | Trigger actions | Verb-first labels; one primary per section |
| Card | Represent an entity | Media → title → meta → action; shadow OR border, not both |
| Modal | Focused attention | Trap focus; X + Cancel + Escape to close |
| Navigation | Page/section links | 5–7 items max; clear active state |
| Table | Structured data | Sticky header; right-align numbers; sortable columns |
| Tabs | Switch panels | 2–7 tabs; active indicator; accordion on mobile |
| Form | Collect input | Single column; labels above; inline validation on blur |
Never generate these — they signal generic, low-quality UI:
Weekly Installs
36
Repository
GitHub Stars
545
First Seen
11 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
kimi-cli34
gemini-cli34
codex34
cursor34
opencode34
amp34
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装
Pinia - Vue官方状态管理库:类型安全、支持Options/Composition API、TypeScript
8,200 周安装
Web应用自动化测试技能 - Playwright浏览器测试、UI验证与调试指南
8,400 周安装
Google Workspace CLI 工作流自动化工具 - gws-workflow 命令详解与使用指南
8,500 周安装
JUnit 5+ 最佳实践指南:编写高效单元测试与参数化测试
8,400 周安装
SQL代码审查工具:自动化安全检查、性能优化与最佳实践指南
8,500 周安装
网页游戏引擎开发指南:使用HTML5 Canvas、WebGL、JavaScript构建2D/3D游戏
8,400 周安装
| Brief confirmation |
| Auto-dismiss 4–6 s; undo action for destructive ops |
| Alert | Important status | Semantic colors + icon; max 2 sentences |
| Drawer | Secondary panel | Right for detail, left for nav; 320–480 px desktop |
| Search input | Find content | Cmd/Ctrl+K shortcut; debounce 200–300 ms |
| Empty state | No data | Illustration + headline + CTA; positive framing |
| Skeleton | Loading placeholder | Match actual layout shape; shimmer animation |
| Badge | Status/metadata label | 1–2 words; pill shape for status; limited color palette |
| Dropdown menu | Action/nav options | 7±2 items; destructive actions last in red |