bencium-innovative-ux-designer by bencium/bencium-claude-code-design-skill
npx skills add https://github.com/bencium/bencium-claude-code-design-skill --skill bencium-innovative-ux-designer创建独特、生产级的前端界面,避免通用的“AI 垃圾”美学。实现真正可工作的代码,并格外关注美学细节和创意选择。专业的用户界面/用户体验设计技能,有助于创建独特、易于访问且经过深思熟虑的界面。此技能强调设计决策协作,打破通用模式,并构建在保持功能性和可访问性的同时脱颖而出的界面。
此技能强调大胆的创意承诺,打破通用模式,并构建在保持功能性和可访问性的同时视觉上引人注目且令人难忘的界面。
关键:设计思维协议
在编码之前,先询问以理解上下文,然后大胆承诺一个独特的方向:
选择一个清晰的美学方向并精确执行:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
切勿使用这些 AI 生成的美学:
相反,创造氛围:
灵感来源:
视觉趣味策略:
* 识别基本目的并消除干扰
* 从复杂性开始,然后刻意删减,直到达到最简单有效的解决方案
* 每个元素都必须证明其存在的合理性
2. 材质真实性
* 数字材料具有独特的属性 - 拥抱它们
* 按钮通过颜色、间距、排版,以及有意为之的阴影来传达可供性
* 卡片可以使用边框、背景区分,或戏剧性阴影来增加深度
* 动画遵循适应数字响应性的真实世界物理原理
示例:
* 可点击:使用独特的颜色、悬停状态变化、光标反馈、微妙的提升效果
* 容器:使用边框、背景变化、充足的填充,或阴影深度
* 层次结构:使用比例、粗细、间距,以及当它服务于美学时的提升效果
3. 功能分层
* 通过排版比例、颜色对比和空间关系创建层次结构
* 概念上分层信息(主要 → 次要 → 三级)
* 当它们服务于美学方向时,**有意地**使用阴影和渐变
* 拥抱功能性深度:内容上的模态框,用户界面上的下拉菜单
* 避免:玻璃态拟物,模仿苹果(但阴影/渐变是工具,不是敌人)
4. 痴迷于细节
* 考虑每一个像素、交互和过渡
* 卓越源于数百个微小而刻意的决定
* 平衡:细节应服务于简洁,而非复杂
* 当细节与清晰度冲突时,清晰度优先
5. 连贯的设计语言
* 每个元素都应视觉上传达其功能
* 元素应感觉属于一个统一的系统
* 不应有任何东西感觉是随意的
6. 技术的隐形性
* 最好的技术会消失
* 用户应专注于内容和目标,而非理解界面
颜色使用:
排版:
动画:
间距:
在呈现任何设计之前,请验证:
设计系统框架:
要理解设计系统中什么是固定的(通用规则)、项目特定的(品牌个性)和可适应的(取决于上下文),请思考一个设计系统。
颜色系统架构:
每个界面都需要两种颜色角色:
* 背景(最浅)
* 表面颜色(卡片、输入框)
* 边框和分隔线
* 文本(最深)
* 根据品牌使用略微去饱和的暖灰或冷灰
2. 强调调色板(1-3 种颜色):
* 主要操作(行动号召按钮)
* 状态指示器(成功、警告、错误、信息)
* 焦点/悬停状态
* 使用饱和色以在中性色上产生清晰对比
调色板结构示例:
Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
颜色应用规则:
颜色关系:
根据品牌有意选择暖色或冷色:
强调色应与两者都有清晰的对比:
有意的颜色使用:
可访问性:
独特的颜色策略:
为了从通用模式中脱颖而出:
用颜色创造氛围:
排版理念:
排版是传达个性和层次结构的主要设计元素。
功能性 vs 情感性排版:
字体选择:
切勿将这些字体作为主要字体:
字体版本使用:
寻找独特的字体:
排版比例:
使用数学关系创建大小层次结构:
比例:大三度(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)
排版层次结构:
间距与可读性:
字体配对逻辑:
当使用多种字体时,通过以下方式创建对比:
示例:
用户界面排版:
界面元素的具体指导:
响应式排版:
跨断点缩放字体大小:
// 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);
}
在移动设备上减小大小(比桌面小 20-30%) 在小屏幕上减少层次级别(更少的独特大小)
构图平衡:
网格纪律:
gap 的网格/弹性包装器进行间距空间关系:
注意力引导:
动效规范:
有关详细的动效规范,请参阅 MOTION-SPEC.md(缓动曲线、持续时间表、特定状态动画、实现模式)。
核心用户体验原则:
* 用户直接与内容交互,而非通过抽象控件
* 示例:
* 拖放重新排序项目(非上下按钮)
* 内联编辑(点击编辑,非单独表单)
* 滑块用于范围(非带 +/- 的数字输入)
* 移动设备上的捏合/缩放手势(非 +/- 按钮)
2. 即时反馈
* 每次交互都提供即时视觉反馈(100 毫秒内)
* 反馈类型:
* **视觉**:按钮按下状态、悬停效果、颜色变化
* **触觉**:移动设备上的振动(提交、错误、成功)
* **音频**:关键操作的细微声音(可选,用户控制)
* **加载**:骨架屏、超过 300 毫秒操作的旋转器
* **成功**:勾选标记、绿色高亮、吐司通知
* **错误**:红色高亮、内联错误消息、抖动动画
3. 一致的行为
* 外观相似的元素行为相似
* 示例:
* **视觉一致性**:所有主要按钮具有相同的颜色、大小、悬停状态
* **行为一致性**:所有模态框通过 X 按钮、ESC 键和外部点击关闭
* **交互一致性**:所有拖放目标具有相同的悬停状态和放置反馈
* **模式一致性**:所有表单在失去焦点和提交时验证
4. 容错性
* 使错误难以发生,但恢复容易
* **预防策略**:
* 禁用无效操作(灰显不可用按钮)
* 内联验证输入(提交前)
* 确认破坏性操作(删除、覆盖)
* 后台自动保存(草稿、进度)
* **恢复策略**:
* 所有状态更改的撤销/重做
* 软删除(永久删除前放入回收站/存档)
* 带有可操作修复的清晰错误消息
* 出错时保留用户输入(不清除表单)
5. 渐进式披露
* 根据需要揭示细节,而非让用户不知所措
* 披露级别:
* **摘要**:默认显示基本信息(卡片标题、价格、评分)
* **详情**:展开显示更多信息(描述、规格、评论)
* **高级**:将复杂选项隐藏在“高级设置”切换后
* 示例:
* 手风琴:开始时折叠,点击展开
* 搜索过滤器:显示 3-5 个常用过滤器,其余隐藏在“更多过滤器”后
* 设置:基本设置可见,高级设置隐藏在“显示高级”后
现代用户体验模式:
在适当情况下优先考虑自然语言交互:
四种类型:
* **纯聊天**:完整对话(AI 助手、支持机器人)
* **命令面板**:基于文本的快捷方式(Cmd+K,随处搜索)
* **智能搜索**:自然语言查询(搜索“下周的会议” vs 过滤)
* **表单替代**:对话式数据收集(“你叫什么名字?” vs 表单字段)
何时使用:
* 具有多个变量的复杂搜索
* 任务引导(向导、入门引导)
* 情境帮助
* 快速操作(命令面板)
何时不使用:
* 简单表单(直接使用输入框)
* 精确控制界面(设计工具、仪表板)
* 高频重复性任务
2. 自适应布局
自动响应用户上下文:
* **基于时间**:夜间深色模式,白天浅色模式
* **基于设备**:移动设备上简化用户界面,桌面上完整功能
* **基于连接**:慢速连接时减少图像/视频
* **基于使用**:优先处理频繁操作,隐藏很少使用的功能
示例:
* 基于时间或系统偏好自动深色/浅色模式
* 简化的移动导航(汉堡菜单)vs 完整的桌面导航
* 小屏幕上折叠侧边栏,大屏幕上展开
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 属性 * 我们要解决什么问题?
* 用户是谁,他们何时会使用这个?
* 成功标准是什么?
2. 探索选项:
* 提出 2-3 种替代方案
* 解释每种方案的权衡
* 询问哪个方向有共鸣
3. 迭代实现:
* 从结构和层次结构开始
* 逐步添加视觉润色
* 在每个阶段进行测试
4. 验证:
* 使用 playwright MCP 测试视觉变化
* 检查不同屏幕尺寸
* 验证可访问性
视觉测试:
可访问性测试:
跨设备测试:
首先要问的问题:
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?
❌ 绝不:
✅ 始终:
有关其他上下文,请参阅:
渐进式披露文件:
每周安装次数
368
仓库
GitHub 星标数
110
首次出现
Jan 21, 2026
安全审计
安装于
opencode331
gemini-cli327
codex324
cursor318
github-copilot309
claude-code304
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. 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.
This skill emphasizes bold creative commitment , breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional and accessible.
CRITICAL: Design Thinking Protocol
Before coding, ASK to understand context , then COMMIT BOLDLY to a distinctive direction:
Choose a clear aesthetic direction and execute with precision:
NEVER Use These AI-Generated Aesthetics:
Instead, Create Atmosphere:
Draw Inspiration From:
Visual Interest Strategies:
Simplicity Through Reduction
Material Honesty
Examples:
* Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
* Containers: Use borders, background shifts, generous padding, OR shadow depth
* Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic
3. Functional Layering
* Create hierarchy through typography scale, color contrast, and spatial relationships
* Layer information conceptually (primary → secondary → tertiary)
* Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
* Embrace functional depth: modals over content, dropdowns over UI
* Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
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, think of a design system.
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:
Create Atmosphere with Color:
Typography Philosophy:
Typography is a primary design element that conveys personality and hierarchy.
Functional vs Emotional Typography:
Font Selection:
NEVER Use These Fonts as Primary:
Font Version Usage:
Find Distinctive Fonts:
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:
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. Bold Visual Expression
Aesthetic flexibility based on chosen direction:
* Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
* Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
* NO glass morphism effects (this is the one banned technique)
* NO Apple design mimicry (find your own voice)
* Focus on typography, color, spacing, AND visual effects to create hierarchy
* Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting
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?
❌ NEVER:
✅ ALWAYS:
For additional context, see:
Progressive Disclosure Files:
Weekly Installs
368
Repository
GitHub Stars
110
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode331
gemini-cli327
codex324
cursor318
github-copilot309
claude-code304
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装
Forgiveness
Progressive Disclosure