bencium-controlled-ux-designer by bencium/bencium-claude-code-design-skill
npx skills add https://github.com/bencium/bencium-claude-code-design-skill --skill bencium-controlled-ux-designer帮助创建独特、易于访问且经过精心设计的界面的专业 UI/UX 设计技能。此技能强调设计决策协作,摆脱通用模式,并构建在保持功能性和可访问性的同时脱颖而出的界面。
关键:设计决策协议
避免通用训练数据集模式:
灵感来源:
视觉趣味策略:
通过简化实现简洁
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
材料真实性
示例:
* 可点击:使用鲜明的颜色、悬停状态变化、光标反馈
* 容器:使用细微的边框(1px)、背景颜色变化或充足的填充
* 层级:使用比例、粗细和间距,而非高度
3. 功能分层(而非视觉深度)
* 通过字体比例、颜色对比和空间关系创建层次结构
* 概念上分层信息(主要 → 次要 → 三级)
* 拒绝模仿物理深度的拟物化阴影/渐变
* 拥抱功能深度:内容上的模态框,UI 上的下拉菜单
4. 执着于细节
* 考虑每个像素、交互和过渡
* 卓越源于数百个微小而刻意的决定
* 平衡:细节应服务于简洁,而非复杂
* 当细节与清晰度冲突时,清晰度优先
5. 连贯的设计语言
* 每个元素都应视觉上传达其功能
* 元素应感觉是一个统一系统的一部分
* 不应有任何感觉是随意的
6. 技术的隐形性
* 最好的技术会消失
* 用户应专注于内容和目标,而非理解界面
颜色使用:
字体排印:
动画:
间距:
在呈现任何设计之前,验证:
设计系统框架:
要了解设计系统中哪些是固定的(通用规则)、项目特定的(品牌个性)和可适应的(依赖于上下文),请参阅 DESIGN-SYSTEM-TEMPLATE.md(元框架、项目模板、决策树)。
颜色系统架构:
每个界面都需要两种颜色角色:
基础/中性调色板(4-5 种颜色):
强调调色板(1-3 种颜色):
调色板结构示例:
Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
颜色应用规则:
颜色关系:
根据品牌有意识地选择暖色或冷色:
强调色应与两者形成清晰对比:
有意识的颜色使用:
可访问性:
独特的颜色策略:
为了从通用模式中脱颖而出:
字体排印理念:
字体排印是传达个性和层次结构的主要设计元素。
功能性字体与情感性字体:
字体选择:
字体版本使用:
推荐来源:
字体比例:
使用数学关系进行尺寸层次结构:
比例:大三度(1.25 倍)用于中等对比,纯四度(1.333 倍)用于戏剧性对比
基础尺寸:正文文本 16px(1rem)
示例比例(1.25 倍):
xs: 0.64rem (10px)
sm: 0.8rem (13px)
base: 1rem (16px)
lg: 1.25rem (20px)
xl: 1.563rem (25px)
2xl: 1.953rem (31px)
3xl: 2.441rem (39px)
4xl: 3.052rem (49px)
5xl: 3.815rem (61px)
字体层次结构:
间距与可读性:
字体配对逻辑:
当使用多种字体时,通过以下方式创建对比:
示例:
UI 字体排印:
界面元素的具体指导:
响应式字体排印:
跨断点缩放字体尺寸:
// 使用 Tailwind 的示例
<h1 className="text-3xl md:text-4xl lg:text-5xl">
Responsive Headline
</h1>
// 或使用 CSS clamp(流体)
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
在移动设备上减小尺寸(比桌面小 20-30%) 在小屏幕上减少层次级别(更少的独特尺寸)
构图平衡:
网格纪律:
gap 的网格/弹性包装器进行间距空间关系:
注意力引导:
有目的的动画:
每个动画必须服务于功能性目的:
动画与格式塔原则:
运动应加强视觉关系:
自然物理:
动画应感觉有机,而非机械:
微妙的克制:
prefers-reduced-motion 媒体查询时间指南:
物理配置文件:
为元素类型定义一致的持续时间:
性能优化:
transform 和 opacity(GPU 加速,平滑 60fps)width, height, top, left, margin(导致重排/重绘)will-change 处理复杂动画(预分配 GPU 资源)实现:
framer-motion@media (prefers-reduced-motion: reduce) 以禁用/减少动画示例:
// 简单的悬停过渡
<button className="
transition-colors duration-200 ease-out
bg-blue-600 hover:bg-blue-700
">
Click me
</button>
// 用于复杂交互的 Framer Motion
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3, ease: "easeOut" }}
>
Content
</motion.div>
运动规范:
有关详细的运动规范,请参阅 MOTION-SPEC.md(缓动曲线、持续时间表、特定状态动画、实现模式)。
核心 UX 原则:
直接操作
即时反馈
一致的行为
容错性
渐进式披露
现代 UX 模式:
在适当时优先考虑自然语言交互:
四种类型:
* **纯聊天**:完整对话(AI 助手,支持机器人)
* **命令面板**:基于文本的快捷方式(Cmd+K,随处搜索)
* **智能搜索**:自然语言查询(搜索“下周会议”与过滤)
* **表单替代方案**:对话式数据收集(“你叫什么名字?”与表单字段)
何时使用:
* 具有多个变量的复杂搜索
* 任务指导(向导,入门引导)
* 上下文帮助
* 快速操作(命令面板)
何时不使用:
* 简单表单(直接使用输入框)
* 精确控制界面(设计工具,仪表板)
* 高频重复性任务
2. 自适应布局
自动响应用户上下文:
* **基于时间**:夜间深色模式,白天浅色模式
* **基于设备**:移动设备上简化 UI,桌面上完整功能
* **基于连接**:慢速连接时减少图像/视频
* **基于使用情况**:优先考虑频繁操作,隐藏很少使用的功能
示例:
* 基于时间或系统偏好的自动深色/浅色模式
* 简化的移动导航(汉堡菜单)与完整的桌面导航
* 小屏幕上折叠侧边栏,大屏幕上展开
3. 极简、扁平化设计
当前的美学偏好:
* 无投影(模态框/下拉菜单的细微投影除外)
* 无用于深度的渐变(如果需要,可用于强调/背景)
* 无玻璃态效果
* 专注于字体排印、颜色和间距来创建层次结构
* 功能深度:内容层(模态框,面板)使用定位,而非视觉深度
导航:
组件库:
@/components/ui 中)import { Button } from "@/components/ui/button";<Button> 优于 <button>)样式引擎:
index.css 中通过 CSS 自定义属性定义的主题变量@theme 中映射变量(参见 tailwind.config.js)图标:
@phosphor-icons/react 处理按钮和输入框import { Plus } from "@phosphor-icons/react"; <Plus />size 或 weight通知:
sonner 处理吐司通知import { toast } from 'sonner'加载状态:
间距策略:
gap 的网格/弹性包装器进行间距条件样式:
className={clsx('base-class', { 'active-class': isActive })}流体布局:
媒体查询:
触摸目标:
性能:
核心要求:
实现细节:
tabindex="0"aria-labelrole 属性理解上下文:
探索选项:
迭代实现:
验证:
视觉测试:
可访问性测试:
跨设备测试:
初始提问:
Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)
获得批准后,实现:
import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";
<Button
className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
Get Started
<ArrowRight className="ml-2" />
</Button>
首先提问:
For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading
Should we go bold and contemporary, or subtle and refined?
批准后实现:
<div className="space-y-4">
<h1 className="text-5xl font-bold tracking-tight text-slate-900">
Headline Here
</h1>
<h2 className="text-2xl text-slate-600">
Supporting subheading
</h2>
<p className="text-base leading-relaxed text-slate-700">
Body text optimized for readability with proper line height.
</p>
</div>
呈现选项:
I'd like to suggest three color directions that break from typical SaaS patterns:
1. **Warm Earth Tones**
- Base: Warm grey (#E8E2DC)
- Accent: Terracotta (#C86E4B)
- For: Organic, trustworthy feel
2. **Cool Midnight**
- Base: Deep navy (#1A2332)
- Accent: Cyan (#4ECDC4)
- For: Modern, tech-forward feel
3. **Soft Pastels**
- Base: Soft pink (#FFE5E5)
- Accent: Sage green (#9DB5A4)
- For: Calm, approachable feel
Which direction feels right for your brand?
❌ 不要:
✅ 要:
有关其他上下文,请参阅:
每周安装次数
53
仓库
GitHub 星标
89
首次出现
2026年1月21日
安全审计
安装于
claude-code46
gemini-cli44
cursor42
opencode42
codex41
github-copilot40
Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
CRITICAL: Design Decision Protocol
Avoid Generic Training Dataset Patterns:
Draw Inspiration From:
Visual Interest Strategies:
Simplicity Through Reduction
Material Honesty
Examples:
* Clickable: Use distinct colors, hover state changes, cursor feedback
* Containers: Use subtle borders (1px), background color shifts, or generous padding
* Hierarchy: Use scale, weight, and spacing rather than elevation
3. Functional Layering (Not Visual Depth)
* Create hierarchy through typography scale, color contrast, and spatial relationships
* Layer information conceptually (primary → secondary → tertiary)
* Reject skeuomorphic shadows/gradients that imitate physical depth
* Embrace functional depth: modals over content, dropdowns over UI
4. Obsessive Detail
* Consider every pixel, interaction, and transition
* Excellence emerges from hundreds of small, intentional decisions
* Balance: Details should serve simplicity, not complexity
* When detail conflicts with clarity, clarity wins
5. Coherent Design Language
* Every element should visually communicate its function
* Elements should feel part of a unified system
* Nothing should feel arbitrary
6. Invisibility of Technology
* The best technology disappears
* Users should focus on content and goals, not on understanding the interface
Color Usage:
Typography:
Animation:
Spacing:
Before presenting any design, verify:
Design System Framework:
For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, see DESIGN-SYSTEM-TEMPLATE.md (meta-framework, project templates, decision trees).
Color System Architecture:
Every interface needs two color roles:
Base/Neutral Palette (4-5 colors):
Accent Palette (1-3 colors):
Palette Structure Example:
Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
Color Application Rules:
Color Relationships:
Choose warm or cool intentionally based on brand:
Accent colors should have clear contrast with both:
Intentional Color Usage:
Accessibility:
Unique Color Strategy:
To stand out from generic patterns:
Typography Philosophy:
Typography is a primary design element that conveys personality and hierarchy.
Functional vs Emotional Typography:
Font Selection:
Font Version Usage:
Recommended Sources:
Typographic Scale:
Use mathematical relationships for size hierarchy:
Ratio : Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
Base size : 16px (1rem) for body text
Example scale (1.25x) :
xs: 0.64rem (10px)
sm: 0.8rem (13px)
base: 1rem (16px)
lg: 1.25rem (20px)
xl: 1.563rem (25px)
2xl: 1.953rem (31px)
3xl: 2.441rem (39px)
4xl: 3.052rem (49px)
5xl: 3.815rem (61px)
Typographic Hierarchy:
Spacing & Readability:
Font Pairing Logic:
When using multiple typefaces, create contrast through:
Examples:
UI Typography:
Specific guidance for interface elements:
Responsive Typography:
Scale type sizes across breakpoints:
// Example with Tailwind
<h1 className="text-3xl md:text-4xl lg:text-5xl">
Responsive Headline
</h1>
// Or with CSS clamp (fluid)
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
Reduce sizes on mobile (20-30% smaller than desktop) Reduce hierarchy levels on small screens (fewer distinct sizes)
Compositional Balance:
Grid Discipline:
gap for spacingSpatial Relationships:
Attention Guidance:
Purposeful Animation:
Every animation must serve a functional purpose:
Animation & Gestalt Principles:
Motion should reinforce visual relationships:
Natural Physics:
Animations should feel organic, not mechanical:
Subtle Restraint:
prefers-reduced-motion media queryTiming Guidelines:
Physics Profiles:
Define consistent durations for element types:
Performance Optimization:
transform and opacity only (GPU-accelerated, smooth 60fps)width, height, top, left, margin (causes reflow/repaint)will-change sparingly for complex animations (pre-allocates GPU resources)Implementation:
framer-motion sparingly and purposefully@media (prefers-reduced-motion: reduce) to disable/reduce animationsExample:
// Simple hover transition
<button className="
transition-colors duration-200 ease-out
bg-blue-600 hover:bg-blue-700
">
Click me
</button>
// Framer Motion for complex interaction
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3, ease: "easeOut" }}
>
Content
</motion.div>
Motion Specification:
For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).
Core UX Principles:
Direct Manipulation
Immediate Feedback
Consistent Behavior
Modern UX Patterns:
Prioritize natural language interaction where appropriate:
Four types:
* **Pure chat** : Full conversation (AI assistants, support bots)
* **Command palette** : Text-based shortcuts (Cmd+K, search everywhere)
* **Smart search** : Natural language queries (search "meetings next week" vs filtering)
* **Form alternatives** : Conversational data collection ("What's your name?" vs form fields)
When to use:
* Complex searches with multiple variables
* Task guidance (wizards, onboarding)
* Contextual help
* Quick actions (command palette)
When NOT to use:
* Simple forms (just use inputs)
* Precise control interfaces (design tools, dashboards)
* High-frequency repetitive tasks
2. Adaptive Layouts
Respond to user context automatically:
* **Time-based** : Dark mode at night, light during day
* **Device-based** : Simplified UI on mobile, full features on desktop
* **Connection-based** : Reduce images/video on slow connections
* **Usage-based** : Prioritize frequent actions, hide rarely-used features
Examples:
* Auto dark/light mode based on time or system preference
* Simplified mobile navigation (hamburger menu) vs full desktop nav
* Collapsed sidebar on small screens, expanded on large
3. Minimal, Flat Design
Current aesthetic preference:
* No drop shadows (except subtle ones for modals/dropdowns)
* No gradients for depth (use for accents/backgrounds if desired)
* No glass morphism effects
* Focus on typography, color, and spacing to create hierarchy
* Functional depth: Layers of content (modals, sheets) use positioning, not visual depth
Navigation:
Component Library:
@/components/ui)import { Button } from "@/components/ui/button";<Button> over <button>)Styling Engine:
index.css via CSS custom properties@theme (see tailwind.config.js)Icons:
@phosphor-icons/react for buttons and inputsimport { Plus } from "@phosphor-icons/react"; <Plus />size or weight unless requestedNotifications:
sonner for toastsimport { toast } from 'sonner'Loading States:
Spacing Strategy:
gap for spacingConditional Styling:
className={clsx('base-class', { 'active-class': isActive })}Fluid Layouts:
Media Queries:
Touch Targets:
Performance:
Core Requirements:
Implementation Details:
tabindex="0" for custom interactive elementsaria-label for buttons without textrole attributes when semantic HTML isn't sufficientUnderstand Context:
Explore Options:
Implement Iteratively:
Validate:
Visual Testing:
Accessibility Testing:
Cross-Device Testing:
Initial Question to Ask:
Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)
After Getting Approval, Implementation:
import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";
<Button
className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
Get Started
<ArrowRight className="ml-2" />
</Button>
Question First:
For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading
Should we go bold and contemporary, or subtle and refined?
Implementation After Approval:
<div className="space-y-4">
<h1 className="text-5xl font-bold tracking-tight text-slate-900">
Headline Here
</h1>
<h2 className="text-2xl text-slate-600">
Supporting subheading
</h2>
<p className="text-base leading-relaxed text-slate-700">
Body text optimized for readability with proper line height.
</p>
</div>
Presenting Options:
I'd like to suggest three color directions that break from typical SaaS patterns:
1. **Warm Earth Tones**
- Base: Warm grey (#E8E2DC)
- Accent: Terracotta (#C86E4B)
- For: Organic, trustworthy feel
2. **Cool Midnight**
- Base: Deep navy (#1A2332)
- Accent: Cyan (#4ECDC4)
- For: Modern, tech-forward feel
3. **Soft Pastels**
- Base: Soft pink (#FFE5E5)
- Accent: Sage green (#9DB5A4)
- For: Calm, approachable feel
Which direction feels right for your brand?
❌ Don't:
✅ Do:
For additional context, see:
Weekly Installs
53
Repository
GitHub Stars
89
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code46
gemini-cli44
cursor42
opencode42
codex41
github-copilot40
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装
React组件AI渲染教程:使用add-components-to-registry将组件转换为Tambo注册组件
106 周安装
Plasmo 扩展架构师:构建高效安全的浏览器扩展,支持 MV3 服务工作者与内容脚本
113 周安装
使用 QuickChart.io 生成极简风格图表 | 支持 CSV/JSON 数据输入,多种图表类型
156 周安装
机器学习专家技能:深度学习、模型训练、MLOps部署与实战指南
153 周安装
Telegram Bot开发教程:使用grammY框架与Cloudflare Workers构建全栈机器人
129 周安装
YouTube视频开场钩子优化指南 - 提升留存率与观看时长的核心技巧
116 周安装
Forgiveness
Progressive Disclosure